<template>
	<view class="checkCity" :style="{width: width,margin:m_l}">
		<picker mode="multiSelector" class="dataPicker" :range="citylist"  :value="cityIndex" @columnchange='changeCity' range-key="name" @change="checkCity">
			<view class="uni-input" v-if="returnData.provinceidName!==''">{{ returnData.provinceidName }} {{ returnData.areaidName }} {{ returnData.distidName }}</view>
			<view class="uni-input1" v-else>
				选择省市  区县
			</view>
		</picker>
	</view>
</template>

<script>
	import App from "@/common/js/app.js"
	// #ifdef H5
	import wxApi from "@/common/js/wxApi.js"
	// #endif	
	
export default {
	props:{
		userAddress:{
			type: Object,
			default:{}
		},
		show:'',
		width:{
			type:String,
			default:'70%'
		},
		m_l:{
			type:String,
			default:'0 0 0 30px'
		}
	},
	data() {
		return {
			cityList:[],
			citylist:[],
			cityIndex:[0,0,0],
			returnData:{
				distidName:'',
				provinceidName:'',
				areaidName:'',
				provinceid:'',
				cityid:'', 
				countyid:'',
			},
			count:0
		};
	},
	mounted(){
		this.cityList=uni.getStorageSync('cityList')
		this.init();
	},
	watch:{
		'userAddress':{
			handler(newval,oldval){
				let _this=this;
				console.log(newval);
				if(_this.userAddress.provinceidName == undefined || _this.userAddress.provinceidName==''){
					for(let i=0;i<_this.cityList.length;i++){
						if(_this.userAddress.provinceid==_this.cityList[i].id){
							_this.returnData.provinceidName=_this.cityList[i].name;
							for(let a=0;a<_this.cityList[i].area.length;a++){
								if(_this.userAddress.cityid==_this.cityList[i].area[a].id){
									_this.returnData.areaidName=_this.cityList[i].area[a].name
									for(let c=0;c<_this.cityList[i].area[a].dist.length;c++){
										if(_this.userAddress.countyid==_this.cityList[i].area[a].dist[c].id){
											_this.returnData.distidName=_this.cityList[i].area[a].dist[c].name
										}
									}
								}
							}
						}
					}
				}
				else{
					_this.returnData.provinceidName=_this.userAddress.provinceidName
					_this.returnData.areaidName=_this.userAddress.areaidName
					_this.returnData.distidName=_this.userAddress.distidName
					for(let i=0;i<_this.cityList.length;i++){
						if(_this.userAddress.provinceidName==_this.cityList[i].name){
							_this.returnData.provinceid=_this.cityList[i].id
							for(let a=0;a<_this.cityList[i].area.length;a++){
								if(_this.userAddress.areaidName==_this.cityList[i].area[a].name){
									_this.returnData.cityid=_this.cityList[i].area[a].id
									for(let c=0;c<_this.cityList[i].area[a].dist.length;c++){
										if(_this.userAddress.countyid==_this.cityList[i].area[a].dist[c].id){
											_this.returnData.countyid=_this.cityList[i].area[a].dist[c].id
										}
									}
								}
							}
						}
					}
				}
				_this.$emit("galadata",_this.returnData);
			},
			deep:true
		}
	},
	methods:{
		init(){
			let _this=this
			let cityCheckLeft=[]
			let cityCheckCenter=[]
			let cityCheckRight=[]
			// 省
			for(let i=0;i<_this.cityList.length;i++){
				cityCheckLeft.push(_this.cityList[i])
			}
			_this.citylist.push(cityCheckLeft)	
			// 市
			for(let i=0;i<_this.cityList[0].area.length;i++ ){
				cityCheckCenter.push(_this.cityList[0].area[i])
			}
			_this.citylist.push(cityCheckCenter)
			// 区
			for(let i=0;i<_this.cityList[0].area[0].dist.length;i++){
				cityCheckRight.push(_this.cityList[0].area[0].dist[i])
			}
			_this.citylist.push(cityCheckRight)
		},
		// 三级联动
		changeCity(e){
			let _this=this
			let cityCheckCenter=[]
			let cityCheckRight=[]
			// 市级联动
			if(e.target.column==0){
				for(let i=0;i<_this.cityList.length;i++){
					if(e.target.value==i){
						for( let a=0;a<_this.cityList[i].area.length;a++){
							cityCheckCenter.push(_this.cityList[i].area[a])
						}
					}
				}
				_this.citylist.splice(1,2,cityCheckCenter)
				_this.citylist.splice(2,3,cityCheckCenter[0].dist)
			}
			// 区级联动
			if (e.target.column == 1) {
				for (let a = 0; a < _this.citylist[1].length; a++) {
					if (e.target.value == a) {
						for (let c = 0; c < _this.citylist[1][a].dist.length; c++) {
							cityCheckRight.push(_this.citylist[1][a].dist[c]);
						}
					}
				}
				_this.citylist.splice(2, 3, cityCheckRight);
			}
		},
		// 弹窗确定按钮
		checkCity: function(e) {
			let _this = this;
			_this.returnData.provinceidName = _this.citylist[0][e.target.value[0]].name;
			_this.returnData.areaidName = _this.citylist[1][e.target.value[1]].name;
			_this.returnData.distidName = _this.citylist[2][e.target.value[2]] && _this.citylist[2][e.target.value[2]].name  || '';
			_this.returnData.provinceid = _this.citylist[0][e.target.value[0]].id;
			_this.returnData.cityid = _this.citylist[1][e.target.value[1]].id;
			_this.returnData.countyid = _this.citylist[2][e.target.value[2]] && _this.citylist[2][e.target.value[2]].id || '';
			_this.$emit("returnData",_this.returnData,_this.cityIndex)
			console.log(_this.cityIndex);
		},
	}
};
</script>

<style lang="less" scoped>
	.checkCity{
		vertical-align: middle;
		height: 100%;
		display: inline-block;
	}
	.uni-input{
		line-height: 80upx;
		vertical-align: middle;
		width: 100%;
		height: 80upx;
		display: inline-block;
		font-size: 24upx;
		font-family: SourceHanSansCN-Regular;
		
		color: #333333;
	}
	.uni-input1{
		line-height: 80upx;
		color:rgba(153,153,153,1);
		vertical-align: middle;
		width: 100%;
		height: 80upx;
		display: inline-block;
		font-size: 24upx;
		font-family: SourceHanSansCN-Regular;
		
	}
</style>
