<template>
	<view class="">
		<u-picker :show="show" ref="uPicker" :title="title" :showToolbar="showToolbar" :itemHeight="itemHeight"
			:cancelText="cancelText" :cancelColor="cancelColor" :confirmText="confirmText" :confirmColor="confirmColor"
			:loading="loading" :visibleItemCount="visibleItemCount" :defaultIndex="indexs" :columns="columns"
			:closeOnClickOverlay="closeOnClickOverlay" @confirm="confirm" @close="close" @cancel="cancel"
			@change="changeHandler">
		</u-picker>
	</view>
</template>
<script>
	// import area from "../../province-city-county.json"
	export default {
		props: {
			show: {
				type: Boolean,
				default: () => false
			},
			title: {
				type: String,
				default: () => ""
			},
			showToolbar: {
				type: Boolean,
				default: () => true
			},
			itemHeight: {
				type: [String, Number],
				default: () => 44
			},
			cancelText: {
				type: String,
				default: () => "取消"
			},
			cancelColor: {
				type: String,
				default: () => "#909193"
			},
			confirmText: {
				type: String,
				default: () => "确认"
			},
			confirmColor: {
				type: String,
				default: () => "#3c9cff"
			},
			visibleItemCount: {
				type: [String, Number],
				default: () => 5
			},
			loading: {
				type: Boolean,
				default: () => false
			},
			indexs: Array,
			closeOnClickOverlay: Boolean,
			addressData:{
				type:Object,
				default:()=>{}
			}
		},
		data(){
			return {
				columns: [],
				province: [],
				city: [],
				area: [],
			}
		},
		mounted(){
			this.formatData()
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					indexs,
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					picker.setColumnValues(1, this.city[indexs[0]].map(v => v.name))
					picker.setColumnValues(2, this.area[indexs[0]][0].map(v => v.name))
				}
				if (columnIndex === 1) {
					picker.setColumnValues(2, this.area[indexs[0]][indexs[1]].map(v => v.name))
				}
			},
			formatData() {
                let areaArr = []
                this.$http.request({
                	url:'https://nuoche.s3.cn-north-1.jdcloud-oss.com/2023/01/11/6348409c2d314217be066020c9556c51.json',
                	method:'get',
                	data:{ },
                	load:false,
                    isFactory:false,
                }).then(res => {
                    areaArr = res.data
                    this.province = areaArr.map(t => {
                    	return {
                    		name: t.name,
                    		areaId: t.areaId
                    	}
                    })
                    this.city = areaArr.map(t => t.children.map(v => {
                    	return {
                    		name: v.name,
                    		areaId: v.areaId
                    	}
                    }))
                    this.area = areaArr.map(t => t.children.map(v => v.children.map(i => {
                    	return {
                    		name: i.name,
                    		areaId: i.areaId
                    	}
                    })))
                    //默认显示数据
                    this.columns = [
                    	this.province.map(res => res.name),
                    	this.city[0].map(res => res.name),
                    	this.area[0][0].map(res => res.name)
                    ]
                    //数据回显
                    if (this.addressData?.province && this.addressData?.city && this.addressData?.area) {
                    	//省索引
                    	let pIdx = this.province.findIndex(v => v.name == this.addressData.province);
                    	//根据省索引设置默认市数据
                    	this.columns[1] = this.city[pIdx].map(res => res.name)
                    	//市索引
                    	let cIdx = this.city[pIdx].findIndex(v => v.name == this.addressData.city);
                    	//根据市索引设置默认区数据
                    	this.columns[2] = this.area[pIdx][cIdx].map(res => res.name)
                    	//区索引
                    	let aIdx = this.area[pIdx][cIdx].findIndex(v => v.name == this.addressData.area);
                    	this.indexs = [pIdx, cIdx, aIdx];
                    }
                })
			},
			confirm(e) {
				this.$emit("confirm", e)
			},
			close() {
				this.$emit("close")
			},
			open() {
				this.$emit("open")
				this.formatData()
			},
			cancel(){
				this.$emit("cancel")
			}
		}
	}
</script>
<style>
</style>
