<template>
	<view class="t-index-address">
		<scroll-view class="t-index-address__scroll-view" :scroll-into-view="scrollview" :scroll-y="true" :enable-flex="true">
			<div class="keyw">
				<span class="lico iconfont">&#xe661;</span>
				<input v-model="keyword" @input="Suggestion" placeholder="城市、地址关键字" class="inp"/>
				<div class="sugs_list" v-if="sugs.length">
					<div class="sugs_item" v-for="(i,s) in sugs" :key="s" @click="onsug(i)">
						<div class="tit">{{ i.title }}</div>
						<div class="address ellipsis">{{ i.province }} - {{ i.city }}</div>
					</div>
				</div>
			</div>
			<template v-if="!sugs.length">
				<div class="city_hot">
					<div class="tit_hot">热门城市</div>
					<div class="city_box">
						<div class="hot_item" v-for="(i,s) in hotCitys" :key="s" @click="$emit('select', i)">{{ i.cityName }}</div>
					</div>
				</div>
				<view :id="group.initials" v-for="group in cityList" :key="group.initials">
					<view class="t-index-address__anchor">
						<text>{{ group.initials }}</text>
					</view>
					<view class="t-index-address__list">
						<view class="t-index-address__cell" v-for="(city, index) in group.list" :key="index" @click="$emit('select', city)">
							<text>{{ city.cityName }}</text>
						</view>
					</view>
				</view>
			</template>
		</scroll-view>
		<template v-if="!sugs.length">
			<view class="t-index-address__sidebar">
				<view class="t-index-address__index" v-for="group in cityList" :key="group.initials" @touchstart.stop.prevent="onTouchMove(group.initials)" @touchend.stop.prevent="onTouchStop" @touchcancel.stop.prevent="onTouchStop">
					<span>{{ group.initials }}</span>
				</view>
			</view>
			<view class="t-index-address__alert" v-if="touchmove">
				<text>{{ activeIndex }}</text>
			</view>
		</template>
	</view>
</template>
<script>
import {similar} from '@/pagesB/static/js/similar.js';
import QQMapWX from '@/pagesB/static/js/qqmap-wx-jssdk.min.js';
const showmap = new QQMapWX({ key: 'K7LBZ-RE23Q-JEN5D-4ZNEI-MS54Q-BHF6D' });
import { post } from "@/request/api.js";

export default {
	data() {
		return {
			keyword: "",
			sugs: [], //关键词结果，城市列表
			sugone: {},
			iscity: false,

			scrollview: "A",
			hotCitys: [],
			cityList: [],
			activeIndex: "A",
			touchmove: false,
		};
	},
	watch: {
		activeIndex(value) {
			this.scrollview = value;
		},
	},
	methods: {
		initCityList() {
			post("local/hotel/hotCity").then(res => {
				if (res.code == 0) {
					this.hotCitys = res.data;
				}
			})
			post("local/hotel/cityList").then(res => {
				if (res.code == 0) {
					let json = [];
					for (const k in res.data) {
						json.push(res.data[k])
					}
					this.cityList = json;
				}
			})
		},
		onTouchMove(index) {
			this.activeIndex = index;
			this.touchmove = true;
		},
		onTouchStop() {
			this.touchmove = false;
		},
		Suggestion(va){
			let that = this;
			if (!va.detail.value.length)  this.sugs = [];
			showmap.getSuggestion({
				keyword: that.keyword,
				success(res){
					let da = res.data; that.sugs = da;
					let s1 = similar(that.keyword,da[0].city);
					let s2 = similar(that.keyword,da[0].district);
					that.iscity = s1 > s2;
					that.sugs.unshift({
						title: s1 > s2 ? da[0].city : da[0].district,
						province: da[0].province,
						city: da[0].city,
						location: da[0].location
					})
				}
			})
		},
		onsug(va){
			let { lat, lng } = va.location
			let adres = { longitude: lng, latitude: lat };
            post("local/hotel/city", adres).then(res => {
                if (res.code == 0) {
                    let da = res.data;
					da.queryText = va.title;
					if(this.iscity && !va.adcode) delete da.queryText;
					this.$emit('select', da);
                }
            })
		}
	},
	mounted() {
		this.initCityList();
	},
};
</script>
<style lang="scss" scoped>
.t-index-address {
	width: 100%;
	height: 100vh;
	background: #fff;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 888;

	&__scroll-view {
		width: 100%;
		height: 100%;
		max-height: 100vh;
	}

	&__anchor {
		padding: 15rpx 30rpx;
		width: 100%;
		font-size: 28rpx;
		font-weight: 500;
		color: #606266;
		background-color: rgb(245, 245, 245);
	}

	&__list {
		padding: 0 70rpx 0 30rpx;
	}

	&__cell {
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #f2f2f2;

		&:last-child {
			border: none;
		}
	}

	&__sidebar {
		position: fixed;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		z-index: 99;
	}

	&__index {
		padding: 10rpx 20rpx;
		font-size: 22rpx;
		font-weight: 500;
		line-height: 1;
	}

	&__alert {
		position: fixed;
		top: 50%;
		right: 90rpx;
		z-index: 99;
		margin-top: -60rpx;
		width: 120rpx;
		height: 120rpx;
		font-size: 50rpx;
		color: #fff;
		border-radius: 24rpx;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.keyw{
	position: relative;
	padding: 0 32rpx;
	.lico{
		position: absolute;
		height: 32rpx;
		line-height: 32rpx;
		top: 13rpx;
		left: 50rpx;
	}
	.inp{
		height: 58rpx;
		line-height: 58rpx;
		font-size: 30rpx;
		background-color: rgba($color: #000, $alpha: 0.05);
		border-radius: 8rpx;
		padding: 0 68rpx;
	}
	.sugs_list{
		margin-bottom: 30rpx;
		padding-top: 20rpx;
		.sugs_item{
			margin-bottom: 16rpx;
			&:last-child{
				margin-bottom: 0;
			}
		}
		.tit{
			font-size: 28rpx;
			font-weight: 600;
			.city{
				font-size: 25rpx;
				font-weight: 400;
				margin-left: 16rpx;
			}
		}
		.address{
			font-size: 24rpx;
			color: #999;
		}
	}
}

.city_hot {
	.tit_hot{
		font-size: 30rpx;
		padding: 16rpx 32rpx;
	}
	.city_box {
		padding: 0 32rpx 28rpx;
		display: grid;
		justify-content: space-between;
		// 划分列 功能函数关键字 repeat （auto-fill，100rpx）
		// 根据子元素的盒子的份额自动计算可以平铺几次
		grid-template-columns: repeat(auto-fill, 100rpx);
		// grid-gap 是 row-gap 和 column-gap 的简写形式。
		margin-bottom: -10rpx;
		grid-gap: 0 1px;
	}

	.hot_item {
		width: 100rpx;
		text-align: center;
		height: 44rpx;
		line-height: 44rpx;
		font-size: 24rpx;
		background-color: rgba($color: #000, $alpha: 0.08);
		margin-bottom: 10rpx;
		border-radius: 8rpx;
	}
}
</style>