<template>
	<view class="amms-page">
		<cu-custom :isBack="true">
			<block v-slot:content>{{ title }}</block>
		</cu-custom>
		<view class="flex" style="width: 100%;">
			<uni-search-bar v-model="param.name" placeholder="请输入三字码或中文地点关键字" bgColor="#EEEEEE" @confirm="search"
				@input="blurSearch" />
		</view>
		<uni-indexed-list :options="list" :showSelect="true" @click="bindClick"></uni-indexed-list>
		<q-loading mask="true" click="true" ref="loading"></q-loading>
	</view>
</template>

<script>
	import {
		request
	} from '../../utils/request';
	export default {
		data() {
			return {
				title: '请选择工作航站',
				param: {
					name: ''
				},
				'list': [{
					'letter': 'A',
					'data': []
				}, {
					'letter': 'B',
					'data': []
				}, {
					'letter': 'C',
					'data': []
				}, {
					'letter': 'D',
					'data': []
				}, {
					'letter': 'E',
					'data': []
				}, {
					'letter': 'F',
					'data': []
				}, {
					'letter': 'G',
					'data': []
				}, {
					'letter': 'H',
					'data': []
				}, {
					'letter': 'I',
					'data': []
				}, {
					'letter': 'J',
					'data': []
				}, {
					'letter': 'K',
					'data': []
				}, {
					'letter': 'L',
					'data': []
				}, {
					'letter': 'M',
					'data': []
				}, {
					'letter': 'N',
					'data': []
				}, {
					'letter': 'O',
					'data': []
				}, {
					'letter': 'P',
					'data': []
				}, {
					'letter': 'Q',
					'data': []
				}, {
					'letter': 'R',
					'data': []
				}, {
					'letter': 'S',
					'data': []
				}, {
					'letter': 'T',
					'data': []
				}, {
					'letter': 'U',
					'data': []
				}, {
					'letter': 'V',
					'data': []
				}, {
					'letter': 'W',
					'data': []
				}, {
					'letter': 'X',
					'data': []
				}, {
					'letter': 'Y',
					'data': []
				}, {
					'letter': 'Z',
					'data': []
				}]
			};
		},
		mounted() {
			this.getCityData();
		},
		methods: {
			bindClick(e) {
				uni.$emit('cityPicker', e.item.name);
				uni.navigateBack({
					delta: 1
				});
			},
			blurSearch(val) {
				this.search({value:val})
			},
			// 获取机场数据
			getCityData() {
				if (uni.getStorageSync('cityData') && uni.getStorageSync('cityData').length > 0) {
					let _data = uni.getStorageSync('cityData');
					// 重置城市数据
					let arr = [];
					this.list.map(ele => {
						ele.data = [];
						arr.push(ele.letter);
					})
					_data.forEach(ele => {
						if (ele.zcityename) {
							let firstLetter = (ele.zapt3 || ele.zapt4).split('')[0];
							this.list[arr.indexOf(firstLetter)].data.push(
								`${ele.zapt3 || ele.zapt4}-${ele.zaptcsname}`);
						}
					})
				} else {
					this.$refs.loading.open();
					request({
							method: 'get',
							url: 'terminal-select',
							data: {
								name: ''
							}
						})
						.then(res => {
							if (res.code == 0) {
								// 重置城市数据
								let arr = [];
								this.list.map(ele => {
									ele.data = [];
									arr.push(ele.letter);
								})
								res.data.forEach(ele => {
									if (ele.zcityename) {
										let firstLetter = (ele.zapt3 || ele.zapt4).split('')[0];
										this.list[arr.indexOf(firstLetter)].data.push(
											`${ele.zapt3 || ele.zapt4}-${ele.zaptcsname}`);
									}
								})
								uni.setStorageSync('cityData', res.data)
							} else {
								uni.showToast({
									title: res.msg || '系统繁忙，请稍后重试！',
									icon: 'none'
								});
							}
							this.$refs.loading.close();
						})
						.catch(res => {
							this.$refs.loading.close();
							console.log(res);
						});
				}
				
			},
			search(result) {
				let val = result.value.toLocaleUpperCase();
				let _cityData = uni.getStorageSync('cityData');
				let filterData = _cityData.filter(ele => {
					if (ele.zapt3.indexOf(val) > -1 || ele.zaptcsname.indexOf(val) > -1) {
						return ele;
					}
				})
				// 重置城市数据
				let arr = [];
				this.list.map(ele => {
					ele.data = [];
					arr.push(ele.letter);
				})
				filterData.forEach(ele => {
					if (ele.zcityename) {
						let firstLetter = (ele.zapt3 || ele.zapt4).split('')[0];
						this.list[arr.indexOf(firstLetter)].data.push(
							`${ele.zapt3 || ele.zapt4}-${ele.zaptcsname}`);
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.uni-indexed-list {
		/* #ifdef H5 */
		top: 205rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		top: 270rpx !important;
		/* #endif */
	}

	.uni-searchbar {
		width: 100%;
	}
</style>
