<template>
	<view class="">
		<u-picker-plus :show="show" ref="uPicker" :title="title" :showToolbar="showToolbar" :itemHeight="itemHeight"
			:cancelText="cancelText" :cancelColor="cancelColor" :confirmText="confirmText" :confirmColor="confirmColor"
			:loading="loading" :visibleItemCount="visibleItemCount" :defaultIndex="currIndexs" :columns="columns"
			:closeOnClickOverlay="closeOnClickOverlay" @confirm="confirm" @close="close" @cancel="cancel"
			@change="changeHandler" :showBottombar="showBottombar">
		</u-picker-plus>
	</view>
</template>
<script>
	import area from "../../province-city-county.json"
	import uPickerPlus from "../u-picker-plus/u-picker-plus.vue"
	export default {
		props: {
			show: {
				type: Boolean,
				default: () => false
			},
			closeOnClickOverlay: {
				type: Boolean,
				default: () => true
			},
			title: {
				type: String,
				default: () => ""
			},
			showToolbar: {
				type: Boolean,
				default: () => false
			},
			showBottombar: {
				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: {
				type: Array,
				default: () => []
			},
			defaultIds: {
				type: Array,
				default: () => []
			},
			defaultNames: {
				type: Array,
				default: () => []
			},
			labelName: {
				type: String,
				default: () => 'name'
			},
			sourceData: {
				type: Array,
				default: () => area
			},
			initBack: {
				type: Boolean,
				default: () => true
			}
		},
		data() {
			return {
				currSourceData: this.sourceData,
				//展示数据
				columns: [],
				//层级，仅用做判断
				level: 0,
				currIndexs: this.indexs,
				currNames: this.defaultNames,
				currIds: this.defaultIds,
			}
		},
		watch: {
			indexs: function(newValue, oldValue) {
				this.defaultValChange(newValue, 1)
			},
			defaultNames: function(newValue, oldValue) {
				this.defaultValChange(newValue, 2)
			},
			defaultIds: function(newValue, oldValue) {
				this.defaultValChange(newValue, 3)
			},
			sourceData: function(newValue, oldValue) {
				this.defaultValChange(newValue, 4)
			},
		},
		mounted() {
			this.formatData();
			if (this.initBack) {
				this.initBackData();
			}
		},
		components: {
			uPickerPlus
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					indexs,
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					if (this.level == 2) {
						picker.setColumnValues(1, this.currSourceData[indexs[0]].children.map(v => v[this.labelName]))
					} else if (this.level == 3) {
						picker.setColumnValues(1, this.currSourceData[indexs[0]].children.map(v => v[this.labelName]))
						picker.setColumnValues(2, this.currSourceData[indexs[0]].children[indexs[1]].children.map(v => v[
							this
							.labelName]))
					}
				}
				if (columnIndex === 1 && this.level > 2) {
					picker.setColumnValues(2, this.currSourceData[indexs[0]].children[indexs[1]].children.map(v => v[this
						.labelName]))
				}
			},
			//处理异步回调数据改变重新渲染问题
			defaultValChange(newValue, changeType) {
				this.columns = []
				this.level = 0
				this.currIndexs = []
				this.currNames = []
				this.currIds = [];
				//indexs改变
				if (changeType == 1) {
					this.currIndexs = newValue
				}
				//name改变
				if (changeType == 2) {
					this.currNames = newValue
				}
				//id改变
				if (changeType == 3) {
					this.currIds = newValue;
				}
				//数据源改变
				if (changeType == 4) {
					this.currSourceData = newValue;
					this.currIndexs = this.indexs
					this.currNames = this.defaultNames
					this.currIds = this.defaultIds
				}
				this.formatData();
				if (this.initBack) {
					this.initBackData();
				}
			},
			formatData() {
				//如果没有传入默认值，则设置index[0,0,0]
				if ([this.currNames, this.currIndexs, this.currIds].every(arr => arr.length == 0)) {
					this.currIndexs = [0, 0, 0]
				}
				//优先级为：下标，名称，id
				if (this.currIndexs.length > 0) {
					this.initData(this.currIndexs, 0)
				} else if (this.currNames.length > 0) {
					this.initData(this.currNames, 1)
				} else if (this.currIds.length > 0) {
					this.initData(this.currIds, 2)
				}
			},
			confirm(e) {
				var chooseIds = [];
				var chooseObjs = [];
				let lv1Obj = this.currSourceData[e.indexs[0]];
				let lv1Id = this.currSourceData[e.indexs[0]].id;
				chooseIds.push(lv1Id);
				chooseObjs.push(lv1Obj);
				if (this.level > 1) {
					let lv2Obj = this.currSourceData[e.indexs[0]].children[e.indexs[1]];
					let lv2Id = this.currSourceData[e.indexs[0]].children[e.indexs[1]].id;
					chooseIds.push(lv2Id);
					chooseObjs.push(lv2Obj);
				}
				if (this.level > 2) {
					let lv3Obj = this.currSourceData[e.indexs[0]].children[e.indexs[1]].children[e.indexs[2]];
					let lv3Id = this.currSourceData[e.indexs[0]].children[e.indexs[1]].children[e.indexs[2]].id;
					chooseIds.push(lv3Id);
					chooseObjs.push(lv3Obj);
				}
				e.chooseIds = chooseIds;
				e.chooseObjs = chooseObjs;
				this.$emit("confirm", e)
			},
			initBackData() {
				var initValue = [];
				for (var i = 0; i < this.currIndexs.length; i++) {
					initValue.push(this.columns[i][this.currIndexs[i]])
				}
				var initData = {
					value: initValue,
					indexs: this.currIndexs,
					values: this.columns
				}
				this.confirm(initData);
			},
			close() {
				this.$emit("close")
			},
			open() {
				this.$emit("open")
				this.formatData()
			},
			cancel() {
				this.$emit("cancel")
			},

			//初始化数据
			initData(inPutArr, inpuType) {
				//第一层级
				if (inPutArr[0] != undefined) {
					this.level = 1;
					var arr = this.currSourceData.map(t => {
						return t[this.labelName]
					});
					this.columns.push(arr)
					if (inpuType == 1) {
						var currIndex = this.currSourceData.findIndex(item => item[this.labelName] == inPutArr[0]);
						this.currIndexs.push(currIndex)
					} else if (inpuType == 2) {
						var currIndex = this.currSourceData.findIndex(item => item.id == inPutArr[0]);
						this.currIndexs.push(currIndex)
					}
				}
				//第二层级
				if (inPutArr[1] != undefined) {
					this.level = 2;
					var level2Arr = this.currSourceData[this.currIndexs[0]].children
					var arr = level2Arr.map(t => {
						return t[this.labelName]
					})
					this.columns.push(arr)
					if (inpuType == 1) {
						console.log('根据defaultNames判断');
						var currIndex = level2Arr.findIndex(item => item[this.labelName] == inPutArr[1]);
						this.currIndexs.push(currIndex)
					} else if (inpuType == 2) {
						console.log('根据defaultIds判断');
						var currIndex = level2Arr.findIndex(item => item.id == inPutArr[1]);
						this.currIndexs.push(currIndex)
					}
				}
				if (inPutArr[2] != undefined) {
					this.level = 3;
					var level3Arr = this.currSourceData[this.currIndexs[0]].children[this.currIndexs[1]].children
					var arr = level3Arr.map(t => {
						return t[this.labelName]
					})
					this.columns.push(arr)
					if (inpuType == 1) {
						var currIndex = level3Arr.findIndex(item => item[this.labelName] == inPutArr[2]);
						this.currIndexs.push(currIndex)
					} else if (inpuType == 2) {
						var currIndex = level3Arr.findIndex(item => item.id == inPutArr[2]);
						this.currIndexs.push(currIndex)
					}
				}
			}
		}
	}
</script>
<style>

</style>