<template>
	<view class="content">
		<view class="flex align-center index-mian">
			<uni-search-bar placeholder="请输入地址" @service="serviceTrue" @confirm="search" :cancelext="'取消'" v-model="searchValue" @input="input"
			 @clear="clear">
			</uni-search-bar>
			<view class="search-btn" @click="searchBtn" >
				搜索
			</view>
		</view>
		<view class="content-list">
			<view class="content-list-top">
				<view class="list-left">
					<image class="tubiao" src="../../static/orderDetail/dingwei.png" mode=""></image>
					<span>{{adderssData[0].name}}</span>
				</view>
				<view class="list-right" @click="shuaxin">
					<span>重新定位</span>
					<image class="tubiao" src="../../static/shuaxin.png" mode=""></image>
				</view>
			</view>
			<view class="list" @click="activeAdder(item)" v-for="(item,index) in adderssData" :key="index">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				latitude:'43.896819',
				longitude:'125.430478',
				serviceTrue:true,
				searchValue: '',
				address:'https://restapi.amap.com/v3/geocode/regeo',
				gaojiIp:'https://restapi.amap.com/v5/place/text',
				gaojiIp1:'https://restapi.amap.com/v5/ip/location',
				gaojiIp2:'https://restapi.amap.com/v3/geocode/geo',
				Key1:'4f23770b6e53b96e7d0661a7ccfb9c21',
				Key2:'ad684a15ebbb6f5d12c407a3d593c949',
				adderssData:[],
				textAdderss:'',
				current:''
			}
		},
		onLoad(e) {
			var that=this;
			if(e){
				that.textAdderss=e.text
				that.current=e.current
			}
			uni.showLoading({
				title: '加载中...'
			})
			// that.getDingwei()
			uni.getLocation({
				type: 'gcj02',
				geocode: true, //设置该参数为true可直接获取经纬度及城市信息
				highAccuracyExpireTime: 500,
				success: function(res) {
					that.latitude = res.latitude
					that.longitude = res.longitude
					that.getDingwei()
				},
				fail: function(e) {
					console.log("获取信息失败，请重试！",e)
				}
			})
		},
		methods:{
			activeAdder(item){
				if(this.textAdderss=='index'){
					uni.setStorageSync('cityAdderss',item)
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else{
					item.current=this.current
					uni.setStorageSync('cityTherapist',item)
					uni.switchTab({
						url:'/pages/therapist/therapist'
					})
				}
			},
			shuaxin(){
				this.getDingwei()
			},
			getDingwei(){
				var that=this;
				let longitude = that.longitude;
				let latitude = that.latitude;
				let amapKey = that.Key2; // 替换为你的高德地图API Key
				let url = `https://restapi.amap.com/v3/geocode/regeo?key=${amapKey}&location=${longitude},${latitude}&radius=3000`;
				uni.request({
				  url: url,
				  success: (response) => {
					  uni.hideLoading();
				    if(response.data && response.data.regeocode) {
				      let address = response.data.regeocode.formatted_address;
					  let province = response.data.regeocode.addressComponent.province;
					  let city = response.data.regeocode.addressComponent.city;
				      let district = response.data.regeocode.addressComponent.district;
				      let township = response.data.regeocode.addressComponent.township;
					  let latadd = address.replace(province,'').replace(city,'').replace(district,'').replace(township,'')
					  that.getAdderrs(latadd,city)
				      // 此处可以将地址设置到页面数据中，或者进行其他操作
				    } else {
						uni.hideLoading();
						uni.showToast({
							icon:'error',
							title:'逆地理编码失败'
						})
				      console.log('逆地理编码失败', response.data);
				    }
				  },
				  fail: (error) => {
					  uni.hideLoading();
					  uni.showToast({
					  	icon:'error',
					  	title:'网络请求失败'
					  })
				    console.log('网络请求失败', error);
				  }
				});
			},
			input(res) {//搜索 输入框
				this.searchValue=res;
			},
			searchBtn(){//搜索按钮
				this.getDingwei()
			},
			getAdderrs(latadd,city){
				var that=this;
				var dizhi={
					key:that.Key2,
					keywords:that.searchValue!=''?that.searchValue:latadd,
					// types:'120000',
					region:city,
					city_limit:true,
					show_fields: "name,address",
				}
				uni.request({
					url:that.gaojiIp,
					data:dizhi,
					method:'GET',
					success(res) {
						if (res.statusCode ==200) {
							console.log("获取城市名称成功", res.data.pois)
							that.adderssData=res.data.pois
						} else {
							console.log("获取信息失败，请重试！")
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.list-left,.list-right{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.list-left span{
		margin-left: 5px;
	}
	.list-right span{
		margin-right: 5px;
	}
	.tubiao{
		width: 15px;
		height: 18px;
	}
	.content-list-top{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 20px 0px;
	}
	.list{
		width: 100%;
		height: 40px;
		line-height: 40px;
		color: #000;
		font-size: 14px;
		border-bottom: 1px solid #ccc;
	}
	.content-list{
		width: 95%;
		margin: 0 auto;
	}
	/deep/.uni-searchbar__cancel{
		display: none;
	}
	.search-btn{
		text-align: center;
		line-height: 31px;
		color: #fff;
		width: 130rpx !important;
		height: 32px !important;
		margin-right: 20rpx;
		border-radius: 50rpx !important;
		background: linear-gradient(90deg, #019c88, #2fbf93)!important;
	}
	.index-line{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	/deep/.uni-searchbar__box-icon-search,.search-btn{
		height: 60rpx;
		background: #18A689;
		border-radius: 31rpx;
		
	}
	/deep/.uni-searchbar__box{
		height: 32px;
		border-radius: 15px !important;
		background-color: #fff !important;
		border: 1rpx solid #019c88;
		padding: 0px;
		display: flex;
		flex-direction: row;
		flex-flow: row-reverse;
		position: relative;
		justify-content: center;
	}
	/deep/.uni-searchbar{
		width:80%;
		border-radius: 31rpx;
		margin-left: 6rpx;
	}
	.index-mian-select image{
		width: 16px;
		height: 8px;
		margin-left: 5px;
	}
	.index-mian-select{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.index-mian{
		width: 98%;
		margin: 4rpx auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.content{
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}
</style>