<template>
	<view>
		<view class="root">
			<view class="mask" @click="handleMask"></view>
			<view class="list-container">
				<view class="item" v-for="(item,index) in list" :class="{isActive: activeIndex === index}"
					@click="handleActive(index)">
					<text class="list-text">{{item}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			type: {
				type: String,
				default () {
					return ''
				}
			}
		},
		data() {
			return {
				activeIndex: -1,
				queryInfo: {}
			}
		},
		methods: {
			handleMask() {
				this.$emit('cancelDrop');
			},
			sendQueryInfo() {
				if (this.type === '行业') {
					this.queryInfo = {
						business: this.list[this.activeIndex]
					}
				} else if (this.type === '区域') {
					this.queryInfo = {
						region: this.list[this.activeIndex]
					}
				} else if (this.type === '面积') {
					this.queryInfo = {
						areaType: this.activeIndex + 1
					}
				} else if (this.type === '筛选') {
					this.queryInfo = {
						sortType: this.activeIndex + 1
					}
				}
				// 发送queryInfo
				this.$emit('getQueryInfo', this.queryInfo);	
			},
			async handleActive(index) {
				this.activeIndex = index;
				this.sendQueryInfo(index);
				// 设置一个定时器，等待200毫秒
				const delayPromise = this.delay(200);
				// 等待定时器完成
				await delayPromise;
				this.handleMask();
			},
			delay(ms) {
				return new Promise((resolve) => {
					// 设置一个定时器，并将定时器的ID存储在this.timerId中
					this.timerId = setTimeout(() => {
						resolve();
						// 清除定时器
						clearTimeout(this.timerId);
					}, ms);
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.isActive {
		color: #CC3333;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		-webkit-backdrop-filter: saturate(150%) blur(8px);
		background-color: rgba(0, 0, 0, .3);
		z-index: 20;
	}

	.root {
		position: absolute;
		top: 0;
		width: 100%;

		font-size: 28rpx;
		background-color: #fff;
		position: absolute;
		z-index: 1;

		.list-container {
			position: relative;
			background-color: #fff;
			width: 100%;
			z-index: 21;
			border-radius: 0px 0px 20px 20px;
			height: 320rpx;
			overflow-y: auto;
			.item {
				border-top: 1px solid #EEEEEE;
				font-weight: 500;
				padding-left: 61rpx;
				height: 80rpx;

				display: flex;
				flex-direction: column;
				justify-content: center;
			}
		}
	}
</style>