<template>
	<view class="">
		<u-picker @close="close" :immediateChange ="true" :show="shows" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker>
	</view>
</template>

<script>
	import localData from '../utils/address-data.js'
	export default {
		props: {
			shows: {
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				columns: [],
				columnData: [],
			}
		},
		mounted() {
			this.columns[0] = localData.map(item=>item.name)
			this.columns[1] = localData[0].cities.map(item=>item.name)
			this.columns[2] = localData[0].cities[0].districts.map(item=>item.name)
		},
		methods: {
			close() {
				this.$emit('close', false)
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				console.log('变化',index)
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					let arr = localData.find(item=>item.name == value[0])
					let arr1 = arr.cities.map(item=>item.name)
					this.columnData = arr1
					console.log('市',arr1[0],arr)
					let distinguish = arr.cities[0].districts.map(item=>item.name)
					picker.setColumnValues(1, arr1) //第二列
					picker.setColumnValues(2, distinguish) //第三列
				}
				if (columnIndex === 1) {
					// picker为选择器this实例，变化第三列对应的选项
					let economize = localData.find(item=>item.name == value[0])
					let city = economize.cities.find(item=>item.name == value[1])
					let distinguish = city.districts.map(item=>item.name)
					picker.setColumnValues(2, distinguish)
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.$emit('popShow',e.value)
			}
		}
	}
</script>

<style>
</style>