<template>
	<view class="choice-city mg-lr-24">
		<!--搜索部分开始 -->
 		<view class="input-view light-gray u-f u-f-fdr u-f-aic u-f-fwnw">
			<image class="search-icon" src="../.././static/common/search.png" :mode="'widthFix'"></image>
			<input
				v-model="searchText"
				confirm-type="search"
				class="nav-bar-input"
				type="text"
				placeholder="搜索"
				@confirm="handleSearch"
			/>
		</view>
		<!-- 搜索部分结束-->
		
		<!-- 右侧导航开始 -->
		<view class="navgate" v-if="!searchText">
			<scroll-view
				:scroll-y="true"
				:scroll-into-view="tracingLeftPoint"
				:scroll-with-animation="true"
				:show-scrollbar="false"
				style="height: 486rpx;"
			>
				<view :class="['navgate-item deep-gray u-f u-f-aic u-f-jcc', acitiveRightMenu === item ? 'active' : '' ]" v-for="(item, index) in rightMenu" :key="index" @click="handleRightScroll(item)">{{item}}</view>
			</scroll-view>
		</view>
		<!-- 右侧导航结束 -->
		
		<!-- 城市列表开始 -->
		<scroll-view
			style="height: 100vh;"
			:scroll-y="true"
			:scroll-into-view="tracingLeftPoint"
			:scroll-with-animation="true"
			:show-scrollbar="false"
			 v-if="!searchText"
		>
			<!-- 当前定位开始 -->
			<view :id="'当'">
				<view class="location">
					<view class="common-title fs28">当前定位</view>
				</view>
				
				<view class="btn-list" v-if="currentCity">
					<view class="cw-btn-wrap">
						<text class="common-white-btn fs26">{{currentCity}}</text>
					</view>
				</view>
				
				<view v-else class="fs24 light-gray mg-top-18">请选择当前城市</view>
			</view>
			<!-- 当前定位结束 -->
			
			<!-- 当前城市开始 -->
			<view :id="'热'">
				<view class="city">
					<view class="common-title fs28">热门城市</view>
				</view>
				
				<view class="btn-list u-f u-f-fww" v-if="popularCities.length > 0">
					<view
						class="cw-btn-wrap u-f u-f-jcc u-f-aic mg-bot-10"
						v-for="item in popularCities" 
						:key="item.id"
						@click="choiceCity(item)"
					>
						<text class="common-white-btn fs26">{{item.name}}</text>
					</view>
				</view>
				
				<view v-else class="fs24 light-gray mg-top-18">暂无信息</view>
			</view>
			
			<!-- 当前城市结束 -->
			<view class="city-list">
				<view class="city-item" v-for="(value, key) in reginList" :key="key" :id="key">
					<view class="city-item-letter">{{key}}</view>
					<view class="city-item-name" v-for="item in reginList[key]" :key="item.id" @click="choiceCity(item)">{{item.name}}</view>
				</view>
			</view>
		</scroll-view>
		<!-- 城市列表结束 -->
		
		<view class="city-list" v-if="searchText">
			<view v-if="JSON.stringify(reginList) !== '{}'">
				<view class="city-item" v-for="(value, key) in reginList" :key="key" :id="key">
					<view class="city-item-letter">{{key}}</view>
					<view class="city-item-name" v-for="item in reginList[key]" :key="item.id" @click="choiceCity(item)">{{item.name}}</view>
				</view>
			</view>
			<view v-else class="light-gray fs24">请输入正确的城市名称</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tracingLeftPoint: "当",
				acitiveRightMenu: '当',
				currentCity: "",
				popularCities: [],
				reginList: {},
				rightMenu: []
			}
		},
		onLoad() {
			this.getCurCity()
			this.getPopularCities()
			this.getReginList()
		},
		methods: {
			getScrollDistance(id) {
				var distance = 0;
				console.log("getScrollDistance", id);
				
				if (id !== 1) {
					for(let i = 0; i < id; i ++) {
						let length = this.allCity[i].cityList.length
						distance += uni.upx2px(38+40) + uni.upx2px(length*(35+40))
					}
				}
		
				return distance;
			},
			handleRightScroll(name) {
				this.acitiveRightMenu = name
				this.tracingLeftPoint = name
			},
			async getPopularCities() {
				console.log('getPopularCities')
				let res = await this.$http.post('/api/client/index/getPopularCities')
				let popularCities = res.data.data
				this.popularCities = popularCities
			},
			async getReginList() {
				let data = {
				     "field": this.searchText
				}
				let res = await this.$http.post('/api/client/index/getReginList',data)
				let reginList = res.data.data
				let rightMenu = Object.keys(reginList)
				rightMenu = ['当', '热', ...rightMenu]
				this.reginList = reginList
				this.rightMenu = rightMenu
			},
			choiceCity(item) {
				this.User.setCurCity(item)
				this.currentCity = item.name
				this.User.navigate({url: '/pages/index/index'}, 'switchTab')
			},
			getCurCity() {
				this.currentCity = this.User.curcity.name || ''
			},
			bindClick() {},
			handleSearch() {
				this.getReginList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	$nav-height: 68rpx;
	.choice-city {
		position: relative;
		.input-view {
			background-color: #ffffff;
			border: 1rpx solid #333333;
			height: $nav-height;
			line-height: $nav-height;
			border-radius: 34rpx;
			padding: 0 15px;
			margin-bottom: 22rpx;
			.search-icon {
				width: 30rpx;
				height: 30rpx;
			}
			.nav-bar-input {
				height: 100%;
				padding: 0 5px;
				font-size: 12px;
			}
		}

		.location {
			.common-title {
				color: #333333;
				border-left: 6rpx solid #FF4502;
				padding-left: 4rpx;
			}
		}
		
		.btn-list {
			padding-top: 18rpx;
			.cw-btn-wrap {
				flex: 25%;
				
				.common-white-btn {
					padding: 12rpx 40rpx;
					border-radius: 8rpx;
					background-color: #ffffff;
					border: 1rpx solid #D9D9D9;
				}
			}
		}

		.city {
			padding-top: 30rpx;
			.common-title {
				color: #333333;
				border-left: 6rpx solid #FF4502;
				padding-left: 4rpx;
			}
		}
		
		.navgate {
			position: fixed;
			right: 0rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 42rpx;
			z-index: 999;
			.navgate-item {
				width: 30rpx;
				height: 30rpx;
				margin-top: 7rpx;
				font-weight: 400;
				font-size: 18rpx;
				&.active {
					border-radius: 50%;
					color: #ffffff;
					background: #FF4502;
				}
			}
		}
		
		.city-list {
			margin-top: 30rpx;
			.city-item {
				.city-item-letter {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 40rpx;
				}
				.city-item-name {
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					margin-bottom: 40rpx;
				}
			}
		}
	}
</style>
