<template>
    <view class="wrapper">
        <view class="itemwrap">
            <text class="title">当前选择城市</text>
            <view class="listwrap">
                <view class="itemlist" @tap="goShopList" :data-id="shopArea[address].area_id" :data-name="address">
                    <view class="itemTitle">{{address}}</view>
                </view>
            </view>
        </view>
        
        <view class="itemwrap">
            <text class="title">当前定位城市</text>
            <view class="listwrap">
                <view class="itemlist" @tap="goShopList" :data-id="shopArea[address].area_id" :data-name="Usercity">
                    <view class="itemTitle">{{Usercity}}</view>
                </view>
            </view>
        </view>
        
        <view class="itemwrap">
            <text class="title">已开通城市</text>
            <view class="listwrap">
                <view class="itemlist" @tap="goShopList" data-id="0" data-name="全部">
                    <view class="itemTitle">全部</view>
                </view>
                <view class="itemlist" v-for="(item, index) in shopArea" :key="index" @tap="goShopList" :data-id="item.area_id" :data-name="item.area_name">
                    <view class="itemTitle">{{item.area_name}}</view>
                </view>
            </view>
        </view>
    </view>
</template>


<script>
	import {apiArr} from '../../api/community.js';



	export default {
		data() {
			return {
				shopArea: [],
				address: '定位中',
				lat: '',
				lng: '',
				qqmap_key: '',
				Usercity: '',
			}
		},
		onLoad(options) {
			this.getHostInfo();
			this.getAddress();
			this.getShopAreaList();
			this.Usercity = uni.getStorageSync('Usercity');
		},
		methods: {
			getHostInfo() {
				uni.request({
					url: apiArr.get_host_info,
					method: 'POST',
					header: {
						'Content-type': 'application/x-www-form-urlencoded'
					},
					success: (result) => {
						let wxapp = result.data.all.wxapp;
						if (wxapp.qqmap_key) {
							this.qqmap_key = wxapp.qqmap_key;
						}
					}
				});
			},
			getAddress() {
				let userlocat = uni.getStorageSync('userlocat');
				let nowtime = Date.parse(new Date()) / 1000;

				if (!userlocat || userlocat.overtime < nowtime || !userlocat.city) {
					uni.showLoading({
						title: '定位中...'
					});
					uni.getLocation({
						success: (res) => {
							let overtime = Date.parse(new Date()) / 1000 + 7200;
							this.lat = res.latitude;
							this.lng = res.longitude;

							if (this.qqmap_key) {
								uni.request({
									url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=${this.qqmap_key}&get_poi=0`,
									success: (res) => {
										let city = res.data.result.address_component.city;
										uni.setStorageSync('city', city);
										
										console.log(res,'asdasd');
										
										if (city) {
											this.address = city;
											let area = this.shopArea;
											if (typeof area[city] !== 'undefined') {
												// setData(this, 'area_id', area[city]['area_id']);
											}
										}
										userlocat = {
											userlat: this.lat,
											userlng: this.lng,
											overtime: overtime,
											city: city
										};
										uni.setStorageSync('userlocat', userlocat);
										uni.hideLoading();
									}
								});
							} else {
								uni.request({
									url: apiArr.get_maps_geocoder,
									success: (res) => {
										let city = res.data.city;
										if (city) {
											this.address = city;
											let area = this.shopArea;
											if (typeof area[city] !== 'undefined') {
												// setData(this, 'area_id', area[city]['area_id']);
											}
										}
										userlocat = {
											userlat: this.lat,
											userlng: this.lng,
											overtime: overtime,
											city: city
										};
										uni.setStorageSync('userlocat', userlocat);
										uni.hideLoading();
									}
								});
							}

							uni.request({
								url: apiArr.setcookie_location,
								method: 'POST',
								header: {
									'Content-type': 'application/x-www-form-urlencoded'
								},
								data: userlocat,
								success: (result) => {
									console.log(result);
								}
							});
						}
					});
				} else {
					let address = uni.getStorageSync('city') || userlocat.city;
					this.address = address;
				}
			},
			getShopAreaList() {
				
				console.log(apiArr.get_community_area_list);
				uni.showLoading({
					title: '加载中...'
				});
				uni.request({
					url: apiArr.get_community_area_list,
					method: 'GET',
					header: {
						'Content-type': 'application/x-www-form-urlencoded'
					},
					success: (result) => {
						console.log(result);
						
						let {
							data: {
								list
							}
						} = result;
						if (list) {
							this.shopArea = list
						}
							
						
					},
					fail(err) {
						console.log(err);
					},
					complete: () => uni.hideLoading()
				});
			},
			goShopList(event) {
				console.log('点全部', event);
				let area_id = event.currentTarget.dataset.id;
				let name = event.currentTarget.dataset.name;
				if (name == '定位中') {
					this.getAddress();
					return;
				}

				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2];
				area_id = area_id || '';

				const userlocat = uni.getStorageSync('userlocat');
				userlocat.city = name;
				console.log(event);
				uni.setStorageSync('userlocat', userlocat);
				uni.setStorageSync('city', name);
				
				// prevPage.setData({
				// 	area_id: area_id,
				// 	address: name
				// });
				this.address = name
				this.area_id = area_id

				uni.navigateBack({
					delta: 1,
					success: (res) => {
						console.log('返回成功', res);
					},
					fail: (err) => {
						console.error('返回失败', err);
					}
				});
			}
		}
	}
</script>

<style>
	.top_nav {
		margin-left: 16px;
		display: flex;
		flex-direction: row;
		margin-top: 24px;
	}

	.nav-name {
		color: #fff;
		font-size: 30rpx;
		width: 16.66%;
		text-align: center;
		line-height: 28px;
		flex-direction: column;
		display: inline-flex;
		height: 60px;
		position: relative;
	}

	/* .nav-hover  {
  font-weight: 600;
  border-bottom: 3px solid #D3BA77;
} */

	.nav-hover::after {
		content: " ";
		width: 30%;
		height: 4px;
		background: #D3BA77;
		position: absolute;
		bottom: 1px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 10px;
	}

	.nav-date {
		width: 16.66%;
		text-align: center;
		line-height: 30px;
		flex-direction: column;
		display: inline-flex;
		justify-items: center;
		align-items: center;
		justify-content: center;
	}

	.nav-date image {
		width: 15px;
		height: 15px;
	}

	.wrapper {
		margin-top: 20px;
		border-radius: 10px 10px 0 0;
	}

	.itemwrap {
		margin-top: 0;
		border-radius: 10px 10px 0 0;
		width: 100%;
		overflow: hidden;
	}

	.itemwrap .title {
		font-size: 14px;
		font-weight: bold;
		margin-left: 15px;
	}

	.itemwrap,
	.listwrap {
		height: auto;
		overflow: hidden;
	}

	.listwrap {
		margin: 10px auto;
		width: 96%;
	}

	.itemlist {
		margin: 5px 1.5%;
		padding: 10px;
		border-radius: 5px;
		width: 30.33%;
		float: left;
		text-align: center;
		background-color: #f1f1f1;
	}

	.itemTitle {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.intro {
		height: 60px;
	}

	.intro-left {
		display: inline-flex;
	}

	.room-img {
		border-radius: 4px;
	}

	.room-intro {
		margin-left: 8px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.room-name {
		font-size: 16px;
	}

	.room-price {
		font-size: 14px;
		margin-top: 5px;
		color: #D3BA77;
	}

	.room-nume {
		font-size: 12px;
		margin-top: 4px;
	}

	.in-free {
		float: right;
		border: 1px solid #6F9473;
		border-radius: 4px;
	}

	.in-use {
		float: right;
		border: 1px solid #DB8259;
		border-radius: 4px;
	}

	.use {
		width: 100%;
		height: 35px;
		border-radius: 3px 3px 0 0;
	}

	.use text {
		line-height: 35px;
		font-size: 16px;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
	}

	.in {
		width: 52px;
		height: 17px;
	}

	.in text {
		line-height: 17px;
		font-size: 10px;
		display: flex;
		justify-content: center;
	}

	.notes {
		margin-top: 18px;
	}

	.color-card {
		display: inline-flex;
	}

	.card-list {
		border-radius: 2px;
		margin: 4px 0 0 24px;
	}

	.color-card text {
		margin-left: 6px;
		font-size: 13px;
	}

	.endtime {
		float: right;
	}

	.endtime text {
		font-size: 13px;
	}

	.timeline {
		display: flex;
		margin-top: 16px;
	}

	.line {
		width: 4.3%
	}

	.line-card {
		border-radius: 2px;
	}

	.line text {
		font-size: 10px;
		margin-top: 4px;
		display: flex;
		justify-content: center;
	}
</style>