<template>
	<view class="location">
		<view class="top_search">
			<u-search @change="searchChange" v-model="searchValue" shape="round" @clear="clear" :clearabled="true"
				:showAction="false" placeholder="请输入城市名"></u-search>
			<view
				style="width: 90%;margin: 0 auto; background: #fff;height: 200px; position: absolute;top: 40px;padding: 40rpx;box-shadow: 0pc 0px 10px #ccc;"
				v-show="isShowFont">
				<view @click="fontClick">{{ showFont }}</view>
			</view>
		</view>
		<view class="atAddress">
			<!-- 当前定位 -->
			<text class="atAddress_txt">当前定位</text>
			<view class="atAddress_city">
				<view>
					<image style="width: 30rpx;height: 38rpx;" src="../../static/dw2x.png" mode=""></image>
				</view>
				<view style="margin-left: 15rpx;"><text>{{ address }}</text></view>
				<view class="atAddress_regain" style="margin-left: 27rpx;" @click="anewGain">重新获取...</view>
			</view>
			<!-- 推荐城市 -->
			<view class="recommend_city">
				<text class="atAddress_txt">推荐城市</text>
				<view class="city_con">
					<view class="city_item" @click="getAddressCon('1')">
						<text>德州市</text>
					</view>
					<view class="city_item" @click="getAddressCon('2')">
						<text>东营市</text>
					</view>
					<view class="city_item" @click="getAddressCon('3')">
						<text>济南市</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否显示下拉的框
				isShowFont: false,
				// 显示什么字
				showFont: '',
				// 接收缓存地址  赋值
				address: '',
				searchValue: '',
			}
		},
		onLoad() {
			this.address = uni.getStorageSync('location')
		},
		methods: {
			searchChange(value) {
				if (value == '德' || value == '德州' || value == '东' || value == '东营' || value == '济' || value == '济南' ||
					value == '东营市' || value == '德州市' || value == '济南市') {
					this.isShowFont = true
					if (value == '德' || value == '德州' || value == '德州市') {
						this.showFont = '德州市'
					} else if (value == '东' || value == '东营' || value == '东营市') {
						this.showFont = '东营市'
					} else if (value == '济' || value == '济南' || value == '济南市') {
						this.showFont = '济南市'
					}
				} else {
					this.isShowFont = false
				}
			},
			fontClick() {
				uni.setStorageSync('location', this.showFont)
				this.isShowFont = false
				this.address = uni.getStorageSync('location')
			},
			getAddressCon(value) {
				if (value == '1') {
					uni.setStorageSync('location', '德州市')
					uni.setStorageSync("region", 1)
					this.address = '德州市'
					uni.navigateBack({
						delta: 1
					})
				} else if (value == '2') {
					uni.setStorageSync('location', '东营市')
					uni.setStorageSync("region", 2)
					this.address = '东营市'
					uni.navigateBack({
						delta: 1
					})
				} else if (value == '3') {
					uni.setStorageSync('location', '济南市')
					uni.setStorageSync("region", 3)
					this.address = '济南市'
					uni.navigateBack({
						delta: 1
					})
				}
			},
			clear() {
				this.searchValue = ''
			},
			// 重新获取城市
			anewGain() {
				this.getAddress()
			},
			//获取当前位置
			getAddress() {
				//vm ===  vue实例对象
				let vm = this;
				uni.getLocation({
					type: 'wgs84',
					//成功
					success: (res) => {
						// 逆地址解析  转市
						let location = res.latitude + ',' + res.longitude
						//调用逆解析接口
						uni.request({
							url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=location', //腾讯官方逆解析接口，可直接复制
							data: {
								location: location,
								'key': "Q4DBZ-UIMC2-B63UX-CUZ6A-S3UT7-TBF3V", //自己申请的Key
							},
							method: "GET",
							success(res) {
								console.log(res)
								uni.setStorageSync('location', res.data.result.address_component.city)
							},
							fail: res => {
								console.log(res.errMsg, '解析失败返回的错误信息');
							}
						})
					},
					//失败
					fail: (res) => {
						// console.log('fail' + JSON.stringify(res))
						uni.showToast({
							icon: 'none',
							title: '获取地址失败,请打开定位',
						})
					}
				})
			},
		}
	}
</script>
<style lang="scss">
	.location {
		margin-top: 20rpx;

		.top_search {
			position: relative;
			width: 90%;
			margin: 0 auto;
			margin-bottom: 40rpx;

			.u-search {
				margin-top: 10px;
			}

			.u-icon__icon {
				font-size: 26px !important;
			}

			.u-search__content {
				height: 35px;
			}

			.u-search__content__input,
			.u-search__content {
				background: rgb(247, 249, 248) !important;
				border-radius: 34px !important;

				input::placeholder {
					font-size: 20rpx !important;
				}
			}
		}

		.atAddress {
			width: 90%;
			margin: 0 auto;
			margin-bottom: 43rpx;

			.atAddress_txt {
				font-size: 28rpx;
				color: rgb(51, 51, 51);
				font-family: "微软雅黑";
				font-weight: 900;
			}

			.atAddress_city {
				display: flex;
				align-items: center;
				margin-top: 36rpx;

				text {
					font-family: "微软雅黑";
					font-weight: 900;
					font-size: 30rpx;
				}

				.atAddress_regain {
					height: 14px;
					font-size: 24rpx;
					color: rgb(93, 204, 227);
				}
			}

			.recommend_city {
				margin-top: 62rpx;

				.city_con {
					display: flex;
					align-items: center;
					margin-top: 32rpx;
					justify-content: space-around;

					.city_item {
						width: 178rpx;
						height: 68rpx;
						background-color: rgb(246, 246, 246);
						border-radius: 34rpx;
						text-align: center;
						line-height: 70rpx;
						font-size: 24rpx;

						text {
							color: #999;
						}
					}
				}
			}
		}

		.city_list {
			.province_txt {
				width: 100%;
				background-color: rgb(246, 246, 246);
				color: rgb(102, 102, 102);
				font-size: 24rpx;
				height: 40rpx;
				line-height: 40rpx;
			}

			.city_txt {
				font-size: 28rpx;
				color: rgb(51, 51, 51);
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #F6F6F6;
			}
		}
	}
</style>
