<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>
</template>

<script>
	export default{
		data(){
			return{
				latitude:'43.812042',
				longitude:'125.438430',
				serviceTrue:true,
				searchValue: '中意国际',
				address:'https://restapi.amap.com/v3/geocode/regeo',
				gaojiIp:'https://restapi.amap.com/v5/place/text'
			}
		},
		onLoad() {
			var that=this;
			that.getAdderrs()
			uni.getLocation({
				type: 'wgs84',
				geocode: true, //设置该参数为true可直接获取经纬度及城市信息
				success: function(res) {
					console.log(res, '地理位置')
					// that.latitude = res.latitude
					// that.longitude = res.longitude
						
					// that.getAdderrs()
			
				},
				fail: function(e) {
					console.log("获取信息失败，请重试！",e)
				}
			})
		},
		methods:{
			input(res) {//搜索 输入框
				this.searchValue=res;
			},
			searchBtn(){//搜索按钮
				this.getAdderrs()
			},
			getAdderrs(){
				var that=this;
				// var dizhi={
				// 	keyword:that.searchValue,
				// 	key:'4f23770b6e53b96e7d0661a7ccfb9c21',
				// 	location:that.longitude+','+that.latitude,
				// 	radius:'1000',
				// 	extensions:'all',
				// 	output:'JSON'
				// }
				var dizhi={
					keywords:that.searchValue,
					key:'4f23770b6e53b96e7d0661a7ccfb9c21',
					location:that.longitude+','+that.latitude,
				}
				uni.request({
					url:that.gaojiIp,
					data:dizhi,
					method:'GET',
					success(rea) {
						console.log("获取城市名称成功", rea)
						if (rea.statusCode ==200) {
							// that.city = rea.data.regeocode.addressComponent.township;
							// uni.setStorageSync('citySou',rea.data.regeocode.addressComponent.city)
						} else {
							console.log("获取信息失败，请重试！")
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	
	/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;
	}
</style>