<template>
	<uni-nav-bar
		left-icon="left" 
		title="诊疗指南" 
		@clickLeft="goBack" 
		fixed 
		color="#8B2316" 
		height="140rpx" 
		:border="false" 
		backgroundColor="#eeeeee"
	></uni-nav-bar>
	<view class="zhinan-page" v-if="tab=='zhinan'">
		<!-- 导航栏 -->
		
		
		<!-- 固定搜索栏 -->
		<view class="search-container-fixed filter-bar">
			<view class="search-box">
				<uni-icons type="search" size="16" color="#999"></uni-icons>
				<text class="search-text">搜索</text>
			</view>
			
			<view class="divider"></view>
			<view class="filter-item" @click="showFilterPopup">
				<text>筛选</text>
				<up-image  :src="isFilterActive ? filterOn : filter" width="30rpx" height="30rpx" ></up-image>
			</view>
		</view>
		
		<!-- 指南分类网格 -->
		<view class="guidelines-grid">
			<view 
				class="guideline-item" 
				v-for="(item, index) in guidelineCategories" 
				:key="index"
				@click="enterCategory(item)"
			>
				<view class="item-image" >
					<image :src="docUrl+item.imgs" mode="widthFix" class="category-icon"></image>
				</view>
				<view class="item-content">
					<text class="category-title">{{ item.name }}</text>
					<text class="category-count">(共{{ item.total }}份)</text>
				</view>
			</view>
		</view>
		 <view class="total">
			 <up-image  :src="star1" width="85rpx" height="9rpx" ></up-image>
		     <view class="count"> {{total}}份文献</view>
		  <up-image  :src="star2" width="85rpx" height="9rpx" ></up-image>
		 </view>
	
	</view>
	<view class="qikan-page" v-else-if="tab=='qikan'">
		<!-- 导航头部 -->
		
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 标签切换区域 -->
			<view class="tab-section">
				<view class="tab-container">
					<view 
						class="tab-item" 
						:class="{ active: activeTab === 'daichawenxian' }"
						@click="switchTabQikan('daichawenxian')"
					>
						<text class="tab-text">代查文献</text>
						<view class="tab-underline" >
							<up-image  :src="activeImg" width="48rpx" height="18rpx" v-if="activeTab === 'daichawenxian'"></up-image>
						</view>
					</view>
					<view 
						class="tab-item" 
						:class="{ active: activeTab === 'yingwenwenxian' }"
						@click="switchTabQikan('yingwenwenxian')"
					>
						<text class="tab-text">英文文献</text>
						<view class="tab-underline">
							<up-image  :src="activeImg" width="48rpx" height="18rpx"  v-if="activeTab === 'yingwenwenxian'"></up-image>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 代查文献内容 -->
			<view class="content-section" v-if="activeTab === 'daichawenxian'">
				<!-- 顶部图标和说明 -->
				
				 <up-image  :src="paperImg" width="100%" ></up-image>
				<!-- 表单区域 -->
				<view class="form-section">
					<!-- 接收邮箱 -->
					<view class="form-group formemail">
						<view class="form-label">
							<text>接收邮箱</text>
							<text class="required">*</text>
						</view>
						<view class="input-container">
							<input 
								class="form-input"
								type="text"
								placeholder="请输入文献接收邮箱"
								v-model="formData.email"
							/>
						</view>
					</view>
					<!-- 文献单元列表 -->
					<view 
						class="from-cell literature-item" 
						v-for="(literature, index) in literatureList" 
						:key="literature.id"
					>
						<!-- 文献类型标签 -->
						<view class="form-group wenxian">
							<view class="tag-container">
								<view class="tag-item active">文献{{ index + 1 }}</view>
							</view>
						</view>
						
						<view class="formbox">
							<!-- 文献名称 -->
							<view class="form-group">
								<view class="form-label">
									<text>文献名称</text>
									<text class="required">*</text>
								</view>
								<view class="input-container">
									<textarea 
										class="form-textarea"
										type="text"
										placeholder="不支持关键字/广泛查询"
										v-model="literature.literatureName"
									/>
								</view>
							</view>
							
							<!-- 作者 -->
							<view class="form-group">
								<view class="form-label">
									<text>作者</text>
								</view>
								<view class="input-container">
									<input 
										class="form-input"
										type="text"
										placeholder="请输入作者姓名"
										v-model="literature.author"
									/>
								</view>
							</view>
							
							<!-- 期刊名称 -->
							<view class="form-group">
								<view class="form-label">
									<text>期刊名称</text>
								</view>
								<view class="input-container">
									<input 
										class="form-input"
										type="text"
										placeholder="请输入期刊名称"
										v-model="literature.journalName"
									/>
								</view>
							</view>
						</view>
						
						<!-- 删除按钮 -->
						<view class="delbox" v-if="literatureList.length > 1" @click="removeLiterature(index)">
							<up-image :src="delImg" width="40rpx" height="52rpx"></up-image>
						</view>
						
						<!-- 文献分隔线 -->
						<view class="literature-divider" v-if="index < literatureList.length - 1"></view>
					</view>
					<!-- 添加代查文献按钮 -->
					<view class="add-literature-section" v-if="literatureList.length < 5">
						<view class="add-button" @click="addLiterature">
							<up-icon name="plus" size="18" color="#4A90E2"></up-icon>
							<text class="add-text">添加代查文献</text>
						</view>
						<view class="limit-tip">
							<view class="imgbox">
								<up-image :src="countImg" width="186rpx" height="74rpx"></up-image>
							</view>
							<view class="count">还可添加{{ 5 - literatureList.length }}篇</view>
						</view>
					</view>
				</view>
				
				<!-- 常见问题 -->
				<view class="faq-section">
					<up-image  :src="questionImg" width="100%" mode="widtFix" height="540rpx"></up-image>
					
				</view>
				<view class="tips">
					<view class="title">注意</view>
					<view class="row">每次至多提交5篇文献代查</view>
					<view class="row">每篇文献代查消耗50肝胆积分，代查成功后扣除</view>
					<view class="row">不支持模糊代查，请尽可能详细提供所需文献信息</view>
				</view>
				<view class="btnbox">
					<up-image  :src="submitImg" width="100%" height="160rpx" mode="widtFix"></up-image>
					
				</view>
			</view>
			
			<!-- 英文文献内容（暂时显示占位内容） -->
			<view class="content-section" v-if="activeTab === 'yingwenwenxian'">
				<view class="placeholder-content">
					<uni-icons type="info" size="60" color="#999"></uni-icons>
					<text class="placeholder-text">英文文献功能正在开发中...</text>
				</view>
			</view>
		</view>
		
		
	</view>
	
	
	
	<!-- 筛选弹窗 -->
	<view class="filter-popup" v-if="showFilter" @click="hideFilterPopup">
		<view class="filter-content" @click.stop>
			<!-- 筛选标签网格 -->
			<view class="filter-tags">
				<view 
					class="tag-item" 
					v-for="(tag, index) in filterTags" 
					:key="index"
					:class="{ active: tag.selected }"
					@click="toggleTag(index)"
				>
					{{ tag.DES }}
			</view>
			</view>
			
			<!-- 底部按钮 -->
			<view class="filter-buttons">
				<view class="btn-reset" @click="resetFilter">重置</view>
				<view class="btn-confirm" @click="confirmFilter">确定</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { onShow } from "@dcloudio/uni-app";
	import upImg from "@/static/cb_up.png"
	import downImg from "@/static/cb_up.png"
	import filter from "@/static/cb_screen_no.png"
	import filterOn from "@/static/cb_screen_yes.png"
	import star1 from "@/static/xingxing1.png"
	import star2 from "@/static/xingxing2.png"
	import paperImg from "@/static/paper_bg.png"
	import activeImg from "@/static/route.png"
	import emailImg from "@/static/email_bg.png"
	import countImg from "@/static/sheng_bg.png"
	import questionImg from "@/static/paper_question.png"
	import submitImg from "@/static/paper_submit.png"
	import delImg from "@/static/delete_paper.png"
	import api from '@/api/api.js'
	import docUrl from "@/utils/docUrl.js"
  import navTo from '@/utils/navTo.js';
	const total=ref(0);
	const tab=ref('zhinan')
	// 响应式数据
	const searchText = ref('');
	const guidelineCategories = ref([]);
	const isFilterActive=ref(false)
	// 指南库检索结果（如需在列表页使用）
	const searchLibraryList = ref([]);
	const filterTags = ref([]);
	const keywords = ref('');
	// 页面加载
	onMounted(() => {
		loadGuideTypes();
		loadSearchLibrary();
		loadGuideTags();
	});
	const showFilter=ref(false);
	// 筛选弹窗相关方法
	const showFilterPopup = () => {
		showFilter.value = true;
	};
	
	const hideFilterPopup = () => {
		showFilter.value = false;
	};
	
	const toggleTag = (index) => {
		filterTags.value[index].selected = !filterTags.value[index].selected;
		isFilterActive.value = filterTags.value.some(tag => tag.selected);
	};
	
	const resetFilter = () => {
		// 清空所有已选标签
		filterTags.value.forEach(tag => tag.selected = false);
		// 关闭筛选激活态
		isFilterActive.value = false;
		// 清空关键字
		keywords.value = '';
		// 刷新列表数据（可按需保留或移除）
		// currentPage.value = 1;
		// hasMoreData.value = true;
		//loadVideoData(true);
	};
	
	const confirmFilter = () => {
		const selectedTags = filterTags.value.filter(tag => tag.selected);
		console.log('选中的筛选标签:', selectedTags);
		for (var i = 0; i < selectedTags.length; i++) {
			  if(keywords.value){
				  keywords.value+=","+selectedTags[i].DES
			  }else{
				  keywords.value=selectedTags[i].DES 
			  }
			
		 navTo({
			 url:'/pages_app/hot/hot?keywords='+encodeURIComponent(keywords.value)
		 })
			
		}
		isFilterActive.value=true;
		hideFilterPopup();
		// 根据选中的标签重新加载数据
		
	};

	onShow(() => {
		// 页面显示时可以刷新数据
		loadGuideTags();
	});

	// 加载指南分类（guideType）
	const loadGuideTypes = async () => {
		try {
			const res = await api.guideType({});
		    guidelineCategories.value=res.data;
			for (var i = 0; i < res.data.length; i++) {
				total.value=total.value+res.data[i].total
			}
			
		} catch (e) {
			console.error('加载指南分类失败:', e);
		}
	};

	// 调用治疗指南列表（searchLibraryU）
	const loadSearchLibrary = async () => {
		try {
			const res = await api.searchLibraryU({
				   page: 1,
				 pageSize: 20,
				 type:1,
				  keywords:'',
			});
			if(res && res.code === 200) {
				searchLibraryList.value = res.data
			}
			
		} catch (e) {
			console.error('加载指南库失败:', e);
		}
	};

	// 加载指南标签列表
	const loadGuideTags = async () => {
		try {
			const res = await api.guideTag({
				type:3
			});
			console.log('指南标签API响应:', res);
			if(res && res.code === 200 && res.data) {
				// 将API返回的标签数据转换为筛选标签格式
				filterTags.value = res.data.map(tag => ({
					...tag,
					selected: false
				}));
				console.log('指南标签加载成功:', filterTags.value);
			}
		} catch (e) {
			console.error('加载指南标签失败:', e);
		}
	};

	// 进入指南分类
	const enterCategory = (item) => {
		navTo({
			url: `/pages_app/zhinanList/zhinanList?typeUuid=${item.uuid}&title=${item.name}`
		});
	};

	// 显示筛选对话框
	const showFilterDialog = () => {
		console.log('显示筛选');
		// 可以实现筛选弹窗
	};

	// 切换底部标签
	const switchTab = (tabName) => {
		console.log('切换到:', tabName);
		tab.value=tabName;
	};

	// 返回
	const goBack = () => {
		uni.navigateBack({
			fail() {
				uni.redirectTo({
					url: '/pages/index/index'
				});
			}
		});
	};
	// 响应式数据
	const activeTab = ref('daichawenxian');
	
	// 表单数据
	const formData = ref({
		email: '',
		literatureName: '',
		author: '',
		journalName: ''
	});
	
	// 文献列表数据
	const literatureList = ref([
		{
			id: 1,
			literatureName: '',
			author: '',
			journalName: ''
		}
	]);
	
	// 常见问题数据
	const faqList = ref([
		{
			question: '如何查找文献？',
			answer: '请提供准确的文献标题、作者和期刊信息，我们将为您查找并发送到指定邮箱。',
			expanded: false
		},
		{
			question: '查找需要多长时间？',
			answer: '通常在1-3个工作日内完成文献查找并发送到您的邮箱。',
			expanded: false
		},
		{
			question: '支持哪些文献类型？',
			answer: '支持国内外期刊论文、会议论文、学位论文等多种文献类型。',
			expanded: false
		}
	]);
	
	// 切换顶部标签
	const switchTabQikan = (tab) => {
		activeTab.value = tab;
	};
	
	// 切换底部导航
	const switchBottomTab = (tab) => {
		if (tab === 'zhinan') {
			uni.navigateTo({
				url: '/pages_app/zhinan/zhinan'
			});
		} else if (tab === 'tools') {
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			});
		}
	};
	
	// 添加文献
	const addLiterature = () => {
		if (literatureList.value.length >= 5) {
			uni.showToast({
				title: '最多只能添加5篇文献',
				icon: 'none'
			});
			return;
		}
		
		const newLiterature = {
			id: Date.now(), // 使用时间戳作为唯一ID
			literatureName: '',
			author: '',
			journalName: ''
		};
		
		literatureList.value.push(newLiterature);
		
		uni.showToast({
			title: '添加成功',
			icon: 'success'
		});
	};
	
	// 删除文献
	const removeLiterature = (index) => {
		if (literatureList.value.length <= 1) {
			uni.showToast({
				title: '至少保留一篇文献',
				icon: 'none'
			});
			return;
		}
		
		literatureList.value.splice(index, 1);
		
		uni.showToast({
			title: '删除成功',
			icon: 'success'
		});
	};
	
	// 切换FAQ展开状态
	const toggleFaq = (index) => {
		faqList.value[index].expanded = !faqList.value[index].expanded;
	};
</script>

<style lang="scss" scoped>
// SCSS Variables
$primary-color: #8B2316;
$bg-color: #f5f5f5;
$white: #fff;
$text-primary: #333;
$text-secondary: #666;
$text-light: #999;
$primary-color: #ff6b6b;
$theme-color: #8B2316;
$white: #fff;
$gray-bg: #f5f5f5;
$gray-light: #eee;
$gray-medium: #999;
$gray-dark: #666;
$text-color: #333;
$nav-height: 140rpx;
$border-color: #e0e0e0;
// 尺寸变量
$border-radius: 8px;
$border-radius-small: 6px;
$padding: 15px;
$padding-small: 10px;
$accent-color: #4A90E2;
.zhinan-page {
	background-color: $bg-color;
	min-height: 100vh;
	padding-top: 20rpx; // 导航栏高度
}

// 固定搜索容器
.search-container-fixed {
	position: fixed;
	top: 140rpx; // 导航栏高度
	left: 0;
	right: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30rpx 30rpx;
	background-color: $white;
	gap: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
// 筛选栏
.filter-bar {
	background-color: $white;
	display: flex;
	align-items: center;
	border-bottom: 1px solid $gray-light;

	.search-box {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 5px;

		.search-text {
			font-size: 14px;
			color: $gray-medium;
		}
	}

	.divider {
		width: 1px;
		height: 16px;
		background-color: $gray-medium;
		margin: 0 $padding;
	}

	.filter-item {
		flex:1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 3px;
		font-size: 14px;
		color: #999;
	}
}

// 指南网格
.guidelines-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 30rpx;
	gap: 20rpx;
	margin:0 30rpx;
	margin-top: 100rpx; // 为固定搜索栏留出空间 (搜索栏高度约80rpx + 边距)

	.guideline-item {
		
		width: calc(33.333% - 14rpx);
		background-color: $white;
		
		overflow: hidden;
		
		transition: transform 0.2s ease;

		&:active {
			transform: scale(0.98);
		}

		.item-image {
			width: 100%;
	
			overflow: hidden; /* 防止溢出 */
		}

			.category-icon {
			width: 100%;
			height:320rpx; /* 高度自适应 */
			display: block; /* 去除底部间隙 */
		}

		.item-content {
			padding: 20rpx 16rpx;
			text-align: center;

			.category-title {
				display: block;
				font-size: 26rpx;
				color: $text-primary;
				line-height: 1.4;
				margin-bottom: 8rpx;
			}

			.category-count {
				font-size: 22rpx;
				color: $text-light;
			}
		}
	}
}

// 底部导航
.bottom-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: $white;
	display: flex;
	align-items: center;
	justify-content: space-around;
	border-top: 1rpx solid #f0f0f0;
	z-index: 100;

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 100rpx;
		gap: 8rpx;
         &.active {
				color: #fff;
				background-color: #8B2316;
			}
		.tab-icon {
			width: 44rpx;
			height: 44rpx;
		}

		.tab-text {
			font-size: 32rpx;
			color: $text-secondary;
			&.active {
							color: #fff;
							
						}
		}
	}
	.tab-item:nth-child(2){
		border-right: 2rpx solid #eee;
		border-left: 2rpx solid #eee;
	}
}

// 为网格添加底部边距，避免被tabbar遮挡
.guidelines-grid {
	padding-bottom:0rpx;
	background-color: $white;
}
.total{
	margin-top: 0rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom:40rpx;
	.count{
		margin-top: 50rpx;
		font-size: 30rpx;
		color:#999;
	}
}

.qikan-page {
	background:#f6f6f6;
	min-height: 100vh;
	padding-top:0rpx;
	padding-bottom: 100rpx; // 为底部导航预留空间
}

.main-content {
	flex: 1;
}

// 标签切换区域 - 固定在顶部
.tab-section {
	position: fixed;
	top: $nav-height; // 140rpx
	left: 0;
	right: 0;
	z-index: 80;
	background-color: #a5d9fe;
	padding: 0 30rpx;
	
	
	.tab-container {
		display: flex;
		align-items: center;
		height: 100rpx;
		
		.tab-item {
			position: relative;
			margin-right: 60rpx;
			padding: 20rpx 0;
			
			.tab-text {
				font-size: 32rpx;
				color:#333!important;
				font-weight: 500;
			}
			
			&.active {
				.tab-text {
					color: $primary-color;
					font-weight: 600;
				}
			}
			
			.tab-underline {
				position: absolute;
				bottom:15rpx;
				left: 50%;
				right: 0;
				transform: translateX(-50%);
				height: 18rpx;
				
				
			}
		}
	}
}

// 内容区域
.content-section {
	background-color: $bg-color;
	min-height: calc(100vh - 340rpx);
	margin-top: 100rpx; // 为固定的标签切换区域留出空间
}

// 头部横幅
.header-banner {
	background: linear-gradient(135deg, #87CEEB, #B0E0E6);
	margin: 20rpx 30rpx;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	
	.banner-content {
		display: flex;
		align-items: center;
		
		.icon-container {
			position: relative;
			margin-right: 30rpx;
			
			.sparkle-icon {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				font-size: 24rpx;
			}
		}
		
		.banner-text {
			flex: 1;
			
			.main-title {
				font-size: 48rpx;
				font-weight: bold;
				color: $text-primary;
				margin-bottom: 10rpx;
			}
			
			.sub-title {
				font-size: 24rpx;
				color: $text-secondary;
				line-height: 1.4;
			}
		}
	}
}

// 表单区域
.form-section {
	
	margin: -156rpx 30rpx  20rpx;
	border-radius: 20rpx;
	padding: 0rpx 0rpx ;
	.wenxian{
		margin-top: 40rpx;
		
		
		overflow: hidden;
	}
	.from-cell{
		position: relative;
		.delbox{
			top:10rpx;
			right:30rpx;
			position: absolute;
		}
	}
	.formbox{
		padding:30rpx 30rpx 30rpx;
		background:#fff url("@/static/email_bg.png") no-repeat 0rpx 0;
		background-size: 100% 148rpx;
		border-radius: 10rpx;
		position: relative;
		z-index:8;
	}
	.formemail{
		padding:0 30rpx;
		height: 148rpx;
		display: flex;
		align-items:center;
		border-radius: 20rpx;
		background:#fff url("@/static/email_bg.png") no-repeat 0rpx 0!important;
		background-size: cover!important;
	}
	
	// 文献分隔线
	.literature-divider {
		height: 20rpx;
		margin: 20rpx 0;
		background-color: #f0f0f0;
		border-radius: 10rpx;
	}
	
	.form-group {
	
		margin-bottom: 40rpx;
		display: flex;
		
		background-size: 100% 652rpx;
		overflow: hidden;
		&:last-child {
			margin-bottom: 0;
		}
		
		.form-label {
			display: flex;
			align-items: center;
			width:160rpx;
			font-size: 28rpx;
			color: $text-primary;
			font-weight: 500;
			
			.required {
				color: #ff4757;
				margin-left: 8rpx;
			}
		}
		
		.input-container {
			flex:1;
			.form-input,.form-textarea{
				width: 100%;
				height: 80rpx;
				padding: 0 20rpx;
				background:#f6f6f6;
				border: 2rpx solid $border-color;
				border-radius: 12rpx;
				font-size: 28rpx;
				color: $text-primary;
				background-color: $white;
				box-sizing: border-box;
				&::placeholder {
					color: $text-light;
				}
				
				&:focus {
					border-color: $accent-color;
				}
			}
			.form-textarea{
				padding:20rpx;
				height: 200rpx;
			}
		}
		
		.tag-container {
			.tag-item {
				display: inline-block;
				padding: 16rpx 32rpx;
				background-color: #008aff;
				color: $white;
				border-radius: 10rpx 10rpx 0 0;
				font-size: 24rpx;
				font-weight: 500;
			}
		}
	}
	.from-cell .form-group:nth-child(1){
		margin-bottom: 0;
	}
	.formbox  .form-group:nth-child(1){
		margin-bottom: 40rpx;
	}
	
}

// 添加文献区域
.add-literature-section {
	position: relative;
	margin-top: 40rpx;
	padding-top: 40rpx;
	border-top: 2rpx solid $border-color;
	
	.add-button {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		margin:0 20rpx;
		border: 2rpx solid #0197f1;
		border-radius:40rpx;
		background-color: rgba(74, 144, 226, 0.05);
		
		.add-text {
			margin-left: 10rpx;
			font-size: 28rpx;
			color: #0197f1;
			font-weight: 500;
		}
	}
	
	.limit-tip {
		position: absolute;
		right:0;
		top:-10rpx;
		text-align: center;
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #fff;
		
	    width: 186rpx;
		height:74rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		.imgbox{
			top:0;
			position: absolute;
		}
		.count{
			margin-top: -20rpx;
			position: relative;
			z-index:3;
		}
	}
}

// 常见问题区域
.faq-section {
	margin: 0rpx 30rpx;
	background-color: $white;
	border-radius: 20rpx;
	padding: 1rpx 1rpx;
	
}
.tips{
	font-size: 24rpx;
	margin:30rpx 30rpx;
	color:#999;
}
.btnbox{
  margin:0 30rpx;
}
// 占位内容
.placeholder-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 400rpx;
	
	.placeholder-text {
		margin-top: 30rpx;
		font-size: 28rpx;
		color: $text-light;
	}
}
// 筛选弹窗样式
.filter-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	// background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	
	z-index: 9999;

	.filter-content {
		margin-top:247rpx;
	      overflow-y:scroll;
		background-color: $white;
		// border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx 30rpx 60rpx;
		width: 100%;
		max-height: 80vh;
		
		.filter-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			margin-bottom: 60rpx;
			max-height: 65vh;
			overflow-y: auto;
			
			.tag-item {
				background-color: #f8f8f8;
				color: $gray-dark;
				padding: 8rpx 0; /* 去掉左右padding，仅保留上下 */
				border-radius: 30rpx;
				font-size: 26rpx;
				border: 2rpx solid #efefef;
				transition: all 0.3s ease;
				width: 152rpx; /* 固定宽度 */
				text-align: center; /* 文本居中 */
				
				&.active {
					background-color: #fff;
					color: $theme-color;
					border-color: $theme-color;
				}
			}
		}
		
		.filter-buttons {
			display: flex;
			gap: 20rpx;
			position: fixed;
			bottom: 30rpx;
			left: 30rpx;
			right: 30rpx;
			background-color: #fff; /* 背景色为白色 */
			
			.btn-reset,
			.btn-confirm {
				flex: 1;
				height: 70rpx;
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: 500;
			}
			
			.btn-reset {
				background-color: $white;
				color: $theme-color;
				border: 2rpx solid $theme-color;
			}
			
			.btn-confirm {
				border: 2rpx solid $theme-color;
				background-color: $theme-color;
				color: $white;
			}
		}
	}
}

</style>
