<template>
	<picker class="picker" mode="multiSelector" :range="region" range-key="label" :value="regionIndex"
		@change="pickerChange" @columnchange="pickerColumnchange">
		<view class="uni-form-item">
			<view class="selectView">
				{{textStr}}
				<!-- <u-cell-group>
					<u-cell :title="textStr" :isLink="isLinkBoole" :arrow-direction="arrowDirection">
					</u-cell>
				</u-cell-group> -->
			</view>
		</view>
	</picker>
</template>
<script>
	import {
		regionData
	} from 'element-china-area-data'
	import { replaceAll } from "@/utils/util"
	export default {
		data() {
			return {
				region: '',
				genderStr: '',
				//regionData: regionData,
				region: [
					[],
					[],
					[]
				],
				regionIndex: [0, 0, 0],
				regionStr: '',
				address: '',
				valueStr: "",
				value: "",
			}
		},
		props: {
			crmId: {
				type: [String, Number],
				default: ""
			},
			crmName: {
				type: [String],
				default: undefined
			}
		},
		watch: {
			crmId: {
				handler(newValue, oldValue) {
					if (oldValue == undefined && newValue != undefined) {
						this.value = newValue
					}
				},
				immediate: true
			},
			crmName: {
				handler(newValue, oldValue) {
					if (oldValue == "" && newValue != "") {
						this.valueStr = newValue
					}
				},
				immediate: true
			}
		},
		created() {
			//console.log(regionData)
			this.region[0] = this.regionData
			this.region[1] = this.regionData[0].children
			this.region[2] = this.regionData[0].children[0].children
		},
		computed: {
			textStr() {
				return this.valueStr == "" ? "请选择省市区" : replaceAll(this.valueStr, ",", " ") 
			},
			arrowDirection() {
				return "down"
			},
			isLinkBoole() {
				return true;
			},
			regionData() {
				let ret = regionData.filter(item => {
					let itemRet = item
					if (itemRet.children[0].children != undefined) {
						if (itemRet.children[0].children[0].label == "市辖区") {
							itemRet.children[0].children.shift()
						}
					}
					return item
				})
				//console.log(ret)
				return ret;
			}
		},
		methods: {
			pickerChange(e) {
				// console.log(e, '1');
				this.regionIndex = e.detail.value;
				this.regionStr = this.region[0][this.regionIndex[0]].label + ',' + this.region[1][this.regionIndex[1]]
					.label + ',' + this.region[2][this.regionIndex[2]].label;
					
				this.address = this.region[0][this.regionIndex[0]].label +
					this.region[1][this.regionIndex[1]].label +
					this.region[2][this.regionIndex[2]].label + '';
					
				//console.log('编号', this.region[0][this.regionIndex[0]].value, this.region[1][this.regionIndex[1]].value,
					//this.region[2][this.regionIndex[2]].value)
					this.valueStr = this.regionStr
					this.value = this.region[0][this.regionIndex[0]].value + ',' + this.region[1][this.regionIndex[1]].value + ',' + this.region[2][this.regionIndex[2]].value;
					this.$emit('change', {
						valueStr: this.valueStr,
						value: this.value
					})
				//		console.log(this.regionStr)
			},
			pickerColumnchange(e) {
				if (e.detail.column === 0) {
					// 声明城市数组
					let cityArr = [];
					let countyArr = [];
					// 设置下标
					this.regionIndex = [e.detail.value, 0, 0];
					this.$set(this.region, 1, this.regionData[e.detail.value].children);
					this.$set(this.region, 2, this.regionData[e.detail.value].children[0].children);
				}
				if (e.detail.column === 1) {
					this.regionIndex[1] = e.detail.value;
					this.regionIndex[2] = 0;
					this.$set(this.region, 2, this.regionData[this.regionIndex[0]].children[this.regionIndex[1]].children);
				}
				if (e.detail.column === 2) {
					this.regionIndex[2] = e.detail.value;
				}
			},
		}
	}
</script>

<style scoped>
	.selectView {
		/* border: 1px #ddd solid;
		color: black;*/
		height: 100%; 
		line-height: 2.5;
	}
</style>
