<template>
	<uni-nav-bar title="患教学堂" fixed color="#8B2316" height="140rpx" :border="false" backgroundColor="#eeeeee"></uni-nav-bar>
	<view class="page">
		<!-- 顶部标题栏 -->
		
		 <view class="top">
			 
			 <!-- 选项卡 -->
			 <view class="tabs">
			 	<view class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
			 		患教文库
			 	</view>
			 	<view class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
			 		患教视频
			 	</view>
			 	<view class="tab-item" :class="{ active: activeTab === 2 }" @click="switchTab(2)">
			 		常见问题
			 	</view>
			 </view>
			 
			 <!-- 筛选栏 -->
			 <view class="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">
			 		<text>最新</text>
			 		<up-image  :src="upImg" width="20rpx" height="26rpx" ></up-image>
			 	</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>
		
		<!-- 筛选弹窗 -->
		<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.name }}
					</view>
				</view>
				
				<!-- 底部按钮 -->
				<view class="filter-buttons">
					<view class="btn-reset" @click="resetFilter">重置</view>
					<view class="btn-confirm" @click="confirmFilter">确定</view>
				</view>
			</view>
		</view>
		
		<!-- 文章列表 -->
		<scroll-view class="article-list" scroll-y>
			<view class="article-item" v-for="(article, index) in articleList" :key="index" @click="goToDetail(article)">
				<image class="article-image" :src="article.image" mode="aspectFill"></image>
				<view class="article-content">
					<view class="article-title">{{ article.title }}</view>
					<view class="article-meta">
						<view class="date-tag" v-if="article.isToday">今日</view>
						<view class="date" v-else>{{ article.date }}</view>
						<view class="stats">
							<view class="stat-item">
								<uni-icons type="eye" size="12" color="#999"></uni-icons>
								<text>{{ article.views }}</text>
							</view>
							<view class="stat-item">
								<uni-icons type="heart" size="12" color="#999"></uni-icons>
								<text>{{ article.likes }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部导航栏 -->
		
	</view>
	<CustomTabbar></CustomTabbar>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow } from "@dcloudio/uni-app";
	import CustomTabbar from '@/components/tabBar/tabBar.vue';
	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"
	
	// 响应式数据
	const activeTab = ref(0);
	const showFilter = ref(false);
	const isFilterActive = ref(false);
	
	// 筛选标签数据
	const filterTags = ref([
		{ name: '甲型肝炎', selected: false },
		{ name: '乙型肝炎', selected: false },
		{ name: '丙型肝炎', selected: false },
		{ name: '药物肝', selected: false },
		{ name: '自免肝', selected: false },
		{ name: '酒精肝', selected: false },
		{ name: '脂肪肝', selected: false },
		{ name: '肝纤维化', selected: false },
		{ name: '肝硬化', selected: false },
		{ name: '肝癌', selected: false },
		{ name: '肝囊虫', selected: false },
		{ name: '肝移植', selected: false },
		{ name: '胆结石', selected: false },
		{ name: '胆囊炎', selected: false },
		{ name: '其他疾病', selected: false },
		{ name: '肝脏检查', selected: false },
		{ name: '乙肝五项', selected: false },
		{ name: '肝功能', selected: false },
		{ name: '报告解读', selected: false },
		{ name: '肝炎病毒', selected: false },
		{ name: '传播途径', selected: false },
		{ name: '症状表现', selected: false },
		{ name: '疫苗接种', selected: false },
		{ name: '诊断治疗', selected: false },
		{ name: '抗病毒', selected: false },
		{ name: '干扰素', selected: false },
		{ name: '用药', selected: false },
		{ name: '耐药', selected: false },
		{ name: '保肝降酶', selected: false },
		{ name: '毒副反应', selected: false },
		{ name: '治愈停药', selected: false },
		{ name: '肝炎复发', selected: false },
		{ name: '预后预防', selected: false },
		{ name: '日常生活', selected: false },
		{ name: '饮食营养', selected: false },
		{ name: '养肝护肝', selected: false },
		{ name: '一图读懂', selected: false },
		{ name: '误区辟谣', selected: false },
		{ name: '生儿育女', selected: false },
		{ name: '医保报销', selected: false },
		{ name: '肝胆相照', selected: false },
		{ name: '精华好文', selected: false },
		{ name: '肝病故事', selected: false },
		{ name: '名医科普', selected: false },
		{ name: '肝病现状', selected: false },
		{ name: '中医中药', selected: false }
	]);
	
	// 模拟文章数据
	const articleList = ref([
		{
			id: 1,
			image: '/static/liver_knowledge.png',
			title: '甩掉"乙肝大国"的帽子后，中国第一大肝病变成了它，正在侵...',
			date: '今日',
			isToday: true,
			views: 185,
			likes: 0
		},
		{
			id: 2,
			image: '/static/doctor_liver.png',
			title: '从你我做起，让肝炎止步',
			date: '08-01',
			isToday: false,
			views: 315,
			likes: 0
		},
		{
			id: 3,
			image: '/static/liver_health.png',
			title: '这6个指标正常，说明你肝脏健康',
			date: '07-25',
			isToday: false,
			views: 1033,
			likes: 0
		},
		{
			id: 4,
			image: '/static/diet_liver.png',
			title: '无需节食！吃饭一个改变，脂肪肝好转了！4个月肝脏脂肪减...',
			date: '07-18',
			isToday: false,
			views: 1829,
			likes: 1
		},
		{
			id: 5,
			image: '/static/cooking_spices.png',
			title: '这种家家都有的调料，吃太多会增加肝癌风险？很多人已超标！',
			date: '07-11',
			isToday: false,
			views: 2992,
			likes: 0
		},
		{
			id: 6,
			image: '/static/liver_protection.png',
			title: '肝炎拖成肝硬化，下一步就是肝癌，养肝护肝，记住这3点',
			date: '07-04',
			isToday: false,
			views: 1993,
			likes: 1
		}
	]);
	
	// 方法
	const switchTab = (index) => {
		activeTab.value = index;
	};
	
	const goToDetail = (article) => {
		console.log('查看文章详情:', article);
		// 跳转到详情页
	};
	
	const goToPage = (page) => {
		console.log('跳转到页面:', page);
		// 根据页面名称进行跳转
		if (page === 'index') {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	};
	
	// 筛选相关方法
	const showFilterPopup = () => {
		showFilter.value = true;
	};
	
	const hideFilterPopup = () => {
		showFilter.value = false;
	};
	
	const toggleTag = (index) => {
		filterTags.value[index].selected = !filterTags.value[index].selected;
	};
	
	const resetFilter = () => {
		filterTags.value.forEach(tag => {
			tag.selected = false;
		});
		isFilterActive.value = false;
	};
	
	const confirmFilter = () => {
		// 检查是否有选中的标签
		const hasSelected = filterTags.value.some(tag => tag.selected);
		isFilterActive.value = hasSelected;
		
		// 执行筛选逻辑
		if (hasSelected) {
			const selectedTags = filterTags.value.filter(tag => tag.selected).map(tag => tag.name);
			console.log('选中的标签:', selectedTags);
			// 这里可以添加实际的筛选逻辑
		}
		
		showFilter.value = false;
	};
	
	onShow(() => {
		console.log('患教学堂页面显示');
	});
</script>

<style lang="scss" scoped>
// 颜色变量
$primary-color: #ff6b6b;
$theme-color: #8B2316;
$white: #fff;
$gray-bg: #f5f5f5;
$gray-light: #eee;
$gray-medium: #999;
$gray-dark: #666;
$text-color: #333;

// 尺寸变量
$border-radius: 8px;
$border-radius-small: 6px;
$padding: 15px;
$padding-small: 10px;

.page {
	background-color: $gray-bg;
	height: calc(100vh - 140rpx);
	display: flex;
	overflow-y: hidden;
	flex-direction: column;
 // 为固定导航栏留出空间
}
.top{
	width:100%;
	position: fixed;
	top:140rpx;
}
// 选项卡
.tabs {
	background-color: $white;
	display: flex;
	border-bottom: 1px solid $gray-light;

	.tab-item {
		flex: 1;
		text-align: center;
		padding: $padding 0;
		font-size: 16px;
		color: $gray-dark;
		position: relative;

		&.active {
			color: $theme-color;
			

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 30px;
				height: 2px;
				
			}
		}
	}
}

// 筛选栏
.filter-bar {
	background-color: $white;
	padding: $padding-small $padding;
	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;
	}
}

// 文章列表
.article-list {
	position: fixed;
	height:calc(100vh - 450rpx);
	top: 342rpx;
	
	padding-bottom: 130rpx;
	.article-item {
		background-color: $white;
		margin-bottom: $padding-small;
		border-radius: $border-radius;
		padding: $padding;
		display: flex;
		gap: 12px;

		.article-image {
			width: 80px;
			height: 80px;
			border-radius: $border-radius-small;
			flex-shrink: 0;
		}

		.article-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.article-title {
				font-size: 16px;
				color: $text-color;
				line-height: 1.4;
				margin-bottom: $padding-small;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.article-meta {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.date-tag {
					background-color: $primary-color;
					color: $white;
					font-size: 12px;
					padding: 2px 6px;
					border-radius: 3px;
				}

				.date {
					font-size: 12px;
					color: $gray-medium;
				}

				.stats {
					display: flex;
					gap: $padding;

					.stat-item {
						display: flex;
						align-items: center;
						gap: 3px;
						font-size: 12px;
						color: $gray-medium;
					}
				}
			}
		}
	}
}

// 底部导航栏
.bottom-nav {
	background-color: $white;
	display: flex;
	border-top: 1px solid $gray-light;
	padding: 8px 0;

	.nav-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		font-size: 12px;
		color: $gray-medium;

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

		text {
			font-size: 10px;
		}
	}
}

// 筛选弹窗样式
.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:329rpx;
	
		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 24rpx;
				border-radius: 30rpx;
				font-size: 26rpx;
				border: 2rpx solid #efefef;
				transition: all 0.3s ease;
				
				&.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;
			
			.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>
