<template>
	<view class="">
		<view class="head">
			<div class="df aic jcsb">
				<div class="Region">所在地区</div>
				<div class="df province" @click="show4=true">
					<view class="" v-if="address.length>0">
						{{address}}
					</view>
					<view class="" v-else>
						选择省市
					</view>
					<u-icon name="arrow-right"></u-icon>
				</div>
			</div>
			<div class="xkjs"></div>
			<div class="df aic jcsb">
				<div class="Region">详细地址</div>
				<input style="text-align: right;color: #000;" type="text" v-model="postbox" placeholder-class="province" placeholder="详细地址,门牌号">
			</div>
			
		</view>
		 <!-- <u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker> -->
		<div class="btn df aic jcsa" @click="btn">完成</div>
		<u-picker @cancel="show4=false"  closeOnClickOverlay @confirm="confirm" :show="show4" :columns="columns"></u-picker>
		<u-picker @cancel="show5=false"  closeOnClickOverlay @confirm="confirmone" :show="show5" :columns="columnslist"></u-picker>
		<u-picker @cancel="show6=false"  closeOnClickOverlay @confirm="confirmtwo" :show="show6" :columns="columnqu"></u-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
					return {
						show4:false,
						show5:false,
						show6:false,
						show: false,
						columns: [],
						columnslist:[],
						list:[],
						columnqu:[],
						economize:'',//省id
						distinguish:'',//市的id
						jioauk:''  ,//区的id
						economizename:'',//省name
						distinguishme:'',//区name
						marketname:'',//市name
						postbox:'',
						address:'',
		                columns: [
		                    ['中国', '美国'],
		                    ['深圳', '厦门', '上海', '拉萨']
						],
		                columnData: [
		                    ['深圳', '厦门', '上海', '拉萨'],
		                    ['得州', '华盛顿', '纽约', '阿拉斯加']
		                ]
					}
				},
				onShow() {
					this.$api.sendRequest({
						url:'/api/address/lists',
						data:{
							pid:0
						},
						success:res=>{
							this.list=res.data
							let a=[]
							for(let i=0;i<res.data.length;i++){
								a.push(res.data[i].name)
							}
								this.columns=[a]
						
						}
					})
				},
				methods: {
					// confirm(e){
					// 	console.log(e);
					// 	this.show4=false
					// 	this.show5=true
					// },
					confirm(e){
							console.log(1);
							this.economizename=e.value[0]
							console.log(2);
							let _this=this
							for(var i=0;i<this.list.length;i++){
								if(this.list[i].name==e.value[0]){
									_this.economize=_this.list[i].id
								}
							}
							console.log(3);
							this.$api.sendRequest({
								url:'/api/address/lists',
								data:{
									pid:_this.economize
								},
								success:res=>{
												console.log(res);
									let a=[]
									this.columnslits=res.data
									// console.log(res.data,'daa');
									for(var i=0;i<res.data.length;i++){
										a.push(res.data[i].name)
									}
									_this.columnslist=[a]
									console.log(4);
									// console.log(_this.columnslist,'box');
									this.show5=true
									this.show4=false
								}
							})
							
					},
					confirmone(e){
											this.marketname=e.value[0]
											let _this=this
											for(var i=0;i<this.columnslits.length;i++){
												
												if(_this.columnslits[i].name==e.value[0]){
													_this.distinguish=_this.columnslits[i].id
												}
												
											}
											this.$api.sendRequest({
								url:'/api/address/lists',
								data:{
									pid:_this.distinguish
								},
								success:res=>{
									let a=[]
									this.distinguishname=res.data
									for(var i=0;i<res.data.length;i++){
										a.push(res.data[i].name)
									}
									this.columnqu=[a]
									this.show6=true
									this.show5=false
								}
							})
					},
					confirmtwo(e){
											this.distinguishme=e.value[0]
											let _this=this
											for(var i=0;i<this.distinguishname.length;i++){
												if(_this.distinguishname[i].name==e.value[0]){
													_this.jioauk=_this.distinguishname[i].id
												}
							}
							this.show6=false
							this.address=this.economizename+''+this.marketname+''+this.distinguishme
							console.log(this.address);
					},
					btn(){
						console.log({
							address:this.address+""+this.postbox
						});
						
						// this.$util.showToast({
						// 	title: '保存成功'
						// });
						if(!this.address.length>0){
							this.$util.showToast({
								title: '请选择省市'
							});
							return
						}
						if(!this.postbox.length>0){
							this.$util.showToast({
								title: '请输入详细地址'
							});
							return
						}
						setTimeout(()=>{
								uni.$emit('address',{
									address:this.address+""+this.postbox,
									economize:this.economize,
									distinguish:this.distinguish,
									jioauk:this.jioauk
								})
						},500)					
						setTimeout(()=>{
								uni.navigateBack()
						},500)
					}
		   //          changeHandler(e) {
		   //              const {
		   //                  columnIndex,
		   //                  value,
		   //                  values, // values为当前变化列的数组内容
		   //                  index,
					// 		// 微信小程序无法将picker实例传出来，只能通过ref操作
		   //                  picker = this.$refs.uPicker
		   //              } = e
		   //              // 当第一列值发生变化时，变化第二列(后一列)对应的选项
		   //              if (columnIndex === 0) {
		   //                  // picker为选择器this实例，变化第二列对应的选项
		   //                  picker.setColumnValues(1, this.columnData[index])
		   //              }
		   //          },
					// // 回调参数为包含columnIndex、value、values
					// confirm(e) {
		   //              console.log('confirm', e)
		   //              this.show = false
					// },
					// btn(){
					// 	uni.navigateTo({
					// 		url:'../newly_increased/newly_increased'
					// 	})
					// }
				}
	}
</script>

<style lang="scss">
	.btn{
		width: 200rpx;
		height: 80rpx;
		margin: 0 auto;
		background-color: rgb(33, 187, 243);
		color: #fff;
		border-radius: 20rpx;
		font-size: 40rpx;
	}
.head{
	width: 702rpx;
	height: 210rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	margin: 24rpx;
	padding: 32rpx;
	box-sizing: border-box;
	input{
		width: 224rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
	}
	.Region{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #222222;
		line-height: 40rpx;
	}
	.province {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
	}
	.xkjs{
		width: 641rpx;
		height: 1rpx;
		background: #E8E8E8;
		border-radius: 2rpx;
		margin: 32rpx 0;
	}
}
</style>
