<template>
	<view>
		<view class="topWrap" :style="{background:bgColor}">
			<view class="searchWrap">
				<view class="search" :style="{background:searchBgColor}" @click="search">
					<image src="../static/image/search@2x.png" mode=""></image>
					<input type="text" v-model="keyword" placeholder="搜索" placeholder-style="font-size: 28rpx;color: #969799;"/>
				</view>
			</view>
			<view class="paramWrap">
				<view class="tabList">
					<view class="tabItem" :class="{active:tabIndex == -1}" @click="changeTabIndex(-1)">
						全部 ({{check.sum}})
					</view>
					<view class="tabItem" :class="{active:tabIndex == 0}" @click="changeTabIndex(0)">
						待督查 ({{check.uncomplete}})
					</view>
					<view class="tabItem" :class="{active:tabIndex == 1}" @click="changeTabIndex(1)">
						已督查 ({{check.complete}})
					</view>
				</view>
				<view class="selectList">
					<view class="selectItem" @click="showPicker('year')">
						{{yearVal == '全' ? '全部' : yearVal+'年'}}<image src="../static/image/ic_arrowdown.png" mode=""></image>
					</view>
					<view class="selectItem" @click="showPicker('region')">
						{{cityVal}}<image src="../static/image/ic_arrowdown.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view style="height:302rpx"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				check:{},
				topHeight:0,
				tabIndex:-1,
				bgColor:'#4bb377',
				searchBgColor:"#fff",
			}
		},
		props:{
			yearVal:{
				type:String
			},
			cityVal:{
				type:String
			},
			keyword:{
				type:String
			}
		},
		watch:{
			cityVal(e){
				this.cityVal = e
			}
		},
		mounted() {
			if(this.keyword != ''){
				this.bgColor = '#fff'
				this.searchBgColor = '#f2f3f5'
			}
			this.getData()
		},
		methods: {
			getData(){
				uni.request({
					url:this.apiUrl + 'license/count',
					method:'post',
					success: (res) => {
						this.check = res.data.data
					}
				})
			},
			search(){
				uni.navigateTo({
					url:'/pages/index/license/search'
				})
			},
			showPicker(pickerType){
				this.$emit('showPicker',{'pickerType':pickerType})
			},
			changeTabIndex(tabIndex){
				this.tabIndex = tabIndex
				this.$emit('changeParamType',{tabIndex:tabIndex})
			}
		}
	}
</script>

<style>
	/* 顶部区域 */
	.topWrap{position: fixed;width: 100%;z-index: 1;}
	.topWrap .searchWrap{padding: 16rpx 32rpx 32rpx 32rpx;}
	.searchWrap .search{border-radius: 68rpx;height: 72rpx;display: flex;align-items: center;padding: 0 29rpx;}
	.search image{width: 32rpx;height: 32rpx;}
	.search input{padding-left: 8rpx;font-size: 28rpx;width: 100%;}
	.topWrap .paramWrap{padding: 28rpx 36rpx 24rpx 36rpx;background: #fff;border-radius: 20rpx 20rpx 0 0;}
	.paramWrap .tabList{display: flex;border-radius: 16rpx;background: #f2f3f5;font-size: 26rpx;height: 72rpx;align-items: center;padding: 0 4rpx;}
	.tabList .tabItem{flex: 1;text-align: center;line-height: 64rpx;height: 64rpx;}
	.tabItem.active{background: #fff;border-radius: 14rpx;box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0,0,0,0.15), 0rpx 2rpx 2rpx 0rpx rgba(0,0,0,0.06);transition: 0.5s;}
	.paramWrap .selectList{display: flex;padding-top: 24rpx;font-size: 26rpx;}
	.selectList .selectItem{display: flex;justify-content: center;align-items: center;flex: 1;}
	.selectItem image{width: 32rpx;height: 32rpx;margin-left: 8rpx;}
</style>