<template>
	<view class="">
		<view>
			<view class="header">
			</view>
			<view>{{newArea}}</view>
			<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :range="range"
				range-key="region_name" @change="change">
				<input type="text" value="" />
			</picker>
			<button class="btn" type="primary">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				range: [
					[],
					[]
				],
				code: '',
				newArea: ''

			}
		},
		onLoad() {
			//首次加载获取省
			 this.getCode().then(res=>{
			 if(this.code ==0){
			 	this.range.unshift(res)
			 })
			 }
		},
		methods: {
			
			change(e) {
				//点击确认之后获取对应的省市区，因为这个picker本身没有做限制，比如选只选择一列数据，也是允许提交的，但是获取省市区的时候，因为没有选择区，所以我用三元运算符手动设置限制，如果没选择的话会获取到一个空
				let province = this.range[0][e.detail.value[0]] ? this.range[0][e.detail.value[0]].region_name : '';
				let city = this.range[1][e.detail.value[1]] ? this.range[1][e.detail.value[1]].region_name : '';
				let area = this.range[2][e.detail.value[2]] ? this.range[2][e.detail.value[2]].region_name : '';
				console.log(province, city, area, 99999999999)
				if (!(province && city && area)) {
					uni.showToast({
						title: '请选择完整的省市区！',
						icon: 'none',
						duration: 2000
					})
				} else {
					this.newArea = province + city + area
				}
			},
			//核心代码，piker中的数据动态生成
			bindMultiPickerColumnChange(e) {
				this.code = this.range[e.detail.column][e.detail.value].id;
				console.log(this.code, 9999999999)
				if (e.detail.column == '0') {
					//如果第一个选项的数据发生变化
					this.getCode().then(res => {
						//将第二列获取的数据放在新的选项中，此处用$set设置数组中的元素效果一样
						this.range.splice(1, 1, res);
						//将第三列清空，不然如果选择了新的省，但是没有选择市的时候，那么区的数据就没有更新，此处清空区的数据，等市选择之后再把区的数据更新
						this.range.splice(2, 1, []);
					})
				} else if (e.detail.column == '1') {
					this.getCode().then(res => {
						this.range.splice(2, 1, res);
					})
				}

			},
			//获取省市区对应的数据，此处的逻辑是传省的code会返回市的数据，传市的code会返回区的数据，具体获取数据方法跟根据后台来定
			getCode() {
				const option = {
					urlName: 'depponown/selectProvinces',
					method: 'POST',
					data: {
						headerInfo: {},
						data: {
							parentId: this.code,
						},
					}
				}
				return new Promise(function(resolve, reject) {
					//requestHttp是封装的请求不用在意，回调方式封装的
					requestHttp(option, function(res) {
						if (res.success) {
							resolve(JSON.parse(res.result))
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>