<template>
	<view>
		<!-- 顶部区域 -->
		<check-top-wrap @changeParamType="changeParamType" :yearVal="param.year" :keyword="keyword" :cityVal="basinTxt" @showPicker="showPicker"></check-top-wrap>
		<w-picker
			:visible.sync="visibleYear"
			mode="date" 
			:current="true"
			fields="year"
			@confirm="onConfirm($event,'year')"
			@cancel="onCancel"
			:disabled-after="false"
			ref="date" 
		>选择年份</w-picker>
		<w-picker
			:visible.sync="visibleRegion"
			mode="region"
			:value="defaultRegion"
			default-type="label"
			:hide-area="true"
			@confirm="onConfirm($event,'region')"
			@cancel="onCancel"
			ref="region" 
		>选择地区</w-picker>
		<view class="factoryList">
			<navigator class="factoryItem" v-for="(item,index) in list" :key="index" :url="'factoryDetail?factoryName='+item.OWNERCOMPANY+'&companyid='+item.companyid" hover-class="none">
				<view class="factoryLeft">
					<view class="factoryNum">
						{{index + 1}}
					</view>
				</view>
				<view class="factoryRight">
					<view class="factoryName">
						{{item.OWNERCOMPANY}}
					</view>
					<view class="typeAddress">
						{{item.TYPE}}
						<view class="address">
							{{item.PROVINCE}}
						</view>
					</view>
					<view class="factoryDate">
						{{item.MISSIONTM}}
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import checkTopWrap from '@/components/checkTopWrap.vue'
	import wPicker from "@/components/w-picker/w-picker.vue"
	import {mapState} from "vuex"	
	export default {
		data() {
			return {
				basinTxt:'全流域',
				param:{
					// 恢复位置
					year:new Date().getFullYear().toString(),
					basin:'',
					type:'',
					companyName:this.$store.state.keyword
				},
				list:[],
				visibleYear:false,
				visibleRegion:false,
				defaultRegion:[]
			}
		},
		components:{
			checkTopWrap,
			wPicker
		},
		computed:{
			...mapState(["keyword"])
		},
		onReady() {
			if(this.keyword != ''){
				uni.setNavigationBarTitle({
					title:'搜索'
				})
				uni.setNavigationBarColor({
				    frontColor: '#000000',
				    backgroundColor: '#ffffff'
				})
			}
		},
		onLoad() {
			//#ifdef APP-PLUS
			uni.getLocation({
			    type: 'gcj02',
				geocode: true,
			    success: (res) => {
					this.param.basin = res.address.city
					this.basinTxt = res.address.city
					this.defaultRegion = [res.address.province,res.address.city]
			    }
			});
			//#endif
			//#ifdef H5
			// 恢复位置
			this.defaultRegion = ['全流域','']
			//#endif
			this.getData()
		},
		methods: {
			getData(){
				console.log('查询参数',this.param)
				uni.showLoading({
					title:'加载中'
				})
				uni.request({
					url:this.apiUrl+'license/list',
					data:this.param,
					success: (res) => {
						console.log('厂家',res)
						this.list = res.data.data
						uni.hideLoading()
					}
				})
			},
			changeParamType(e){
				if(e.tabIndex == -1){
					this.param.type = ''
					this.getData()
				}else{
					this.param.type = e.tabIndex.toString()
					this.getData()
				}
			},
			showPicker(e){
				if(e.pickerType == 'year'){
					this.visibleYear = true
				}
				if(e.pickerType == 'region'){
					this.visibleRegion = true
				}
			},
			onCancel(){
				
			},
			onConfirm(e,pickerType){
				if(pickerType == 'year'){
					this.param.year = e.result
				}
				if(pickerType == 'region'){
					if(e.obj.city.label != ''){
						this.param.basin = e.obj.city.label
						this.basinTxt = e.obj.city.label
					}else{
						this.param.basin = ''
						this.basinTxt = '全流域'
					}
				}
				this.getData()
			}
		}
	}
</script>

<style>
	page{background: #f7f8fa;}
	/* 厂家列表区域 */
	.factoryList{padding: 24rpx 32rpx;}
	.factoryList .factoryItem{padding: 32rpx 32rpx 36rpx 0;border-radius: 24rpx;background: #fff;margin-top: 24rpx;display: flex;}
	.factoryList .factoryItem:nth-child(1){margin-top: 0;}
	.factoryItem .factoryLeft{width: 92rpx;}
	.factoryLeft .factoryNum{background: #f2f3f5;width: 52rpx;height: 40rpx;text-align: center;line-height: 40rpx;font-size: 28rpx;color: #646566;border-radius: 0 30rpx 30rpx 0;}
	.factoryItem .factoryRight{flex: 1;}
	.factoryRight .factoryName{font-size: 36rpx;}
	.factoryRight .typeAddress{display: flex;padding-top: 24rpx;font-size: 28rpx;color: #969799;align-items: center;}
	.typeAddress .address{margin-left: 24rpx;padding: 0 5rpx;height: 32rpx;background: #e6faf1;border-radius: 8rpx;text-align: center;line-height: 32rpx;font-size: 24rpx;color: #6fc393;}
	.factoryRight .factoryDate{font-size: 24rpx;color: #c8c9cc;padding-top: 4rpx;}
</style>