<template>
	<view class="wrapper" v-show="isShowMask">
		<transition name="content">
			<view class="content_view" v-show="isShow">
				<view class="title_view">
					<view class="title">请选择所在地区</view>
					<view class="close_view" @tap="hidden">
						<icon class="close_icon" :type="'clear'" size="26"/>
					</view>
				</view>
				<view class="select_top">
					<view class="select_top_item" ref="select_top_item" v-for="(item,index) in dataList" :key="index" @tap="select_top_item_click(index)">
						<text class="address_value">{{item}}</text>
					</view>
					<view class="indicator" :style="{ left: indicatorStyleLeft + 'px' }" ref="indicator"></view>
				</view>
				<swiper class="swiper" :current="currentIndex" @change="swiperChange">
					<swiper-item v-for="(swiper_item,swiper_index) in dataList" :key="swiper_index">
						<view class="swiper-item">
							<scroll-view class="scroll-view-item" scroll-y="true">
								<view class="address_item" v-for="(item,index) in cityAreaArray[swiper_index]" :key="index" @tap="address_item_click(swiper_index,index)">
									<image v-if="selectIndexArr[swiper_index] === index" class="address_item_icon" :src="$wanlshop.appstc('/common/img_gou3x.png')" mode=""></image>
									{{item.name}}
								</view>
							</scroll-view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</transition>
		<view class="mask" @tap="hidden" v-show="isShowMask"></view>
	</view>
</template>

<script>
	export default {
		name: 'WanlAddress',
		data() {
			return {
				isShow: false,
				isShowMask: false,
				dataList: ['请选择'],
				currentIndex: 0,
				cityData: {},
				cityAreaArray: [],
				selectIndexArr: [],
				indicatorStyleLeft: 16
			};
		},
		created() {
			uni.request({
			    url: '/wanlshop/common/area',
			    success: (res) => {
					if(res.data.length > 0){
						this.cityData = res.data
						this.cityAreaArray.push(res.data)
					}else{
						this.$wanlshop.msg('数据表area为空，请在后台安装示例插件')
					}
			    }
			});
		},
		mounted() {
			// this.changeIndicator(0)
		},
		methods:{
			show(){
				this.isShow = true
				this.isShowMask = true
			},
			hidden() {
				this.isShow = false
				this.isShowMask = false
			},
			select_top_item_click(index) {
				this.currentIndex = index
				
				this.changeIndicator(index)
				
			},
			swiperChange(event){
				let index = event.detail.current
				this.currentIndex = index
				this.changeIndicator(index)
			},
			changeIndicator(index){
			   let indicatorWidth = 30
			   const query = uni.createSelectorQuery().in(this);
			   let arr = query.selectAll('.select_top_item .address_value')
			   arr.fields({
			     size: true,
			     scrollOffset: false
			   }, data => {

				 let itemCenterX = 10 + index * 80 + data[index]["width"] / 2
				 let left = itemCenterX - indicatorWidth / 2

				 this.indicatorStyleLeft = left
			   }).exec();
		
			   
			},
			address_item_click(swiper_index,index){
				this.selectIndexArr.splice(swiper_index, 5,index)
				
				//判断当前是否为最下一级
				if (swiper_index === 0){//第一级
				
					let currentObj = this.cityData[index]
					let city = currentObj.name
					this.dataList.splice(swiper_index,5,city)
					this.dataList.splice(swiper_index + 1,0,'请选择')
					this.cityAreaArray.splice(swiper_index + 1, 1,currentObj["city"])
					// console.log(this.dataList)
					setTimeout(() => {
						this.currentIndex = 1
						this.changeIndicator(1)
						}, 50);
					
		
				}else {
					let currentAreaArray = this.cityAreaArray[swiper_index]
					let currentObj = currentAreaArray[index]
					let area = currentObj["area"]
					// console.log(currentAreaArray)
					if (area !== undefined){
						
						let city = currentObj.name
			
						this.dataList.splice(swiper_index,5,city)
						this.dataList.splice(swiper_index + 1,0,'请选择')
						this.cityAreaArray.splice(swiper_index + 1,1,currentObj["area"])
						
						setTimeout(() => {
							this.currentIndex = swiper_index + 1
							this.changeIndicator(swiper_index + 1)
							}, 50);
					}else{//是最下一级
						let city = currentObj.name;
						this.dataList.splice(swiper_index,1,city);
						uni.request({
						    url: 'https://restapi.amap.com/v3/geocode/geo',
						    data: {
						        address: this.dataList.join(''),
								key: this.$wanlshop.config('amapkey')
						    },
						    success: res => {
								let geocodes = [];
								// 1.1.7升级
								if(res.data.infocode == 10001){
									geocodes.country = '中国'; // 国家
									geocodes.province = this.dataList[0];
									geocodes.city = this.dataList[1];
									geocodes.district = currentObj.name;
									geocodes.citycode = currentObj.code; // 城市代码
									geocodes.adcode = currentObj.zip; // 地区代码
									geocodes.formatted_address = this.dataList.join('');
								}else{
									if(geocodes.province === '台湾省'){
										geocodes.province = this.dataList[0];
										geocodes.city = this.dataList[1];
										geocodes.district = currentObj.name;
										geocodes.formatted_address = this.dataList.join('');
									}else{
										geocodes = res.data.geocodes[0];
									}
								}
								this.$emit("selectAddress", geocodes);
								this.isShow = false;
								this.isShowMask = false;
						    }
						});
					}
					
				}
				
			}
		}
	}
</script>

<style lang="scss">
// 不换行
@mixin no-wrap(){
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.wrapper{
	z-index: 9990;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	.content_view{
		z-index: 9991;
		background: white;
		position: absolute;
		height: 80%;
		left: 0;
		bottom: 0;
		right: 0;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		.title_view{
			height: 8%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 $uni-spacing-row-sm;
			.title{
				font-size: uni-font-size-sm;
			}
			.close_view{
				height: 40rpx;
				width: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.select_top{
			height: 8%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 20rpx 20rpx 20rpx;
			position: relative;
			box-sizing: border-box;
			.select_top_item{
				width: 160rpx;
				font-size: 28rpx;
				@include no-wrap();
			}
			.indicator{
				position: absolute;
				width: 60rpx;
				height: 4rpx;
				background: $uni-color-error;
				left: 32rpx;
				bottom: 0;
				transition: left 0.5s ease;
			}
		}
		.swiper{
			height: 80%;
			position: relative;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			.swiper-item{
				height: 100%;
				.scroll-view-item{
					height: 100%;
					padding: 0 20rpx;
					.address_item{
						padding: 10rpx 0;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						.address_item_icon{
							width: 40rpx;
							height: 40rpx;
							margin-right: 20rpx;
						}
					}
				}
			}
		}
	}
	.mask{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0,0,0,.2);
	}
}

.content-enter{
  transform: translateY(100%);
}
.content-enter-to{
  transform: translateY(0%);
}
.content-enter-active{
  transition: transform 0.5s;
}
.content-leave{
  transform: translateY(0%);
}
.content-leave-to{
  transform: translateY(100%);
}
.content-leave-active{
  transition: transform 0.5s;
}

</style>
