<template>
	<view class="" style="background-color: #fff;">
		<u-sticky customNavHeight="0">
			<view class="head_top">
				<u-tabs :list="tabsList" itemStyle="font-size: 32rpx;height: 74rpx;" :current="current"
					@change="changeCurrent" lineColor="#FF6D20" lineWidth="105rpx" height="7rpx"></u-tabs>
				</u-tabs>
			</view>
		</u-sticky>
		<view style="background-color: #f4f4f4;height: 30rpx;"></view>
		<view class="address-box" v-if="current==0" style="padding: 0;">
			<map style="width: 750rpx;height: 750rpx;" :longitude="longitude" :latitude="latitude" :markers="[markers]"
				show-location @tap="handleMapTap"></map>
			<view class="head_item" style="padding: 10rpx 20rpx;">
				<view class="re-location">
					<view style="width: 120rpx;"><text class="text">当前位置: </text></view>
					<view style="flex: 1;">
						<text
							class="text">{{locationInfo.formatted_addresses?locationInfo.formatted_addresses.recommend:locationInfo.address}}</text>
					</view>
				</view>
				<view class="re-btn" @click="reGetLocation">
					<image class="re-address-img" src="@/static/cloud_warehouse/dw.png"></image><text
						class="text">重新定位</text>
				</view>
			</view>
			<u-button text="确认" @click="submitAddress"></u-button>
		</view>
		<view class="address-box" v-if="current==1">
			<view class="head_item_tips">
				<view><text class="text">泸州区县</text></view>
			</view>
			<view class="area">
				<view class="area-item" :class="{'area-item-on': item.code==area_change}"
					v-for="(item, index) in areaList" :key="index" @click="changeArea(item)">
					<text class="text">{{item.name}}</text>
				</view>
			</view>
			<view class="head_item_tips">
				<view><text class="text">选择街道/镇</text></view>
			</view>
			<view class="street">
				<view class="letter-item" v-for="key in mapKey" :key="key">
					<view class="letter"><text class="text">{{key}}</text></view>
					<view class="item-box">
						<view class="street-item" v-for="item in mapList[key]" :key="item.code"
							@click="changeStreet(item)">
							<text class="text">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGeocoder,
		merClassifly,
		getProductslist
	} from '@/api/store.js';
	import {
		getArea,
		getStreet
	} from "@/api/article.js";
	import {
		Toast
	} from '@/libs/uniApi';
	import {
		wgsToGcj
	} from "@/utils/wgs.js";
	export default {
		data() {
			return {
				tabsList: [{
					name: '地图定位',
				}, {
					name: '泸州区县',
				}],
				current: 0,
				latitude: '28.87',
				longitude: '105.44',
				markers: {
					id: 1,
					longitude: '28.87',
					latitude: '105.44',
					iconPath: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/cbbd5202311241523412538.png',
					width: 28,
					height: 28
				},
				locationInfo: {},
				town: '',
				street_id: '',
				street: '',
				areaList: [],
				streetList: [],
				mapList: {},
				area_change: '',
				street_change: '',
			}
		},
		onLoad(options) {
			this.getLoaction();
			this.loadArea();
		},
		onShow() {},
		computed: {
			mapKey() {
				return Object.keys(this.mapList).sort()
			}
		},
		methods: {
			changeCurrent(e) {
				this.current = e.index;
			},
			getLoaction() {
				this.street = '定位中'
				this.locationInfo = {};
				this.locationInfo.formatted_addresses = {};
				this.locationInfo.formatted_addresses.recommend = '定位中'
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						// res = wgsToGcj(res);
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						this.latitude = res.latitude.toFixed(6);
						this.longitude = res.longitude.toFixed(6);
						this.$store.commit('setLocation', {
							lat: res.latitude.toFixed(6),
							long: res.longitude.toFixed(6),
						});
						getGeocoder({
							lat: latitude,
							long: longitude
						}).then(res => {
							this.locationInfo = res.data;
							this.town = res.data.address_reference.town.title
							this.street_id = res.data.address_reference.town.id
							this.street = res.data.address_reference.town.title;
						}).catch(err => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
							this.street = '定位失败'
						})
					},
					fail: (err) => {
						console.log('定位失败');
						this.isshow = false
						Toast('定位失败,请检查定位权限是否开启')
						this.street = '定位失败'
						this.locationInfo.formatted_addresses.recommend = '定位失败'

						// uni.showToast({
						// 	title: "获取定位超时",
						// 	icon: 'none',
						// 	duration: 2000
						// });
					}
				});
			},
			reGetLocation() {
				this.getLoaction()
			},
			loadArea() {
				getArea({
					city_code: 510500
				}).then((res) => {
					this.areaList = res.data;
					this.changeArea(this.areaList[0]);
				})
			},
			loadStreet(area_code) {
				this.street_change = '';
				getStreet({
					area_code
				}).then((res) => {
					this.streetList = res.data;
					this.initPinyin();
				})
			},
			initPinyin() {
				this.mapList = {};
				this.streetList.forEach((item) => {
					let str = item.pinyin?.toUpperCase();
					str = str ? str : '#';
					if (this.mapList[str]) {
						this.mapList[str].push(item);
					} else {
						this.mapList[str] = [];
						this.mapList[str].push(item)
					}
				})
			},
			changeArea(item) {
				this.area_change = item.code;
				this.loadStreet(this.area_change);
			},
			// 选择位置
			changeStreet(item) {
				uni.navigateBack({
					success: () => {
						uni.$emit('changeAddress', {
							area: this.area_change,
							street: item
						})
					}
				})
			},
			// 点击地图
			handleMapTap(e) {
				// console.log('点击地图', e);
				// #ifdef H5
				return Toast('H5暂不支持选择坐标');
				// #endif
				let longitude = e.detail.longitude;
				let latitude = e.detail.latitude;
				this.markers.longitude = longitude;
				this.markers.latitude = latitude;
				// console.log('修改成功', this.markers);
				getGeocoder({
					lat: latitude,
					long: longitude
				}).then(res => {
					// console.log(res);
					this.locationInfo = res.data;
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					this.locationInfo = {};
					this.locationInfo.formatted_addresses = {};
					this.locationInfo.formatted_addresses.recommend = '定位失败'
				})
			},
			submitAddress() {
				console.log(this.locationInfo);
				try {
					this.town = this.locationInfo.address_reference.town.title;
					this.street_id = this.locationInfo.address_reference.town.id;
					this.street = this.locationInfo.address_reference.town.title;
					let obj = {
						area: this.locationInfo.ad_info.adcode,
						street: {
							name: this.street,
							code: this.street_id
						},
						latitude: this.latitude,
						longitude: this.longitude
					}
					console.log({
						...obj
					});
					uni.navigateBack({
						success: () => {
							uni.$emit('changeAddress', obj)
						}
					})
				} catch (e) {
					return Toast('地址有误,请重新选择')
				}
			}
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		}
	}
</script>

<style>
	/* page {
    background-color: #fff;
  } */

	.text {
		font-size: 28rpx;
		white-space: normal;
	}

	.head_top {
		background-color: #fff;
		padding: 28rpx;
	}

	.address-box {
		border-radius: 21rpx 21rpx 0rpx 0rpx;
		padding: 30rpx 28rpx;
		width: 750rpx;
	}

	.head_item {
		width: 750rpx;
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 28rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.re-location {
		flex-direction: row;
		flex-wrap: nowrap;
		width: 480rpx;
		align-items: center;
	}

	.re-address-img {
		width: 38.55rpx;
		height: 38.55rpx;
		margin-right: 10rpx;
	}

	.re-btn {
		flex-direction: row;
		padding-left: 10rpx;
		width: 200rpx;
		height: 100rpx;
		align-items: center;
	}

	.head_item_tips {
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #737373;
	}

	.address-list {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		height: 80rpx;
		line-height: 75rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.area {
		flex-direction: row;
		flex-wrap: wrap;
		padding-top: 30rpx;
		justify-content: flex-start;
	}

	.area-item {
		height: 64rpx;
		/* width: 100px; */
		background-color: #fff;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
		border: 2rpx solid #B3B3B3;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #737373;
		margin-bottom: 22rpx;
		margin-right: 22rpx;
	}

	.area-item-on {
		color: #ff6d20;
		border: 2rpx solid #ff6d20;
	}

	.street {
		padding-top: 28rpx;
	}

	.letter-item {
		flex-direction: row;
	}

	.letter {
		margin-right: 28rpx;
		font-size: 25rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		width: 40rpx;
		text-align: center;
		color: #737373;
	}

	.item-box {
		flex: 1;
	}

	.street-item {
		width: 100%;
		padding-bottom: 28rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
</style>