<template name="moreSelect">
	<view class="city-box">
		<view class="city-box-title" :style="'background:' + colorValue">
			<view class="close-btn" @tap="closeCity">关闭</view>
<!--			<text>{{title}}(最多{{maxCount}}个)</text>-->
			<text>{{title}}</text>
			<view class="query-btn" @tap="queryCity">确定</view>
		</view>
		<view class="choosed-box" v-if="chooseCityList.length > 0">
			<view class="city-single" v-for="(item,index) in chooseCityList" :key="index">
				<text :style="'color:' + colorValue">{{item.name}}</text>
				<image @tap="delCity(index)" src="../../static/icon-apps/close-icon.png" mode=""></image>
			</view>
		</view>
		<view class="city-data" v-if="level == 1">
			<view class="level-one-data">
				<scroll-view scroll-y="true" :style="'height:' + (900-viewHeight) + 'upx'" @scroll="scroll"
					:scroll-top="scrollTop" scroll-with-animation="true">
					<view class="county-single" v-for="(zItem,zIndex) in cityData" :key="zIndex"
						@tap="chooseOneCity(zItem)">
						<view v-if="cityIdArr.includes(zItem.id)" class="city-name" :style="'color:' + colorValue">
							{{zItem.name}}</view>
						<view v-else class="city-name">{{zItem.name}}</view>

						<view v-if="cityIdArr.includes(zItem.id)" class="selected-box" :style="'background:' + colorValue + ';border:1px solid ' +colorValue">
						 <image src="../../static/icon-apps/nike.png" mode=""></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="city-data" v-else-if="level == 2">
			<view class="province-data">
				<scroll-view scroll-y="true" :style="'height:' + (900-viewHeight) + 'upx'" scroll-with-animation="true">
					<view @tap="switchCity(cIndex)" class="province-single"
						:class="cityIndex == cIndex ?'city-active':''" v-for="(cItem,cIndex) in cityData" :key="cIndex">
						<text>{{cItem.name}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="county-data">
				<scroll-view scroll-y="true" :style="'height:' + (900-viewHeight) + 'upx'" @scroll="scroll"
					:scroll-top="scrollTop" scroll-with-animation="true">
					<view class="county-single" v-for="(zItem,zIndex) in cityData[cityIndex].children" :key="zIndex"
						@tap="chooseCity(zItem)">
						<view v-if="cityIdArr.includes(zItem.id)" class="city-name" :style="'color:' + colorValue">
							{{zItem.name}}</view>
						<view v-else class="city-name">{{zItem.name}}</view>
						<view v-if="cityIdArr.includes(zItem.id)" class="selected-box" :style="'background:' + colorValue + ';border:1px solid ' + colorValue">
						 <image src="../../static/icon-apps/nike.png" mode=""></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="city-data" v-else-if="level == 3">
			<view class="province-data" style="width: 250upx;">
				<scroll-view scroll-y="true" :style="'height:' + (900-viewHeight) + 'upx'" scroll-with-animation="true">
					<view @tap="switchOne(cIndex)" class="province-single" :class="oneIndex == cIndex ?'city-active':''"
						v-for="(cItem,cIndex) in cityData" :key="cIndex">
						<text class="one-text">{{cItem.name}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="two-data">
				<scroll-view scroll-y="true" :style="'height:' + (900-viewHeight) + 'upx'" @scroll="scroll"
					:scroll-top="scrollTop" scroll-with-animation="true">
					<view class="two-single" :class="twoIndex == zIndex ?'city-active':''"
						v-for="(zItem,zIndex) in cityData[oneIndex].children" :key="zIndex" @tap="chooseTwo(zIndex)">
						<view class="city-name">{{zItem.name}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="three-data">
				<scroll-view scroll-y="true" :style="'height:' + (900-viewHeight) + 'upx'" @scroll="scroll"
					:scroll-top="scrollTop" scroll-with-animation="true">
					<view class="county-single" v-for="(zItem,zIndex) in cityData[oneIndex].children[twoIndex].children"
						:key="zIndex" @tap="chooseThree(zItem)">
						<view v-if="cityIdArr.includes(zItem.id)" class="city-name"
							:style="'color:' + colorValue + ';font-weight:bold'">{{zItem.name}}</view>
						<view v-else class="city-name">{{zItem.name}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "more-select",
		data() {
			return {
				viewHeight: 0,
				oneIndex: 0,
				twoIndex: 0
			};
		},
		props: {
			maxCount: {
				type: Number,
				default: 3
			},
			title: {
				type: String,
				default: "选择城市"
			},
			level: {
				type: Number,
				default: 2
			},
			chooseCityList: {
				type: Array,
				default: () => []
			},
			cityData: {
				type: Array,
				default: () => []
			},
			cityIdArr: {
				type: Array,
				default: () => []
			},
			scrollTop: {
				type: Number,
				default: 0
			},
			cityIndex: {
				type: Number,
				default: 0
			},
			colorValue: {
				type: String,
				default: "#016CE1"
			},
			oldScrollTop: {
				type: Number,
				default: 0
			}

		},
		mounted() {
			// this.getDescBox()
			// console.log(this.cityData)
		},
		methods: {
			scroll(e) {
				this.$emit('scrollCity', e.detail.scrollTop)
			},
			closeCity() {
				this.$emit('closeCity', true)
			},
			queryCity() {
				this.$emit('queryCity', true)
			},
			switchCity(index) {
				this.$emit('switchCity', index)
			},
			switchOne(index) {
				this.oneIndex = index
			},
			chooseTwo(index) {
				this.twoIndex = index
			},
			getViewHeight() {
				uni.createSelectorQuery().in(this).select('.choosed-box').boundingClientRect(result => {
					if (result) {
						this.viewHeight = result.height * 2
					} else {
						this.viewHeight = 0
					}
				}).exec();
			},
			chooseCity(item) {
				let parms = {
					id: item.id,
					pid: item.pid,
					name: item.name,
					number: item.number,
					parentName: this.cityData[this.cityIndex].name
				}
				this.$emit('chooseCity', parms)
			},
			chooseOneCity(item) {
				console.log(item)
				let parms = {
					id: item.id,
					name: item.name
				}
				this.$emit('chooseCity', parms)
			},
			chooseThree(item) {
				let parms = {
					id: item.id,
					oneId: this.cityData[this.oneIndex].id,
					twoId: item.pid,
					name: item.name,
					oneName: this.cityData[this.oneIndex].name,
					twoName: this.cityData[this.oneIndex].children[this.twoIndex].name,
				}
				console.log(parms)
				this.$emit('chooseCity', parms)
			},
			delCity(index) {
				this.$emit('delCity', index)
			}
		}
	}
</script>

<style lang="scss">
	.city-box {
		width: 750upx;
		height: 1000upx;
		background: rgba($color: #EEEEEE, $alpha: 1);

		.city-box-title {
			width: 750upx;
			height: 100upx;
			background: #016CE1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #FFFFFF;

			.close-btn {
				margin-left: 36upx;
				font-size: 28upx;
			}

			.query-btn {
				margin-right: 36upx;
				font-size: 28upx;
			}

			text {
				font-size: 32upx;
			}
		}

		.level-one-data {
			width: 700upx;
			margin: 0 auto;

			// background: red;
			.county-single {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 90upx;
				margin-left: 20upx;
				margin-right: 20upx;
				border-bottom: 1px solid rgba($color: #999999, $alpha: .15);

				.city-name {
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #232425;
				}

				image {
					width: 42upx;
					height: 42upx;
				}

				.no-select-box {
					width: 42upx;
					height: 42upx;
					border: 1px solid red;
					border-radius: 7upx;
				}


			}
		}

		.city-data {
			display: flex;
			border-top: 1px solid rgba($color: #EEEEEE, $alpha: .15);

			.county-single {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 90upx;
				margin-left: 20upx;
				margin-right: 20upx;
				border-bottom: 1px solid rgba($color: #999999, $alpha: .15);

				.city-name {
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #232425;
				}

				image {
					width: 42upx;
					height: 42upx;

				}
			}

			.county-data {
				width: 450upx;



			}

			.province-scroll {
				height: 795upx;
			}

			.province-scroll-short {
				height: 900upx;
			}

			.two-data {
				width: 280upx;
				background-color: #FFFFFF;

				.two-single {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 90upx;
					padding-left: 20upx;
					// margin-left: 20upx;
					// margin-right: 20upx;
					// border-bottom: 1px solid rgba($color: #999999, $alpha: .15);

					.city-name {
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #232425;
					}

					image {
						width: 42upx;
						height: 42upx;

					}
				}
			}

			.province-data {
				width: 300upx;
				background: #FFFFFF;



				.province-single {
					width: 300upx;
					display: flex;
					height: 90upx;
					align-items: center;
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #232425;


					text {
						margin-left: 30upx;
					}
				}


			}
		}

		.city-active {
			background: #EEEEEE;
			color: #016CE1;
			font-weight: bold;
		}

		.choosed-box {
			width: 750upx;
			background: #FFFFFF;
			padding: 30upx 0 0 0;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.city-single {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 20upx;
				margin-bottom: 30upx;
				padding: 0 20upx;
				// width: 125upx;
				height: 46upx;
				background: rgba($color: #016CE1, $alpha: 0.16);
				border-radius: 26upx;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #016CE1;

				image {
					width: 32upx;
					height: 32upx;
					margin-left: 6upx;
				}
			}
		}
	}

	.one-text {
		width: 220upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.selected-box {
		width: 38upx;
		height: 38upx;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 38upx;
			height: 38upx;
		}
		border-radius: 7upx;
	}
</style>
