<template>
	<view class="pickcarcity" :style="{'height':contentHeight}">
		<view class="qcity">
			<view class="ctrl-box">
			  <u-search
			    action-text="搜索"
			    :focus="true"
			    
			    :show-action="true"
			    radius="40"
			    v-model="searchKey"
			    @search="searchHandler"
			    @custom="searchHandler"
			    @change="changeHandler"
			  ></u-search>
			</view>
			<view v-if="show==true">
				<scroll-view
				:scroll-y="true"
				style="height: calc(100vh - 50px)">
					<view class="txtype">
						<view class="list-cell" v-for="(x, index) in searchList" :key="index" @click="goback(x,2)">
							{{x.Name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="kaitong" v-if="show==false">
				<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,1)">
					{{item.RegionName}}
				</view>
			</view>
			
			<div style='height: calc(100vh - 50px);'  v-if="show==false">
				<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,2)">
							{{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:[],
				searchList:[],//搜索出来的
				searchKey: "",
				show:false,
				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,type){
				let Name 
				if(type==1){
					Name=item.RegionName
				}else{
					Name=item.Name
				}
				let pages = getCurrentPages(); // 当前页面
				let beforePage
				beforePage = pages[pages.length - 2]; // 前一个页面
				setTimeout(()=>{
					 uni.navigateBack({
						 delta:1,
						 success: function() {
							 beforePage.$vm.getPickcar(Name); // 执行前一个页面的方法
						 }
					 });
				},100)
				
			},
			searchHandler(val){
				if(val!=''){
					this.searchList = []
					this.cityList.forEach(x=>{
						if(x.Name.indexOf(val)!=-1){
							this.searchList.push(x)
						}
					})
					
					this.show=true
				}else{
					this.show=false
				}
				
			},
			changeHandler(val) {
			  
			  if(val==''){
				  this.show=false
			  }
			},
		
		}
	}
</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;
		position: relative;
	}
	
	.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;
	}
	.pickcarcity .txtype{
		width: 100%;
		background: #FFF;
		height: calc(100vh - 50px);
		
	}
	
</style>
