<template>
	<view class="filter">
		<view class="filter-panel">
			<!-- Tab栏：使用for循环渲染选项 -->
			<view class="filter-tabs">
				<view class="tab-item" :class="{ active: activeTab === item.value }" @click="handleTabClick(item.value)"
					v-for="(item, index) in tabOptions" :key="index">
					{{ item.label }}
					<image src="/static/images/sq_icon.png" mode="aspectFit" class="sq-icon"
						v-if="activeTab != item.value">
					</image>
					<image src="/static/images/zk_icon.png" mode="aspectFit" class="sq-icon" v-else></image>
				</view>
			</view>

			<!-- 筛选内容区：添加动画效果 -->
			<view class="filter-pop" :class="{ show: activeTab, hide: !activeTab }">
				<view class="filter-content">
					<!-- 服务时间筛选（日期） -->
					<view v-if="popTab == 'time'" class="filter-group">
						<view class="filter-item" :class="{ active: item.value === selectedDate }"
							v-for="(item, index) in dateOptions" :key="index" @click="selectDate(item.value)">
							{{ item.label }}
						</view>
					</view>

					<!-- 附近筛选（距离） -->
					<view v-if="popTab == 'distance'" class="filter-group">
						<view class="distance-item" :class="{ active: item.value === selectedDistance }"
							v-for="(item, index) in distanceOptions" :key="index" @click="selectDistance(item.value)">
							{{ item.label }}
						</view>
					</view>
				</view>

				<!-- 操作按钮：重置、完成 -->
				<view class="filter-buttons">
					<view class="reset-btn" @click="reset">重置</view>
					<view class="confirm-btn" @click="confirm">完成</view>
				</view>
			</view>
			<!-- 遮罩层 - 更新遮罩层显示逻辑 -->
			<view class="popup-mask" v-if="activeTab" @click="closeAllPopups" @touchmove.prevent.stop>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "FilterPanel",
		props: {
			// 日期筛选选项（父组件可传入）
			dateOptions: {
				type: Array,
				default: () => [{
						label: "今日可约",
						value: "today",
					},
					{
						label: "近两日可约",
						value: "twoDays",
					},
					{
						label: "近三日可约",
						value: "threeDays",
					},
				],
			},
			// 距离筛选选项（父组件可传入）
			distanceOptions: {
				type: Array,
				default: () => [{
						label: "500m",
						value: 0.5,
					},
					{
						label: "2km",
						value: 2,
					},
					{
						label: "5km",
						value: 5,
					},
					{
						label: "10km",
						value: 10,
					},
					{
						label: "20km",
						value: 20,
					},
				],
			},
			// 标签选项（父组件可传入，也可使用默认值）
			tabOptions: {
				type: Array,
				default: () => [
					{
						label: "服务时间",
						value: "time",
					},
					{
						label: "附近",
						value: "distance",
					},
				],
			},
		},
		data() {
			return {
				popTab: "", // 筛选框中的tab
				activeTab: "", // 初始状态：没有选中的标签
				selectedDate: "", // 选中的日期值
				selectedDistance: "", // 选中的距离值
			};
		},
		methods: {
			// 处理Tab点击
			handleTabClick(tabValue) {
				// 如果点击已选中的Tab，则关闭筛选面板
				console.log(111111)
				if (this.activeTab == tabValue) {
					this.activeTab = "";
					this.reset(); // 重置筛选条件
				} else {
					// 切换到新的Tab
					this.activeTab = tabValue;
					this.popTab = tabValue;
				}
			},
			// 选择日期
			selectDate(value) {
				this.selectedDistance = "";
				this.selectedDate = value;
			},
			// 选择距离
			selectDistance(value) {
				this.selectedDate = "";
				this.selectedDistance = value;
			},
			// 重置筛选（清空所有选中状态）
			reset() {
				this.selectedDate = "";
				this.selectedDistance = "";
			},
			// 完成筛选（向父组件传递当前Tab的筛选结果）
			confirm() {
				const result = {
						selectedDistance: this.selectedDistance,
						selectedDate: this.selectedDate,
					} 
				this.$emit("filterConfirm", result);
				// 确认后关闭筛选面板
				this.activeTab = "";
			},
			//
			closeAllPopups() {
				this.activeTab = "";
			},
		},
	};
</script>
<style scoped lang="less">
	// 定义变量
	@primary-color: #ff3344;
	@border-color: #ddd;
	@light-border: #eee;
	@text-color: #333;
	@padding-base: 20rpx;
	@radius-base: 10rpx;
	@btn-radius: 10rpx;
	@transition-time: 0.3s;

	.filter {
		.filter-panel {
			position: relative;
			padding: @padding-base;
			background-color: #fff;
			// 为绝对定位的filter-pop提供参照

			// Tab栏样式
			.filter-tabs {
				display: flex;
				z-index: 500;

				.tab-item {
					flex: 1;
				
					text-align: center;
					position: relative;
					cursor: pointer;
					transition: color @transition-time;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 37rpx;
					text-align: center;
					font-style: normal;

					.sq-icon {
						width: 16rpx;
						height: 16rpx;
						margin-left: 8rpx;
					}

					&.active {
						color: @primary-color;
					}
				}
			}

			// 筛选面板样式 - 默认隐藏
			.filter-pop {
				z-index: 998;
				background-color: #fff;
				position: absolute;
				left: 0;
				right: 0;
				top: 100%;
				// 添加阴影增强层次感
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
				// 默认隐藏
				max-height: 0;
				overflow: hidden;
				transition: max-height @transition-time ease-out,
					padding @transition-time ease-out;

				// 显示状态
				&.show {
					max-height: 800rpx; // 足够大的值以容纳内容
				}

				// 隐藏状态
				&.hide {
					max-height: 0;
				}

				// 筛选内容区样式
				.filter-content {
					padding: 20rpx 30rpx 0 30rpx;

					.filter-group {
						display: flex;
						flex-wrap: wrap;
						column-gap: 17rpx;
						row-gap: 20rpx;

						// 筛选选项通用样式
						.filter-item,
						.distance-item {
							width: 160rpx;
							height: 60rpx;
							background: #f6f4f5;
							border-radius: 10rpx;
							font-family: DINPro, DINPro;
							font-weight: 400;
							font-size: 26rpx;
							color: #333333;
							line-height: 33rpx;
							text-align: left;
							font-style: normal;
							display: flex;
							align-items: center;
							justify-content: center;

							&.active {
								background-color: #ffecf0;
								font-weight: 500;
								color: #e8101e;
								border-color: @primary-color;
							}
						}
					}
				}

				// 操作按钮样式
				.filter-buttons {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 30rpx 30rpx 30rpx;

					.reset-btn,
					.confirm-btn {
						width: 334rpx;
						height: 86rpx;
						background: #f6f4f5;
						border-radius: @btn-radius;
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
						line-height: 45rpx;
						text-align: left;
						font-style: normal;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.reset-btn {
						background-color: #f6f4f5;
					}

					.confirm-btn {
						background-color: @primary-color;
						color: #fff;
						border: none;
					}
				}
			}
		}
	}

	/* 弹框遮罩层 */
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: transparent;
		z-index: 400;
		transition: all 0.3s ease;
	}
</style>