<template>
	<wybPopup ref="popup"  type="bottom" width="500" scrollY="true" radius="0" :showCloseIcon="false">
		<view class="popup">
				<view class="top-title dis-flex flex-sp pd-main border-b">
					<view class="left" @click="close">取消</view>
					<view class="right" @click="confirm">确定</view>
				</view>
				
				<picker-view :indicator-style="bootStyle" :value="selectList" @change="selectData">
					<picker-view-column>
						<view class="item" v-for="(item,index) in province" :key="item.id">{{item.name}}</view>
					</picker-view-column>
					<!-- v-if="province[selectList[0]]" -->
					<picker-view-column >
						<view class="item" v-for="(item,index) in citylist" :key="index">{{item.name}}</view>
					</picker-view-column>
					<!-- v-if="citylist[selectList[0]]" -->
					<picker-view-column >
						<view class="item" v-for="(item,index) in arealist" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
				
		</view>
	</wybPopup>
</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	let AllAddress = require('./address.json')
	export default {
		data() {
			return{
				addInfo:"请选择省市区",    //显示用的：广东省 广州市 天河区
				bootStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				selectList: [0, 0, 0], //第一个元素表示滑动省列表，以此类推
				oldSelectList:[],
				province: [], // 省列表
				citylist:[],	//市列表
				arealist:[],	//区列表
				
			}
		},
		components:{
			wybPopup
		},
		methods:{
			show(){
				this.province=JSON.parse(JSON.stringify(AllAddress)) ;
				this.initData();
				this.$refs.popup.show()
			},
			
						
						
			//选择地址确定按钮事件
			confirm() {
				
				var sheng = "";	//省
				var city = "";	//市
				var area = "";	//区
				if(this.province){
					sheng = this.province[this.selectList[0]].name;
				}
				if(this.citylist){
					city = this.citylist[this.selectList[1]].name;
				}
				if(this.arealist){
					area = this.arealist[this.selectList[2]].name;
				}
				var value = sheng;
				if(city){
					value += " " + city;
				}
				if(area){
					value += " " + area;
				}
				this.addInfo = value;
				
				this.$emit("getAddress",this.addInfo)
				this.$refs.popup.close()
			},
			
			
			
			//关闭地址选择
			close() {
				this.$refs.popup.close()    
			},
			// picker-view的change事件
			selectData(e) {
				const val = e.detail.value;
				this.oldSelectList=this.selectList;
				this.selectList=val;
				
				let that = this;
				let arr=[];
				// console.log(this.selectList,1)
				this.selectList.map((item,index1)=>{
					that.oldSelectList.map((item2,index2)=>{
						
						if(index1 == index2 && item != item2 ){
							if(index1!=2){
								if(index1 == 0){
									arr = [item,0,0];
								}
								if(index1 == 1){
									arr = [that.selectList[index1-1],item,0];
								}
								
								that.selectList=arr;
							}
							
							return
						}
						
					})
				})
				// console.log(that.selectList,2)
				
				
				this.initData()
			},
			initData(){
				
				// console.log(this.selectList[0],this.selectList[1],"aa",this.selectList)
				this.citylist = this.province[this.selectList[0]].children;    //放到市数组
				this.arealist = this.province[this.selectList[0]].children[this.selectList[1]].children;    //放到区数组
				
			}
				
				
		}
		
	}
</script>

<style lang="scss">
	// .top-title{
	// 	height: 40px;
	// 	line-height: 40px;
	// }
	// .picker-v{
	// 	height:calc(100% - 40px);
	// 	box-sizing: border-box;
	// }
	
	uni-picker-view {
	  display: block;
	}
	uni-picker-view .uni-picker-view-wrapper {
	  display: flex;
	  position: relative;
	  overflow: hidden;
	  height: 100%;
	  background-color: white;
	}
	uni-picker-view[hidden] {
	  display: none;
	}
	picker-view {
	  width: 100%;
	  // height: 600upx;
	  height: 400rpx;
	  margin-top: 20upx;
	}
	.item {
	  line-height: 100upx;
	  text-align: center;
	}

</style>
