<template>
	<view>
		<!-- 顶部区域 -->
		<check-top-wrap :yearVal="yearVal" :keyword="keyword" :cityVal="cityVal" @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=迁安市西甲河造纸厂" hover-class="none">
				<view class="factoryLeft">
					<view class="factoryNum">
						{{index + 1}}
					</view>
				</view>
				<view class="factoryRight">
					<view class="factoryName">
						迁安市西甲河造纸厂
					</view>
					<view class="typeAddress">
						机制纸板制造
						<view class="address">
							河北
						</view>
					</view>
					<view class="factoryDate">
						11-30
					</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 {
				list:[1,2,3,4,5],
				yearVal:new Date().getFullYear().toString(),
				cityVal:'',
				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.cityVal = res.address.city
					this.defaultRegion = [res.address.province,res.address.city]
			    }
			});
			//#endif
			//#ifdef H5
			this.cityVal = '全流域'
			this.defaultRegion = ['全流域','']
			//#endif
		},
		methods: {
			showPicker(e){
				if(e.pickerType == 'year'){
					this.visibleYear = true
				}
				if(e.pickerType == 'region'){
					this.visibleRegion = true
				}
			},
			onCancel(){
				
			},
			onConfirm(e,pickerType){
				if(pickerType == 'year'){
					this.yearVal = e.result
				}
				if(pickerType == 'region'){
					if(e.obj.city.label != ''){
						this.cityVal = e.obj.city.label
					}else{
						this.cityVal = '全流域'
					}
				}
			}
		}
	}
</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;width: 64rpx;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>