<template>
	<view class="cgh-city-childe">
		<view class="alert-black" @click="closeAlert"></view>
		<view class="radio-con">
			<view class="close" @click="closeAlert">
				<image src="../../static/common/arrow_right_gray.png"></image>
				
				<view class="war" style="width:500rpx;-webkit-flex-wrap: wrap;flex-wrap: wrap;">
					<text class="text">一行显示不全</text>
					<text class="text">一行显示不全</text>
					<text class="text">一行显示不全,wrap折行</text>
				</view>
				<view v-if="selDataInfo.length == 0" class="infotext">请选择位置</view>
			</view>
			<view class="radio-info-con" >
				<view class="item" v-for="(v, index) in cityList" :key="index" @click="selCity(v)">
					<view class="name">{{v.name}}</view>
				</view>
				<view class="child-more">已加载全部</view>
			</view>
		
		</view>
	</view>
</template>

<script>
	import cityData from './city.js';
	export default {
		props: ['cityInfo','maxLevel'],
		data() {
			return {
				tempCityList:  cityData.data,
				cityList: cityData.data,
				keyword: '',
				selDataInfo: [],
				selIndex: 1
			}
		},
		created() {
		},
		methods: {
			selCity (info) {
				if(this.selIndex > this.maxLevel){
					return
				}else{
					if(this.selDataInfo[this.selIndex]){
						this.selDataInfo[this.selIndex-1] = info.name
					}else{
						this.selDataInfo.push(info.name)
					}
					this.selIndex++;
					this.getListByIndex();
				}
				this.$emit('dataSelected', this.selDataInfo);
			},
			getListByIndex(index){
				
			},
			keyWordSearch () { // 关键字搜索
				if (this.keyword.trim() !== '') {
					this.cityList = this.tempCityList.filter((obj)=>{
						return obj.name.indexOf(this.keyword) != -1;
					});
				} else {
					this.cityList = this.tempCityList;
				}
				
			},
			closeAlert () {
				this.$emit('closeAlert');
			}
		},
		 watch: {
			  'keyword': function (newVal) { // 监听关键字的变化
				setTimeout(() => {
					this.keyWordSearch();
				}, 1000);
			  }
		  }
	}
</script>

<style lang="scss" scoped="">
	.cgh-city-childe {
		width: 100%;
		overflow: hidden;
		.alert-black  {
			width: 100%;
			height: 100%;
			position: fixed;
			z-index: 1; 
			left: 0;
			top: 0;
			background: black;
			opacity: 0.5;
		}
		.all-user-text {
			padding: 25upx 20upx 25upx 20upx;
			border-bottom: 1upx solid #f4f4f4;
			font-size: 30upx;
			color: #333;
		}
		.radio-con {
			width: 100%;
			height: 70%;
			position: fixed;
			overflow:auto;
			bottom: 0;
			left: 0;
			z-index: 11;
			background: #fff;
			padding-bottom: 80upx;
			.search {
				background: red;
				margin-top: 100upx;
			}
			.radio-info-con {
				width: 100%;
				height: 70%;
				position: fixed;
				left: 0;
				bottom:  0u;
				z-index: 2009;
				overflow: scroll;
				.item {
					font-size: 36upx;
					color: #333;
					border-bottom: 1upx solid #f4f4f4;
					padding: 25upx 20upx 25upx 20upx;
					display: flex;
					justify-content:space-between;
					.name {
						width: 90%;
					}
					.chide-position {
						color: orange;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}
		.close {
			width: 100%;
			color: #333;
			display: flex;
			align-items: center;
			background: #42A5FE;
			color: #fff;
			padding: 10upx 0upx;
			image {
				width: 45upx;
				height: 50upx;
				margin-left: 20upx;
				vertical-align: middle;
			}
			text {
				padding-left: 20upx;
				color: red;
				font-size: 15px;
			}
			.check {
				color: #fff;
			}
		}
		.search-con {
			width: 92%;
			height: 80upx;
			margin-left: 4%;
			margin-top: 20upx;
			font-size: 32upx;
			line-height: 80upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			white-space: nowrap;
			.left {
				width: 75%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border: 1upx solid #f4f4f4;
				border-radius: 20upx;
				padding-left: 20upx;
				image {
					width: 45upx;
					height: 45upx;
				}
				input {
					width: 88%;
					text-align: left;
				}
			}
			.right {
				width: 18%;
				height: 100%;
				border: 1upx solid #f4f4f4;
				border-radius: 20upx;
				text-align: center;
				line-height: 80upx;
			}
		}
		.child-more {
			font-size: 28upx;
			color: #999;
			margin-bottom: 120upx;
			padding-top: 20upx;
			text-align: center;
		}
		.infotext {
			font-size: 28upx;
			color: #fff;
			text-align: center;
		}
		.war {
			display: flex;
			flex-direction: row;
		}
	}
</style>