<template>
	<gui-page :fullPage="true" :isLoading="pageLoading" ref="guiPage" :customHeader="true">
	
		<view slot="gBody" class="gui-flex1 gui-flex gui-columns">
			<!-- 搜索组件 -->
			<view class="gui-city-search gui-bg-gray" id="hSearch">
				<gui-search @clear="search" @inputting="search" placeholder="城市名"></gui-search>
			</view>
			<view class="gui-padding gui-margin-top">
				<text class="gui-h6 gui-block-text gui-primary-color">当前所选 : {{currentCity}}</text>
			</view>
			<!-- 城市列表 -->
			<scroll-view :scroll-y="true" :scroll-into-view="showCityId" :scroll-with-animation="true"
				:style="{height:mainHeight+'px'}">
				<view class="gui-padding" id="pageTop">
					<text class="gui-h6 gui-block-text gui-primary-color" style="padding-bottom:10rpx;">热门城市</text>
					<view class="gui-flex gui-rows gui-wrap " style="padding-bottom:10rpx; padding-right:20rpx;">

						<text class="hotcity-item gui-block-text" v-if="dingweiCity" @tap="chooseCity2" style="background: linear-gradient(to bottom, #90178b, #590b6e);padding: 10rpx 14rpx;
		color: #fff;"><text class=" gui-icons">&#xe61c;</text>{{dingweiCity}}</text>
						<text class="hotcity-item gui-block-text" v-else @tap="onAuthorize" style="background: linear-gradient(to bottom, #90178b, #590b6e);padding: 10rpx 14rpx;
		color: #fff;"><text class=" gui-icons">&#xe61c;</text>点击定位</text>
						<text class="hotcity-item gui-block-text" v-for="(item, index) in hotCities" :key="index"
							:data-cityname="item.name" :data-citycode="item.code" @tap="chooseCity">{{item.name}}</text>
					</view>
					<block v-for="(cities, index) in cityData" :key="index">
						<text class="gui-city-AZ gui-block-text" :id="'gui-city-AZ-'+index">{{index}}</text>
						<text class="city-item gui-block-text gui-border-b" :id="'gui-city-list-'+city.code"
							v-for="(city, cindex) in cities" :key="cindex" :data-cityname="city.name"
							:data-citycode="city.code" @tap="chooseCity">{{city.name}}</text>
					</block>
				</view>
			</scroll-view>
			<view class="gui-city-AZ-right" style="background-color: #eeeeee;color: #848484;">
				<text class="gui-city-AZ-right-item gui-block-text gui-transition-all" v-for="(char, index) in AZ"
					:key="index"
					:class="[rightTapIdx == index ? 'gui-bg-black' : '', rightTapIdx == index ? 'gui-color-white' : '']"
					:data-char="char" :data-idx="index" @tap="changAZ">{{char}}</text>
			</view>
		</view>
	</gui-page>
</template>
<script>
	var graceJS = require('@/GraceUI5/js/grace.js');
	var dataObj = require('@/GraceUI5/data/cityData.js');
	import * as Api from '@/api/page'
	export default {
		data() {
			return {
				// 全屏 loading
				pageLoading: true,
				// 核心区域高度 
				mainHeight: 200,
				cityData: dataObj.cityData,
				AZ: dataObj.AZ,
				currentCity: "",
				hotCities: [{
						code: 450200,
						name: "柳州市"
					},
					{
						code: 450300,
						name: "桂林市"
					},
					{
						code: 450500,
						name: "北海市"
					},
					{
						code: 450700,
						name: "钦州市"
					},
					{
						code: 450800,
						name: "贵港市"
					},
					{
						code: 450900,
						name: "玉林市"
					},
					{
						code: 451000,
						name: "百色市"
					}

				],
				showCityId: '',
				searchTimer: null,
				searchIndex: -1,
				rightTapIdx: -1,
				// 是否授权了定位权限
				isAuthor: true,
				dingweiCity: ''

			}
		},
		onLoad: function() {
			// 计算页面主体高度
			graceJS.getRefs('guiPage', this, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					this.mainHeight = e.height - uni.upx2px(120);
					this.pageLoading = false;
				});
			});

			this.currentCity = uni.getStorageSync('city')

			this.getLocation(res => {
				this.getDWList(res.longitude, res.latitude);
			})
		},
		methods: {
			getDWList(longitude, latitude) {
				const app = this
				app.isLoading = true
				Api.LonandLat({
						longitude,
						latitude
					})
					.then(result => {
						this.dingweiCity = result.data.ads.city
					})
			},
			getLocation(callback) {
				const app = this
				uni.getLocation({
					type: 'wgs84',
					success: callback,
					fail(res) {
						app.$toast('获取定位失败，请点击按钮重新尝试定位')
						app.isAuthor = false
					}
				})
			},
			onAuthorize() {
				const app = this
				// #ifdef MP
				uni.openSetting({
					success(res) {
						if (res.authSetting['scope.userLocation']) {
							app.isAuthor = true
							setTimeout(() => {
								// 获取用户坐标
								app.getLocation((res) => {
									app.getDWList(res.longitude, res.latitude);
								})
							}, 1000)
						}
					}
				})
				// #endif
				// #ifdef H5
				// 获取用户坐标
				app.getLocation((res) => {
					app.getDWList(res.longitude, res.latitude);
				})
				// #endif
			},
			fanhui() {
				uni.navigateBack()
			},
			chooseCity2(){
				uni.setStorageSync('city', this.dingweiCity);
				
				uni.setStorageSync('is_locate',1)
				uni.navigateBack()
			},
			// 选择
			chooseCity: function(e) {
				// 数据保存在 cityname 和 citycode
				var cityname = e.currentTarget.dataset.cityname;
				var citycode = e.currentTarget.dataset.citycode;
				// uni.showToast({
				// 	title: cityname + " [ " + citycode + " ]",
				// 	icon: "none"
				// });
				
				
				this.currentCity = cityname;
				uni.setStorageSync('city', cityname);
				uni.setStorageSync('is_locate',1)
				
				uni.navigateBack();
			},
			// 搜索
			search: function(k) {
				k = k.toLowerCase();
				if (k == '') {
					this.showCityId = 'pageTop';
					return;
				}
				if (this.searchTimer != null) {
					clearTimeout(this.searchTimer);
				}
				this.searchTimer = setTimeout(() => {
					this.searchBase(k);
				}, 500);
			},
			searchBase: function(k) {
				this.searchIndex = -1;
				for (var i in this.cityData) {
					for (var ii = 0; ii < this.cityData[i].length; ii++) {
						if (this.cityData[i][ii].name.indexOf(k) == 0 || this.cityData[i][ii].pinyin.indexOf(k) == 0) {
							this.searchIndex = this.cityData[i][ii].code;
							break;
						}
					}
					if (this.searchIndex != -1) {
						break;
					}
				}
				if (this.searchIndex != -1) {
					this.showCityId = 'gui-city-list-' + this.searchIndex;
				}
			},
			// 点击切换
			changAZ: function(e) {
				this.rightTapIdx = -1;
				var char = e.currentTarget.dataset.char;
				this.showCityId = 'gui-city-AZ-' + char;
				this.rightTapIdx = e.currentTarget.dataset.idx;
				setTimeout(() => {
					this.rightTapIdx = -1;
				}, 2000);
			}
		}
	}
</script>
<style>
	.gui-h6 {
		line-height: 66rpx;
	}

	.gui-city-search {
		padding: 20rpx;
	}

	.gui-city-AZ {
		font-weight: 700;
		line-height: 88rpx;
		font-size: 30rpx;
	}

	.gui-city-AZ-right {
		width: 50rpx;
		position: fixed;
		right: 0;
		top: 80px;
	}

	/* #ifdef H5 */
	.gui-city-AZ-right {
		top: 110px;
	}

	/* #endif */
	.gui-city-AZ-right-item {
		line-height: 38rpx;
		height: 38rpx;
		width: 38rpx;
		border-radius: 40rpx;
		font-size: 22rpx;
		text-align: center;
	}

	.hotcity-item {

		/* width: 210rpx; */
		font-size: 26rpx;
		/* height: 70rpx; */
		padding: 10rpx 25rpx;
		/* line-height: 70rpx; */
		border-radius: 30rpx;
		text-align: center;
		overflow: hidden;
		margin: 8rpx 5rpx;
		background-color: #F6F7F8;
	}

	.city-item {
		line-height: 88rpx;
		height: 88rpx;
		font-size: 26rpx;
	}
</style>