<template>
	<view class="container">
		<u-index-list :scrollTop="scrollTop">
			<view v-for="(item, index) in indexList" :key="index">
				<block v-for="(d,i) in cityList" :key="i" v-if="d.letter == item">
					<u-index-anchor :index="item" />
					<view class="list-cell" @click="selectCityId(d)">
						<text>{{ d.name }}</text>
					</view>
				</block>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	import * as Api from '@/api/region.js'
	import storage from '@/utils/storage'

	
	export default {
		data() {
			return {
				scrollTop: 0,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
					"T", "U",
					"V", "W", "X", "Y", "Z"
				],
				cityList: []
			}
		},
		onLoad() {
			this.init()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			navTo(url) {
				this.$navTo(url)
			},
			init(){
				Api.list({status: 20}).then(res => {
					this.cityList = res.data.list
					console.log("res: ",res);
				})
			},
			selectCityId(city){
				storage.set('cityName', city.name)
				storage.set('cityId', city.id)
				uni.$emit('cityId', city.id)
				// 返回上级页面
				uni.navigateBack({
				  delta: 1
				})
			},
			bindClick(e) {
				console.log('点击item，返回数据' + JSON.stringify(e))
			}
		}
	}
</script>
<style lang="scss" scoped>
	.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;
	}
</style>
</style>
