<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">
		<!-- 导航栏 -->
		
		
		<!-- 固定搜索栏 -->
		<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" :style="{ backgroundColor: item.bgColor }">
					<image :src="item.icon" mode="aspectFit" class="category-icon"></image>
				</view>
				<view class="item-content">
					<text class="category-title">{{ item.title }}</text>
					<text class="category-count">(共{{ item.count }}份)</text>
				</view>
			</view>
		</view>
		
		<!-- 底部导航 -->
		<view class="bottom-tabbar">
			<view class="tab-item active" @click="switchTab('zhinan')">
				<text class="tab-text active">诊疗指南</text>
			</view>
			<view class="tab-item" @click="switchTab('qikan')">
				<text class="tab-text">期刊杂志</text>
			</view>
			<view class="tab-item" @click="switchTab('tools')">
				<text class="tab-text">常用工具</text>
			</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"
	// 响应式数据
	const searchText = ref('');
	const guidelineCategories = ref([]);

	// 页面加载
	onMounted(() => {
		initGuidelineData();
	});

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

	// 初始化指南数据
	const initGuidelineData = () => {
		guidelineCategories.value = [
			{
				title: '肝肿瘤相关',
				count: 0,
				bgColor: '#2C2C2C',
				icon: '/static/liver_icon.png',
				category: 'liver'
			},
			{
				title: '感染相关',
				count: 0,
				bgColor: '#9C6BCF',
				icon: '/static/infection_icon.png',
				category: 'infection'
			},
			{
				title: '消化相关',
				count: 0,
				bgColor: '#5CB3E8',
				icon: '/static/digestion_icon.png',
				category: 'digestion'
			},
			{
				title: '中医/中西医结合',
				count: 192,
				bgColor: '#4A90E2',
				icon: '/static/tcm_icon.png',
				category: 'tcm'
			},
			{
				title: '新型冠状病毒肺炎',
				count: 450,
				bgColor: '#1C1C1C',
				icon: '/static/covid_icon.png',
				category: 'covid'
			},
			{
				title: 'AASLD',
				count: 63,
				bgColor: '#FF6B35',
				icon: '/static/aasld_icon.png',
				category: 'aasld'
			},
			{
				title: 'EASL',
				count: 75,
				bgColor: '#1E88E5',
				icon: '/static/easl_icon.png',
				category: 'easl'
			},
			{
				title: '其他指南',
				count: 928,
				bgColor: '#26C6DA',
				icon: '/static/other_icon.png',
				category: 'other'
			},
			{
				title: '国内指南',
				count: 375,
				bgColor: '#42A5F5',
				icon: '/static/domestic_icon.png',
				category: 'domestic'
			},
			{
				title: '共识指导',
				count: 0,
				bgColor: '#66BB6A',
				icon: '/static/consensus_icon.png',
				category: 'consensus'
			},
			{
				title: '专家解读',
				count: 0,
				bgColor: '#FFA726',
				icon: '/static/expert_icon.png',
				category: 'expert'
			}
		];
	};

	// 进入指南分类
	const enterCategory = (item) => {
		console.log('进入分类:', item.category);
		uni.navigateTo({
			url: `/pages/guidelineList/guidelineList?category=${item.category}&title=${item.title}`
		});
	};

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

	// 切换底部标签
	const switchTab = (tabName) => {
		console.log('切换到:', tabName);
		switch(tabName) {
			case 'qikan':
				uni.switchTab({
					url: '/pages/qikan/qikan'
				});
				break;
			case 'tools':
				uni.switchTab({
					url: '/pages/tools/tools'
				});
				break;
		}
	};

	// 返回
	const goBack = () => {
		uni.navigateBack({
			fail() {
				uni.redirectTo({
					url: '/pages/index/index'
				});
			}
		});
	};
</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;

// 尺寸变量
$border-radius: 8px;
$border-radius-small: 6px;
$padding: 15px;
$padding-small: 10px;
.zhinan-page {
	background-color: $bg-color;
	min-height: 100vh;
	padding-top: 140rpx; // 导航栏高度
}

// 固定搜索容器
.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: 0 30rpx;
	gap: 20rpx;
	margin-top: 100rpx; // 为固定搜索栏留出空间 (搜索栏高度约80rpx + 边距)

	.guideline-item {
		width: calc(33.333% - 14rpx);
		background-color: $white;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		transition: transform 0.2s ease;

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

		.item-image {
			height: 160rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.category-icon {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.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: 140rpx;
}
</style>
