<template>
	<view class="search">
		<view class="locat" catchtap="goPagesLink">
			<image class="local_left_icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/location.png"
				mode="" />
			<text class="local_city">{{address}}</text>
			<van-icon name="arrow-down" color="#FF512A " />
		</view>
		<view class='search_bar'>
			<image class="search_icon"
				src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_36.png" mode="" />
			<input class="search_input" placeholder='输入搜索的社区名称' confirm-type='search' @input="searchInput"
				@confirm="searchInput" :value=" selectKeyWord" />
		</view>
	</view>
</template>

<script>

	import { apiArr } from '../../api/community';
	export default {
		data() {
			return {
				qqmap_key: '',
				address: '定位中',
				selectKeyWord: '',
				shopArea: [],
				lat: '',
				lng: '',
				city: {},
			}
		},

		methods: {
			// 网站配置信息
			getHostInfo() {
				// 存在城市信息则取缓存中信息
				if (uni.getStorageSync('city')) {
					this.address = uni.getStorageSync('city');
					return;
				}
				this.qqmap_key = '55NBZ-MUQYW-EAJRL-YIWPA-ZXCR6-4NBPP';
				this.getUserLocation()

				// uni.request({
				// 	url: apiArr.get_host_info,
				// 	method: 'post',
				// 	header: {
				// 		'Content-type': 'application/x-www-form-urlencoded'
				// 	},
				// 	dataType: 'json',
				// 	success: (result) => {
				// 		console.log(result, 'result');
				// 		let wxapp = result.data.all.wxapp;

				// 		if (wxapp) {
				// 			this.qqmap_key = wxapp.qqmap_key;
				// 			this.getUserLocation()
				// 		}
				// 	},
				// })
			},

			getUserLocation() {
				const that = this;
				const { qqmap_key } = this;
				let userlocat = uni.getStorageSync('userlocat');

				uni.getLocation({
					type: 'wgs84',
					success(res) {
						const latitude = res.latitude
						const longitude = res.longitude
						// const speed = res.speed
						// const accuracy = res.accuracy
						uni.request({
							url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude + ',' + res.longitude +
								'&key=' + qqmap_key + '&get_poi=0',
							success: function(res) {
								console.log(res, 'rerrrrr');
								var city = res.data.result.address_component.city;
								if (city) {
									that.address = city;
								}
								userlocat = {
									userlat: latitude,
									userlng: longitude,
									city: city,
								};
								that.city = userlocat;
								uni.setStorageSync('userlocat', userlocat);
								uni.setStorageSync('Usercity', city);
							},
							fail(err) {
								console.log(err);
							}
						})
					}
				})
			},
			
			searchInput(e) {
				this.selectKeyWord = e.detail.value;
				this.$emit('search', { value: e.detail.value});
			},
			
		},
		
		mounted () {
		  console.log('搜索组件 生命周期');
			this.getHostInfo();
		},
	}
</script>

<style>
	@import url('./search.css');
</style>