<template>
	<view class="pickcarcity" :style="{'height':contentHeight}">
		<view class="qcity">
			<view class="ctrl-box">
			  <u-search
			    action-text="搜索"
			    :focus="true"
			    :clearabled="true"
			    :show-action="true"
			    radius="40"
			    v-model="searchKey"
			    @search="searchHandler"
			    @custom="searchHandler"
			    @change="changeHandler"
			  ></u-search>
			</view>
			<view class="kaitong">
				<div style='width: 100%;'><span style='color: #9A9A9A;font-size: 12px;'>已开通城市</span></div>
				<view v-for="(item, index) in RegionList" :key="index" class="region" @click="goback(item)">
					{{item.RegionName}}
				</view>
			</view>
			
			<div style='height: calc(100vh - 50px);'>
				<u-index-list :scrollTop="scrollTop">
					<view v-for="(item, index) in indexList" :key="index">
						<u-index-anchor :index="item.ti" />
						<view class="list-cell" v-for="(x,y) in item.children" :key='y' @click="goback(x)">
							{{x.Name}}
						</view>
						
					</view>
				</u-index-list>
			</div>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: "取车城市",
				scrollTop:0,
				contentHeight:0,
				mainColor:'',
				secondary:'',
				RegionList:[],
				cityList:[],
				searchKey: "",
				indexList: [{ti:"A"}, {ti:"B"}, {ti:"C"}, {ti:"D"}, {ti:"E"}, {ti:"F"}, {ti:"G"},{ ti:"H"}, {ti:"I"}, {ti:"J"}, {ti:"K"}, {ti:"L"},
				 {ti:"M"}, {ti:"N"}, {ti:"O"}, {ti:"P"},{ ti:"Q"}, {ti:"R"}, {ti:"S"}, {ti:"T"}, {ti:"U"},
									{ti:"V"}, {ti:"W"}, {ti:"X"}, {ti:"Y"}, {ti:"Z"}
								]
			}
		},
		onLoad(option){
			
		},
		created(){
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			 this.mainColor = this.$uiConfig.mainColor;
			 this.secondary = this.$uiConfig.secondary;
			 this.init()//城市列表
			 this.getSiteRegionList()

		},
		mounted() {
			
			 uni.setNavigationBarTitle({
			   title: this.pageTitle,
			 });
		},
		methods: {
			init(){
				uni.showLoading({
				  title: "加载中",
				});
				this.request2(
					{
						url: '/api/AppletGuideCar/GetAllList',
						data: {}
					},
							
				  (res) => {
					this.cityList = res.data;
					this.indexList.forEach(x=>{
						x.children=[];
						this.cityList.forEach(j=>{
							let obj={}
							if(x.ti==j.PinYin.substr(0,1)){
								x.children.push(j)
							}
						})
						
					})
					 uni.hideLoading();
				  }
				);
			},
			getSiteRegionList(){
				this.request2(
					{
						url: '/api/AppletGuideCar/GetSiteRegionList',
						data: {}
					},
							
				  (res) => {
					this.RegionList = res.data
				  }
				);
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			goback(item){
				console.log(item)
			},
			searchHandler(val){
				console.log(val)
			},
			changeHandler(val) {
			  
			},
		
		}
	}
</script>

<style>
.pickcarcity{
	background: #FFFFFF;
}
.pickcarcity .qcity{
}
 .pickcarcity .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;
	}
	
	.pickcarcity .anchor-text {
		color: red;
	}
	.pickcarcity .kaitong{
		width: 100%;
		padding: 15px;
		background: #FAF8F9;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}
	.pickcarcity .region{
		width: 200rpx;
		height: 68rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
		margin-top: 30rpx;
	}
	.pickcarcity .ctrl-box {
	  padding: 5px 10px;
	}
</style>
