<template>
	<view class="container">
		<view class="wapper">
			<view class="search-box" :style="{'padding-top': (capsulTop - 5) + 'px',}">
				<image @click="$wskj.goBack()" class="w-32 h-32 mr-24" src="@/static/back.png"></image>
				<u-search v-model="searchText" height="32" shape="round" :showAction="false" bgColor="#F5F5F5"
					@search="onSearch" @change="onSearchChange" @custom="onSearch" placeholder="搜索城市"></u-search>
			</view>
			<!--  v-if="!isSearch" -->
			<view class="mt-34">
				<view class="city-list">
					<u-index-list :index-list="indexList">
						<view slot="header">
							<view class="current-city">
								<view class="fs-28 fw-600 mb-32">
									<text>当前/历史</text>
								</view>
								<view class="tag">
									<image class="mr-4 w-40 h-40" src="@/static/home/address-blank.png"></image>
									<text>{{ home.currentHomeCity }}</text>
								</view>
							</view>
							<view class="mt-40">
								<view>
									<text class="fs-28 fw-600">热门城市</text>
								</view>
								<view class="tags-box">
									<view @click="onSelectHotCity(item,index)" v-for="(item, index) in hotCityList"
										:key="index" :style="{'margin-right': (index + 1) % 3 === 0? '0' : '20rpx'}"
										class="item" :class="{'active': currentHotCity === index}">
										<text>{{ item.name }}</text>
									</view>
								</view>
							</view>
						</view>
						<template v-for="(item, index) in chinaCityList">
							<!-- #ifdef APP-NVUE -->
							<u-index-anchor :text="indexList[index]"></u-index-anchor>
							<!-- #endif -->
							<u-index-item>
								<!-- #ifndef APP-NVUE -->
								<u-index-anchor :text="indexList[index]"></u-index-anchor>
								<!-- #endif -->
								<view @click="onSelectCity(cell, index)" class="list-cell"
									v-for="(cell, cellIndex) in item" :key="cellIndex">
									{{cell.name}}
								</view>
							</u-index-item>
						</template>
					</u-index-list>
				</view>
			</view>

			<!-- 搜索结果 -->
			<!-- <view class="search-result">
				<view class="result-item">
					<view class="flex-between-center">
						<view class="flex-column-center">
							<image class="mr-4 w-48 h-48" src="@/static/home/address-blank.png"></image>
							<text>郑州</text>
						</view>
						<image class="w-24 h-24" src="@/static/right_black.png"></image>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				cityName: '',

				hotCityList: [], // 热门城市
				currentHotCity: '',

				indexList: [],
				chinaCityList: [], // 所有城市列表

				searchText: '',
				isSearch: false
			}
		},
		onLoad() {
			for (let i = 65; i <= 90; i++) { // ASCII码中，大写字母A是65，Z是90
				this.indexList.push(String.fromCharCode(i));
			}
			this.getChinaCity()
		},
		computed: {
			...mapState(['home']),
			capsulHeight() {
				return this.$wskj.capsulHeight
			},
			capsulTop() {
				return this.$wskj.capsulTop
			}
		},
		methods: {
			...mapMutations('home', ['saveCurrentHomeCity']),
			onSearch(e) {
				if (this.searchText === '') {
					return this.$u.toast('请输入搜索内容')
				}
				this.searchText = e;
				this.getChinaCity()
			},
			// 内容发生变化
			onSearchChange(e) {
				if (this.searchText !== '') {
					this.isSearch = true
				} else {
					this.isSearch = false
				}
				this.getChinaCity()
			},
			// 获取全国城市列表
			getChinaCity() {
				const params = {
					url: '/addons/shop/api.common/city_list',
					data: {
						city: this.searchText
					}
				}
				this.$request(params).then(res => {
					this.chinaCityList = res.data.list
					this.hotCityList = res.data.hot_city
				}).catch(err => {

				})
			},
			// 点击热门城市
			onSelectHotCity(item, index) {
				// console.log(item, index)
				this.currentHotCity = index
				this.saveCurrentHomeCity(item.name) // 保存城市名到Vuex
				this.$wskj.goBack()
			},
			onSearch(e) {
				// console.log(e)
				this.searchStr = e;
				this.getChinaCity()
			},
			// 选择列表中的城市
			onSelectCity(item, index) {
				this.saveCurrentHomeCity(item.name) // 保存城市到Vuex
				this.$wskj.goBack()
			}
		}
	}
</script>

<style scoped>
	.container {}

	.wapper {
		padding: 0 32rpx 0;
	}

	.search-box {
		width: 70%;
		padding: 12rpx 0 12rpx;
		height: 88rpx;
		background-color: #FFF;
		display: flex;
		align-items: center;
	}



	.city-list {
		height: 60%;
		background-color: #FFF;
	}




	.current-city>.tag {
		width: 202rpx;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #F5F5F5;
		border-radius: 8rpx;
		font-size: 28rpx;
	}




	.tags-box {
		display: flex;
		flex-wrap: wrap;
		margin-top: 32rpx;
	}

	.tags-box>.item {
		width: 31.4%;
		padding: 15rpx 0;
		text-align: center;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		background-color: #F5F5F5;
	}

	.active {
		background-color: #CCCCCC !important;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.result-item {
		padding: 32rpx 32rpx;
		border-bottom: 2rpx solid #F5F5F5;
	}
</style>