<template>
	<view>
		<u-picker :show="show" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler"
			@cancel="cancel"></u-picker>
	</view>
</template>

<script>
	import { cityData } from '@/utills/city.js'
	export default {
		name: "cityPicker",
		props: {
			showPicker: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				cityData,
				//显示选择器
				show: false,
				// 打开选择器显示默认城市
				cityList: [],
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: []
			};
		},
		watch: {
			showPicker: {
				handler(val) {
					console.log(val)
					this.show = this.showPicker
				},
				immediate: true
			},
			show: {
				handler(val) {
					if(val) {
						this.cityList = [],
						this.cityLevel1 = [],
						this.cityLevel2 = [],
						this.cityLevel3 = []
						this.initCityData();
					}
				},
				immediate: true
			}
		},
		onLoad() {
			// 城市选择器初始化
			this.initCityData();
		},
		methods: {
			initCityData() {
				// 遍历城市js
				this.cityData.forEach((item1, index1) => {
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);

					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) => {
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) => {
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;

					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
			},
			// 选中时执行
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				} else if (columnIndex === 1) { // 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},
			// 单击确认按钮时执行
			confirm(e) {
				// 输出数组 [省, 市, 区]
				console.log(e.value);
				this.$emit('confirm', e.value)
				// 隐藏城市选择器
				this.show = false;
			},
			cancel() {
				this.$emit('cancel')
				this.show = false
			}
		}
	}
</script>

<style>

</style>
