<template>
	<view class="wrapper" v-show="isShowMask">
		<view class="content_view" v-show="isShow">
			<view class="title_view">
				<view class="title">請選擇所在地區</view>
				<view class="close_view" @tap="hidden">
					<text class="wlIcon wlIcon-31guanbi close_icon"></text>
				</view>
			</view>
			<view class="select_top">
				<view class="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' }"></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)">
								<text v-if="selectIndexArr[swiper_index] === index" class="address_item_icon">✓</text>
								{{ item.name }}
							</view>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="mask" @tap="hidden" v-show="isShowMask"></view>
	</view>
</template>

<script>
import { get } from '@/core/http/http-client'
import { buildRestPath } from '@/core/config/api-paths'
import appSettings from '@/core/config/app-settings'

export default {
	name: 'AddressPicker',
	data() {
		return {
			isShow: false,
			isShowMask: false,
			dataList: ['請選擇'],
			currentIndex: 0,
			cityData: {},
			cityAreaArray: [],
			selectIndexArr: [],
			indicatorStyleLeft: 16
		}
	},
	created() {
		this.loadAreaData()
	},
	methods: {
		async loadAreaData() {
			try {
				const { data } = await get(buildRestPath('common/area'))
				if (data && data.length > 0) {
					this.cityData = data
					this.cityAreaArray = [data]
				} else {
					uni.showToast({ title: '地區數據為空', icon: 'none' })
				}
			} catch (e) {
				uni.showToast({ title: '加載地區數據失敗', icon: 'none' })
			}
		},
		show() {
			this.isShow = true
			this.isShowMask = true
		},
		hidden() {
			this.isShow = false
			this.isShowMask = false
		},
		select_top_item_click(index) {
			this.currentIndex = index
		},
		swiperChange(event) {
			this.currentIndex = event.detail.current
		},
		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'])
				setTimeout(() => {
					this.currentIndex = 1
				}, 50)
			} else {
				let currentAreaArray = this.cityAreaArray[swiper_index]
				let currentObj = currentAreaArray[index]
				let area = currentObj['area']
				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
					}, 50)
				} else {
					let city = currentObj.name
					this.dataList.splice(swiper_index, 1, city)
					let geocodes = {
						country: '',
						province: this.dataList[0] || '',
						city: this.dataList[1] || '',
						district: currentObj.name,
						citycode: currentObj.code || '',
						adcode: currentObj.zip || '',
						formatted_address: this.dataList.join(''),
						location: ''
					}
					let amapkey = appSettings.amapkey
					if (amapkey) {
						uni.request({
							url: 'https://restapi.amap.com/v3/geocode/geo',
							data: {
								address: this.dataList.join(''),
								key: amapkey
							},
							success: res => {
								if (res.data && res.data.geocodes && res.data.geocodes.length > 0) {
									let geo = res.data.geocodes[0]
									geocodes.country = geo.country || ''
									geocodes.province = geo.province || geocodes.province
									geocodes.city = geo.city || geocodes.city
									geocodes.district = geo.district || geocodes.district
									geocodes.citycode = geo.citycode || geocodes.citycode
									geocodes.adcode = geo.adcode || geocodes.adcode
									geocodes.formatted_address = geo.formatted_address || geocodes.formatted_address
									geocodes.location = geo.location || ''
								}
								this.$emit('selectAddress', geocodes)
								this.isShow = false
								this.isShowMask = false
							},
							fail: () => {
								this.$emit('selectAddress', geocodes)
								this.isShow = false
								this.isShowMask = false
							}
						})
					} else {
						this.$emit('selectAddress', geocodes)
						this.isShow = false
						this.isShowMask = false
					}
				}
			}
		}
	}
}
</script>

<style scoped>
.wrapper {
	z-index: 9990;
	position: fixed;
	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 20rpx;
}
.title_view .title {
	font-size: 28rpx;
	font-weight: 600;
}
.close_view {
	height: 60rpx;
	width: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.close_icon {
	font-size: 40rpx;
	color: #999;
}
.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;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.indicator {
	position: absolute;
	width: 60rpx;
	height: 4rpx;
	background: #ff6b35;
	left: 32rpx;
	bottom: 0;
	transition: left 0.3s ease;
}
.swiper {
	height: 80%;
}
.swiper-item {
	height: 100%;
}
.scroll-view-item {
	height: 100%;
	padding: 0 20rpx;
}
.address_item {
	padding: 20rpx 0;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #f5f5f5;
}
.address_item_icon {
	color: #ff6b35;
	margin-right: 16rpx;
	font-size: 32rpx;
	font-weight: bold;
}
.mask {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9990;
}
</style>