<template>
	<uni-nav-bar title="继续教育" fixed color="#8B2316" height="140rpx" :border="false" backgroundColor="#eeeeee"></uni-nav-bar>
	<view class="page">
		<!-- 课程列表 -->
		<view class="course-list">
			<!-- 肝胆精品课 -->
			<view class="course-item" @click="goToCourse('course')">
				<up-image  :src="course" width="94rpx" height="94rpx" ></up-image>
				<view class="course-content">
					<view class="course-title">肝胆精品课</view>
					<view class="course-subtitle">肝胆精品课，筑梦·医路成长</view>
				</view>
				<view class="course-arrow">
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view>

			<!-- 肝胆视频 -->
			<view class="course-item" @click="goToCourse('video')">
				<up-image  :src="videoImg" width="94rpx" height="94rpx" ></up-image>
				<view class="course-content">
					<view class="course-title">肝胆视频</view>
					<view class="course-subtitle">数千集精彩报告等您来看</view>
				</view>
				<view class="course-arrow">
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view>

			<!-- 肝胆课件 -->
			<view class="course-item" @click="goToCourse('ppt')">
				<up-image  :src="pptImg" width="94rpx" height="94rpx" ></up-image>
				<view class="course-content">
					<view class="course-title">肝胆课件</view>
					<view class="course-subtitle">国内专业优质肝胆课件共享平台</view>
				</view>
				<view class="course-arrow">
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view>

			<!-- 病例讨论 -->
			<!-- <view class="course-item" @click="goToCourse('caseDiscussion')">
				<up-image  :src="talkImg" width="94rpx" height="94rpx" ></up-image>
				<view class="course-content">
					<view class="course-title">病例讨论</view>
					<view class="course-subtitle">互帮互助，病例共讨</view>
				</view>
				<view class="course-arrow">
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view> -->

			<!-- 病例荟萃 -->
			<!-- <view class="course-item" @click="goToCourse('caseCollection')">
				<up-image  :src="huicuiImg" width="94rpx" height="94rpx" ></up-image>
				<view class="course-content">
					<view class="course-title">病例荟萃</view>
					<view class="course-subtitle">一线专家临床总结</view>
				</view>
				<view class="course-arrow">
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view> -->

			<!-- 现代肝病学院 -->
			<!-- <view class="course-item" @click="goToCourse('modernHepatology')">
				<up-image  :src="xueyuanImg" width="94rpx" height="94rpx" ></up-image>
				<view class="course-content">
					<view class="course-title">现代肝病学院</view>
					<view class="course-subtitle">一期一关注，绝对收获满满</view>
				</view>
				<view class="course-arrow">
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view> -->

			<!-- 新手教程 -->
			<!-- <view class="course-item" @click="goToCourse('tutorial')">
				<up-image  :src="newerImg" width="94rpx" height="94rpx" ></up-image>
				<view class="course-content">
					<view class="course-title">新手教程</view>
					<view class="course-subtitle">手把手助您用好专家工作室</view>
				</view>
				<view class="course-arrow">
					<uni-icons type="forward" size="16" color="#ccc"></uni-icons>
				</view>
			</view> -->
		</view>
	</view>
	<CustomTabbar></CustomTabbar>
</template>

<script setup>
	import CustomTabbar from '@/components/tabBar/tabBar.vue';
	import { ref } from 'vue';
	import { onShow } from "@dcloudio/uni-app";
	import course from "@/static/jingpinkecheng.png"
	import videoImg from "@/static/gandanshipin.png"
	import pptImg from "@/static/gandankejian.png"
	import talkImg from "@/static/bibglijiaoliu.png"
	import huicuiImg from "@/static/jingdianbingli.png"
	import xueyuanImg from "@/static/ganbingxueyuan.png"
	import newerImg from "@/static/xinshoujiaocheng.png"
	import navTo from '@/utils/navTo.js';
	// 方法
	// 方法
	const goToCourse = (courseType) => {
		console.log('进入课程:', courseType);
		
		// 根据课程类型进行不同的处理
		switch(courseType) {
			case 'course':
				navTo({
					url: '/pages_course/index/index'
				})
				break;
			case 'video':
			  navTo({
					url: '/pages_app/video/video'
				})
				break;
			case 'ppt':
			navTo({
					url: '/pages_app/ppt/ppt'
				})
				break;
			default:
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				});
		}
	};
	
	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;

// 课程图标颜色
$green-color: #00D4AA;
$yellow-color: #FFB800;
$orange-color: #FF8C00;
$green-chat-color: #52C41A;
$purple-color: #B37FEB;
$blue-color: #40A9FF;
$orange-tutorial-color: #FF7A45;

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

.page {
	background-color: $gray-bg;
	min-height: calc(100vh - 140rpx);
	
	padding-bottom: 120rpx;
}

// 课程列表
.course-list {
	padding: 20rpx;

	.course-item {
		background-color: $white;
		border-radius: $border-radius;
		margin-bottom: 20rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

		.course-icon {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 30rpx;
			
			&.green {
				background-color: $green-color;
			}
			
			&.yellow {
				background-color: $yellow-color;
			}
			
			&.orange {
				background-color: $orange-color;
			}
			
			&.green-chat {
				background-color: $green-chat-color;
			}
			
			&.purple {
				background-color: $purple-color;
			}
			
			&.blue {
				background-color: $blue-color;
			}
			
			&.orange-tutorial {
				background-color: $orange-tutorial-color;
			}
		}

		.course-content {
			flex: 1;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			gap: 8rpx;

			.course-title {
				font-size: 32rpx;
				color: $text-color;
				font-weight: 600;
				line-height: 1.3;
			}

			.course-subtitle {
				font-size: 26rpx;
				color: $gray-medium;
				line-height: 1.4;
			}
		}

		.course-arrow {
			width: 40rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		// 点击效果
		&:active {
			opacity: 0.8;
			transform: scale(0.98);
		}
	}
}
</style>
