<template>
	<view class="address-page">
		<!-- 自定义导航栏 -->
		<custom-navbar title="修改地址" :showBack="true" backgroundColor="#FFFFFF" :show-headle="true"
			headleSrc="/static/images/add_icon.png" @onHeadleClick="addAddress">
		</custom-navbar>

		<!-- 地图容器 -->
		<view class="map-container" :style="'height:' + mapHeight + 'rpx'">
			<map id="map" class="map" :latitude="addressInfo.latitude" :longitude="addressInfo.longitude"
				:show-location="true" :style="'height:' + mapHeight + 'rpx'" @regionchange="onRegionChange"
				@tap="onMapTap">
			</map>
			<!-- 中心点标记 -->
			<view class="center-marker" :style="'top:' + (mapHeight/2) + 'rpx'">
				
				<image src="/static/images/mapCenter.png" class="center-marker-img" mode="widthFix"></image>
			</view>
		</view>

		<!-- 地址信息表单 -->
		<view class="address-form">
			<view class="address-form-cont">
				<!-- 服务地址 -->
				<view class="form-item">
					<text class="label">服务地址</text>
					<view class="input textarea">
						<text class="textarea-text">{{addressInfo.server_address}}</text>
					</view>
					<!-- <image src="/static/images/copy_icon.png" class="copy-icon" @tap="copyAddress"></image> -->

				</view>

				<!-- 门牌号 -->
				<view class="form-item">
					<text class="label">门牌号</text>
					<input type="text" class="input" v-model="addressInfo.house_number" placeholder="如3号楼4单元502"
						placeholder-class="placeholder" />
				</view>

				<!-- 预约人 -->
				<view class="form-item">
					<text class="label">预约人</text>
					<input type="text" class="input" v-model="addressInfo.name" placeholder="请输入预约人姓名"
						placeholder-class="placeholder" />
				</view>

				<!-- 手机号 -->
				<view class="form-item">
					<text class="label">手机号</text>
					<input type="number" class="input" v-model="addressInfo.call_phone" placeholder="请输入手机号"
						placeholder-class="placeholder" maxlength="11" />
				</view>

				<!-- 设为默认地址 -->
				<view class="form-item switch-item">
					<text class="label">设为默认地址</text>
					<switch :checked="addressInfo.is_default == 1" @change="onSwitchChange" color="#E8101E" />
				</view>
				<!-- 顶部图标 -->
				<view class="biao"></view>
				<!-- 保存按钮 -->
				<view class="save-btn" @tap="saveAddress">
					<text class="save-text">保存</text>
				</view>
			</view>
		</view>

		<!-- 获取权限提示匡内容 -->
		<view class="permission" :class="{ transform: isShowPer }">
			<text class="per-tit">美融融plus 对精确定位权限申请说明</text>
			<text class="per-cont">便于您使用该功能获取您附近的手艺人以及店铺下的服务内容。</text>
		</view>

	</view>
</template>

<script>
	import request from '../../utils/request';
	import locationService from '../../utils/locationService';
	import permissionUtils from '../../utils/per'
	import {
		debounce
	} from '@/utils/debounce.js'
	let debounceTimer = null;

	export default {
		data() {
			return {
				// isDisabled: true,
				isShowPer: false,
				mapHeight: 0,
				addressInfo: {
					call_phone: null,
					house_number: null,
					is_default: 2,
					latitude: "",
					longitude: "",
					name: null,
					server_address: null
				},
				mapCtx: '',
				isGetDefault: false,
				isAdd: false,
				markers: []
			}
		},
		onLoad(options) {
			const parsedData = JSON.parse(decodeURIComponent(options.data));
			delete parsedData.userid
			delete parsedData.is_del
			delete parsedData.is_ok
			this.addressInfo = parsedData

			// 获取当前位置
			this.$nextTick(()=>{
				let that = this
				that.getCurrentLocation()
				// 获取视图高度
				let pageHeight = uni.getWindowInfo().safeArea.height;
				this.mapHeight = parseInt(pageHeight) * 2 - 826 -70;
				this.mapCtx = uni.createMapContext('map', this);
				// 绑定事件确定只绑定一次
				this.mapCtx.on('end', this.onRegionChange)
			})

			
		},
		methods: {
			getPlaceAround() {
				let that = this;
				let data;
				if (!that.searchKeyword) {
					data = {
						key: '30b7eb1a1b2f88edc085b9b3ee9a2188',
						location: `${that.addressInfo.longitude},${that.addressInfo.latitude}`,
						page: 1,
						offset: 10
					}
				} else {
					data = {
						key: '30b7eb1a1b2f88edc085b9b3ee9a2188',
						location: `${that.addressInfo.longitude},${that.addressInfo.latitude}`,
						keywords: that.searchKeyword,
						page: 1,
						offset: 10
					}
				}
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'https://restapi.amap.com/v3/place/around',
						method: "GET",
						data: data,
						success(res) {
							that.searchResults = res.data.pois;
						}
					})
				})
			},

			// 显示权限说明弹窗
			showPermissionDialog(title, content) {
				return new Promise((resolve) => {
					uni.showModal({
						title,
						content,
						confirmText: '去开启',
						success(res) {
							resolve(res.confirm);
						}
					});
				});
			},
			getNowLocation(center) {
				let that = this;
				let longitude = '';
				let latitude = '';
				let locationRes = center.split(',');
				that.longitude = locationRes[0];
				that.latitude = locationRes[1];
				that.markers = [{
					latitude: that.latitude,
					longitude: that.longitude,
					iconPath: '/static/images/position_icon_3x.png'
				}]
				// 请求附近地址
				// types: '060000|070000|080000|090000|100000|120000|170000'
				that.getPlaceAround();
			},
			async getCurrentLocation() {
				let that = this
				let permission = '';
				const systemInfo = uni.getSystemInfoSync()
				if (systemInfo.platform === 'ios') {
					permission = 'location'
				} else {
					permission = 'android.permission.ACCESS_FINE_LOCATION'
				}
				const firstRequest = !plus.storage.getItem(`perm_${permission}`);
				if (firstRequest && systemInfo.platform !== 'ios') {
					this.isShowPer = true;
				}
				const {
					granted
				} = await permissionUtils.checkPermission('location', '需要位置权限用于推荐附近服务');
				console.log('granted==============', granted)
				if (granted) {
					if (this.addressInfo.longitude && this.addressInfo.latitude) {
						that.getNowLocation(this.addressInfo.longitude + ',' + this.addressInfo.latitude)
					} else {
						this.getLocation();
					}
					this.isGetDefault = true;
					return;
				} else {
					that.getNowLocation(this.addressInfo.longitude + ',' + this.addressInfo.latitude)
					this.isGetDefault = false;
				}
				this.isShowPer = false;
				// 2. 显示权限说明弹窗
				const confirm = await this.showPermissionDialog(
					'位置权限申请',
					'我们需要位置权限，用于为您推荐附近服务'
				);

				if (!confirm) return;

				// 3. 请求权限
				const result = await permissionUtils.requestPermission('location', '需要位置权限用于推荐附近服务');
				if (result) {
					if (this.isShowPer || plus.storage.getItem(`perm_${permission}_no`)) {
						if (this.addressInfo.longitude && this.addressInfo.latitude) {
							that.getNowLocation(this.addressInfo.longitude + ',' + this.addressInfo.latitude)
						} else {
							this.getLocation();
						}
					} else {
						that.getNowLocation(this.addressInfo.longitude + ',' + this.addressInfo.latitude)
						this.isGetDefault = false;
					}
				} else {
					locationService.openAppSettings();
				}


			},
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						this.addressInfo.latitude = res.latitude
						this.addressInfo.longitude = res.longitude
						this.updateMarkers()
						this.getAddressInfo(res.latitude, res.longitude)
						this.isGetDefault = true;
						this.isShowPer = false;
					},
					fail: () => {
						//  uni.showToast({
						// title: '获取位置失败',
						// icon: 'none'
						//  })
						this.getDefault();
						this.isGetDefault = false;
						this.isShowPer = true;
					}
				})
			},
			updateMarkers() {
				// this.markers = [{
				// 	id: 1,
				// 	latitude: this.addressInfo.latitude,
				// 	longitude: this.addressInfo.longitude,
				// 	width: 32,
				// 	height: 32
				// }]
			},
			// 未授权定位 以默认定位为准
			getDefault() {
				this.addressInfo.latitude = getApp().globalData.addressRes.latitude
				this.addressInfo.longitude = getApp().globalData.addressRes.longitude
				this.updateMarkers()
				this.getAddressInfo(getApp().globalData.addressRes.latitude, getApp().globalData.addressRes.longitude)
			},
			
			onRegionChange(e) {
				// 地图视野变化事件
				// if (e.type === 'end' && e.causedBy === 'drag') {
				//   // 拖动结束时更新地址信息
				//   const mapCtx = uni.createMapContext('map')
				//   mapCtx.getCenterLocation({
				//     success: res => {
				//       this.getAddressInfo(res.latitude, res.longitude)
				//     }
				//   })
				// }
				const systemInfo = uni.getSystemInfoSync()
				if (systemInfo.platform === 'ios') {
					if (e.detail.type === 'end' && e.detail.causedBy === 'drag') {
						// clearTimeout(debounceTimer);
						// debounceTimer = setTimeout(() => {
						//   console.log('防抖处理后的地图更新', e);
						//   // 真正的业务逻辑
						// }, 300); // 300ms 内只执行最后一次
						this.mapCtx.getCenterLocation({
							success: async res => {
								console.log('结果', res)
								// 当前中心经纬度位置
								await this.getAddressInfo(res.latitude, res.longitude, 'onRegionChange')
								this.addressInfo.latitude = res.latitude;
								this.addressInfo.longitude = res.longitude;
								this.updateMarkers();
							}
						})
					}
				} else {
					if (e.type === 'end' && e.causedBy === 'drag') {
						// clearTimeout(debounceTimer);
						// debounceTimer = setTimeout(() => {
						//   console.log('防抖处理后的地图更新', e);
						//   // 真正的业务逻辑
						// }, 300); // 300ms 内只执行最后一次
						this.mapCtx.getCenterLocation({
							success: async res => {
								console.log('结果', res)
								// 当前中心经纬度位置
								await this.getAddressInfo(res.latitude, res.longitude, 'onRegionChange')
								this.addressInfo.latitude = res.latitude;
								this.addressInfo.longitude = res.longitude;
								this.updateMarkers();
							}
						})
					}
				}

			},
			onMapTap(e) {
				if (e.type == 'type') {
					// 点击地图事件
					let that = this;
					that.addressInfo.latitude = e.detail.latitude;
					that.addressInfo.longitude = e.detail.longitude;
					that.updateMarkers()
					that.getAddressInfo(e.detail.latitude, e.detail.longitude, 'onMapTap')
				}
			},
			editAddress(item) {
				console.log('item111111', item)
				let location = item.location.split(',');
				// this.$set(this.addressInfo, 'server_address', item.pname + item.cityname + item.adname + item.address +
				// 	item.name);
				// this.addressInfo.dependency = item.pname + '-' + item.cityname + '-' + item.adname;
				this.$set(this.addressInfo, 'latitude', location[1]);
				this.$set(this.addressInfo, 'longitude', location[0]);
				this.getAddressInfo(location[1], location[0])
				// this.updateMarkers();
			},
			getAddressInfo(latitude, longitude, type) {
				let that = this;
				// 根据经纬度获取地址信息
				// 这里需要接入地图SDK的逆地理编码服务
				// 示例使用固定地址
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/regeo',
						method: "GET",
						data: {
							key: '30b7eb1a1b2f88edc085b9b3ee9a2188',
							location: `${longitude},${latitude}`
						},
						success(res) {
							console.log('======================', type, res.data)
							that.addressInfo.dependency_province = res.data.regeocode.addressComponent.adcode.slice(0, -4) + "0000";
							that.addressInfo.dependency_city = res.data.regeocode.addressComponent.adcode.slice(0, -2) + "00";
							that.addressInfo.dependency_code = res.data.regeocode.addressComponent.adcode;
							that.addressInfo.server_address = res.data.regeocode.formatted_address;
							//地址逆编码特殊情况city=[]，特殊处理
							if(res.data.regeocode.addressComponent.city.length>0){
								that.addressInfo.dependency = res.data.regeocode.addressComponent.province +
									'-' + res.data.regeocode.addressComponent.city + '-' + res.data.regeocode
									.addressComponent.district;
							}else{
								that.addressInfo.dependency = res.data.regeocode.addressComponent.province +
									'-' + res.data.regeocode.addressComponent.province + '-' + res.data.regeocode
									.addressComponent.district;
							}
							
							resolve(res.data)
						}
					})
				})


			},
			copyAddress() {
				uni.setClipboardData({
					data: this.addressInfo.server_address,
					success: () => {
						uni.showToast({
							title: '地址已复制',
							icon: 'none'
						})
					}
				})
			},
			onSwitchChange(e) {
				this.addressInfo.is_default = !e.detail.value ? 2 : 1;
			},
			getPage() {
				// 修改上一页页面信息
				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2];
				prevPage.$vm.getAddressList();
			},
			addAddress() {
				if (!this.isGetDefault) {
					uni.showToast({
						title: '您未授权位置信息，暂无法添加地址！',
						icon: 'none'

					})
					return;
				}

				let center = this.addressInfo.longitude + ',' + this.addressInfo.latitude
				let dependencys = this.addressInfo.dependency.split('-')
				let name = dependencys[dependencys.length - 1]
				let city = {
					name: name,
					center: center
				}
				uni.navigateTo({
					url: `/pages/address/search?city=${encodeURIComponent(JSON.stringify(city))}`
				})
			},
			
			saveAddress: debounce(function() {
				if (this.isAdd) return;
				// 表单验证
				if (!this.addressInfo.server_address) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					})
					return
				}
				if (!this.addressInfo.house_number) {
					uni.showToast({
						title: '请输入门牌号',
						icon: 'none'
					})
					return
				}
				if (!this.addressInfo.name) {
					uni.showToast({
						title: '请输入预约人姓名',
						icon: 'none'
					})
					return
				}
				if (!/^1\d{10}$/.test(this.addressInfo.call_phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				// TODO: 调用保存地址API
				console.log('this.addressInfo', this.addressInfo)
				request.post('/user/editaddress', this.addressInfo).then(res => {
					console.log('添加结果', res)
					if (res.code == 200) {
						this.isAdd = true;
						uni.showToast({
							title: '修改成功',
							duration: 2000,
							success: () => {
								setTimeout(() => {
									this.getPage();
									uni.navigateBack();
								}, 2000)
							}
						})
					} else {
						this.isAdd = false;
					}
				}).catch(err => {
					console.log(err)
					this.isAdd = false;
				})
			}, 500)
		}
	}
</script>

<style lang="less">
	.map-container {
		width: 750rpx;
		height: 500rpx;
		box-sizing: border-box;
		padding: 0; /* 清除默认内边距 */
		  margin: 0; /* 清除默认外边距 */
		position: relative;
		.map {
			width: 750rpx;
			height: 500rpx;
		}
		
		.center-marker {
			position: absolute;
			left: 375rpx;
			transform: translate(-50%);
			width: 42rpx;
			height: 69rpx;
		}
	}

	

	.center-marker-img {
		width: 42rpx;
	}

	.distance {
		color: #FFFFFF;
		font-size: 24rpx;
	}

	.address-form {
		background-color: #FFFFFF;
		padding: 80rpx 24rpx 48rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.address-form-cont {
		position: relative;
	}

	.biao {
		position: absolute;
		width: 80rpx;
		height: 8rpx;
		border-radius: 4rpx;
		background-color: #EEF4FA;
		top: -48rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.form-item {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
	}

	.form-item:last-child {
		border-bottom: 0;
	}

	.label {
		font-size: 28rpx;
		color: #3D3D3D;
		font-weight: 500;
		padding: 24rpx 0;
	}

	.value {
		flex: 1;
		font-size: 28rpx;
		color: #333333;
	}

	.copy-icon {
		width: 32rpx;
		height: 32rpx;
		margin-left: 16rpx;
	}

	.input {
		height: 100rpx;
		width: 568rpx;
		font-size: 24rpx;
		color: #3D3D3D;
		font-weight: 500;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.textarea {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: flex-start;
	}

	.textarea-text {
		font-size: 24rpx;
		color: #3D3D3D;
	}

	.placeholder {
		color: #666666;
		font-weight: 500;
	}

	.switch-item {
		justify-content: space-between;
		margin-top: 12rpx;
	}

	.save-btn {
		width: 630rpx;
		height: 96rpx;
		background-color: #E8101E;
		border-radius: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 100rpx 36rpx 0;
	}

	.save-btn .save-text {
		color: #FFFFFF;
		font-size: 40rpx;
		font-weight: 400;
	}

	.save-btn.disabled {
		background-color: #EEF4FA;
	}

	/* 平台特定样式 */
	/* #ifdef H5 */
	.address-page {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	/* #endif */

	/* #ifdef MP-WEIXIN */
	.map-container {
		/* 微信小程序地图容器样式调整 */
		overflow: hidden;
	}

	/* #endif */

	/* #ifdef APP-PLUS */
	.form-item {
		/* App端表单项样式调整 */
		padding: 0;
	}

	.permission.transform {
		top: 220rpx;
		opacity: 1;
		visibility: visible;
	}

	/* #endif */
</style>