<template>
	<view>
		<u-popup :show="addressShow" @close="cancel">
			<view class="flex warp">
				<view class="warp-left" @click="cancel"> 取消 </view>
				<view class="warp-right" @click="setArea"> 确定 </view>
			</view>
			<picker-view style="height: 500rpx; text-align: center; line-height: 68rpx;" :value="value" @change="bindChange">
				<picker-view-column>
					<view v-for="(item,index) in provinceRes" :key="index">{{item.areaName}}</view> 
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item,index) in cityRes" :key="index">{{item.areaName}}</view> 
				</picker-view-column>
			</picker-view>
		</u-popup>
	</view>
</template>

<script>
	import $http from '@/utils/request.js'
	export default {
		name: "area-picker",
		props: {
			addressShow: {
				type: [Boolean],
				default: false
			},
		},
		data() {
			return {
				value: [0,0],//所选下标
				provinceRes: [],//省
				cityRes: [],//市
			};
		},
		mounted() {
			this.getArea()
		},
		methods: {
			//切换
			bindChange(e){
				if(e.detail.value[0] != this.value[0]){
					this.cityRes = this.provinceRes[e.detail.value[0]].cityList
					this.value = [e.detail.value[0],0]
					return
				}else{
					this.value = e.detail.value
					return
				}
			},
			//确定修改
			setArea() {
				let confirmObj = {
					province: this.provinceRes[this.value[0]].areaName,
					provinceId: this.provinceRes[this.value[0]].areaId,
					city: this.cityRes[this.value[1]].areaName,
					cityId: this.cityRes[this.value[1]].areaId,
					cityShow: `${ this.provinceRes[this.value[0]].areaName } / ${ this.cityRes[this.value[1]].areaName  }`
				}
				this.$emit('confirmAddress', confirmObj)
			},
			getArea() {
				$http.post('/api/v1/mp/admin/area/tree/list', {}).then(res=>{
					res.data.unshift({areaId:null,areaName:'所有地区',cityList:[{areaId:null,areaName:''}]})
					this.provinceRes = res.data
					this.cityRes = res.data[0].cityList
				})
			},
			cancel() {
				this.$emit('cancel')
			},
		},
	}
</script>

<style lang="scss">
	.warp {
		justify-content: space-between;
		padding: 15px;
		
		&-left {
			 color: #909193;
			 font-size: 30rpx;
		}
		&-right {
			 color: #3c9cff;
			 font-size: 30rpx;
		}
	}
</style>
