<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>
			
			
			<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:'',
				
				cityList:[],
				searchList:[],//搜索出来的
				searchKey: "",
				show:false,
				indexList:[],
				// 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"}
				// 				],
				dztype:1,
				ArriveMsg:{
					StartCityId:0,
					StartCityType:0
				}
			}
		},
		onLoad(option){
			if(option && option.type){
				this.dztype = option.type
			}
			if(option && option.StartCityId){
				this.ArriveMsg.StartCityId = option.StartCityId;
				this.ArriveMsg.StartCityType = option.StartCityType;
			}
			if(this.dztype ==1){
				 this.pageTitle = '出发地点'
			}else{
				this.pageTitle = '到达地点'
			}
			uni.setNavigationBarTitle({
			  title: this.pageTitle,
			});
			this.init()//城市列表
		},
		created(){
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			 this.mainColor = this.$uiConfig.mainColor;
			 this.secondary = this.$uiConfig.secondary;
			 
		},
		mounted() {
			
			
		},
		methods: {
			init(){
				uni.showLoading({
				  title: "加载中",
				});
				let url = '/api/AppletCar/GetAppletCarDepartCityList';
				let msg = {}
				if(this.dztype==2){
					url = '/api/AppletCar/GetAppletCarArriveCityList';
					msg = this.ArriveMsg
				}
				this.request2(
					{
						url: url,
						data: msg
					},
							
				  (res) => {
					this.cityList = res.data;
					this.indexList=[]
					this.cityList.forEach(x=>{
						let obj = {
							ti:(x.PinYin.substr(0,1)).toUpperCase()
						}
						this.indexList.push(obj)
					})
					this.indexList = this.unique(this.indexList)
					this.indexList.forEach(x=>{
						x.children=[];
						this.cityList.forEach(j=>{
							let obj={}
							if(x.ti==(j.PinYin.substr(0,1)).toUpperCase()){
								x.children.push(j)
							}
						})
						
					})
					
					
					 uni.hideLoading();
				  }
				);
			},
			 unique(arr){//数组去重
			    const res = new Map();
				return arr.filter(
					(list) => !res.has(list.ti) && res.set(list.ti, 1)
				);
			  
			 },
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			goback(item,type){
				// let Name 
				// if(type==1){
				// 	Name=item.RegionName
				// }else{
				// 	Name=item.Name
				// }
				console.log(item)
				let that = this
				let pages = getCurrentPages(); // 当前页面
				let beforePage
				beforePage = pages[pages.length - 2]; // 前一个页面
				// console.log( beforePage.$vm)
				setTimeout(()=>{
					 uni.navigateBack({
						 delta:1,
						 success: function() {
							 beforePage.$vm.getcar(item.Id,item.Type,item.Name,that.dztype); // 执行前一个页面的方法
						 }
					 });
				},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>
