<template>
	<div class="teaching-activity-analysis">
		<!-- 页面头部 -->
		<div class="header">
			<h1>📚 教学活动分析</h1>
			<p>为教学过程及课程内容改进提供数据支撑</p>
		</div>

		<!-- 筛选条件 -->
		<div class="filter-section">
			<h3>🔍 数据筛选</h3>
			<div class="filter-controls">
				<div class="filter-group">
					<label>选择课程</label>
					<a-select v-model:value="filters.courseId" placeholder="全部课程" @change="updateStats">
						<a-select-option value="">全部课程</a-select-option>
						<a-select-option value="course1">JavaScript基础教程</a-select-option>
						<a-select-option value="course2">Python数据分析</a-select-option>
						<a-select-option value="course3">React前端开发</a-select-option>
						<a-select-option value="course4">机器学习入门</a-select-option>
					</a-select>
				</div>
				<div class="filter-group">
					<label>时间范围</label>
					<a-select v-model:value="filters.timeRange" @change="updateStats">
						<a-select-option :value="7">最近7天</a-select-option>
						<a-select-option :value="30">最近30天</a-select-option>
						<a-select-option :value="90">最近90天</a-select-option>
						<a-select-option :value="365">最近一年</a-select-option>
					</a-select>
				</div>
				<div class="filter-group">
					<a-button type="primary" @click="updateStats">查询</a-button>
				</div>
			</div>
		</div>

		<!-- 核心统计数据 -->
		<div class="stats-grid">
			<div class="stat-card">
				<h3>📖 文档观看统计</h3>
				<div class="stat-number">{{ stats.totalDocViewers.toLocaleString() }}</div>
				<div class="stat-label">总观看人数</div>
				<div class="stat-number">{{ stats.completedDocViewers.toLocaleString() }}</div>
				<div class="stat-label">完成观看人数</div>
				<div class="completion-rate">{{ stats.docCompletionRate }}%</div>
				<div class="stat-label">完成率</div>
			</div>

			<div class="stat-card">
				<h3>🚪 文档跳出分析</h3>
				<div class="stat-number">{{ stats.totalDocExits.toLocaleString() }}</div>
				<div class="stat-label">总跳出次数</div>
				<div class="stat-number">{{ stats.docExitRate }}%</div>
				<div class="stat-label">跳出率</div>
				<div class="stat-number">{{ stats.avgDocExitTime }}</div>
				<div class="stat-label">平均跳出时间</div>
			</div>

			<div class="stat-card">
				<h3>💬 讨论互动统计</h3>
				<div class="stat-number">{{ stats.totalDiscussions.toLocaleString() }}</div>
				<div class="stat-label">讨论总数</div>
				<div class="stat-number">{{ stats.totalReplies.toLocaleString() }}</div>
				<div class="stat-label">回帖总数</div>
				<div class="stat-number">{{ stats.avgRepliesPerDiscussion }}</div>
				<div class="stat-label">平均回帖数</div>
			</div>
		</div>

		<!-- 每日访问统计图表 -->
		<div class="chart-container">
			<h3>📈 开课每日访问人数统计</h3>
			<div ref="dailyVisitsChart" class="chart"></div>
		</div>

		<!-- 每周发帖回帖统计 -->
		<div class="weekly-stats">
			<div class="weekly-card">
				<h4>👨‍🎓 学员每周发帖统计</h4>
				<div class="weekly-number">{{ weeklyStats.studentWeeklyPosts }}</div>
				<div class="weekly-label">本周发帖数</div>
				<div class="weekly-number">{{ weeklyStats.studentWeeklyReplies }}</div>
				<div class="weekly-label">本周回帖数</div>
				<div class="weekly-number">{{ weeklyStats.studentAvgPostsPerDay }}</div>
				<div class="weekly-label">日均发帖数</div>
			</div>

			<div class="weekly-card">
				<h4>👨‍🏫 教员每周发帖统计</h4>
				<div class="weekly-number">{{ weeklyStats.teacherWeeklyPosts }}</div>
				<div class="weekly-label">本周发帖数</div>
				<div class="weekly-number">{{ weeklyStats.teacherWeeklyReplies }}</div>
				<div class="weekly-label">本周回帖数</div>
				<div class="weekly-number">{{ weeklyStats.teacherAvgPostsPerDay }}</div>
				<div class="weekly-label">日均发帖数</div>
			</div>
		</div>

		<!-- 讨论详情表格 -->
		<div class="data-table">
			<h3>💬 课程讨论详情</h3>
			<a-table :columns="discussionColumns" :data-source="discussionData" :pagination="{ pageSize: 10 }" row-key="id" />
		</div>

		<!-- 文档观看详细统计 -->
		<div class="data-table">
			<h3>📚 文档观看详细统计</h3>
			<a-table :columns="documentColumns" :data-source="documentData" :pagination="{ pageSize: 10 }" row-key="id" />
		</div>
	</div>
</template>

<script setup>
	import { ref, reactive, onMounted, nextTick } from 'vue'
	import * as echarts from 'echarts'

	// 响应式数据
	const filters = reactive({
		courseId: '',
		timeRange: 30
	})

	const stats = reactive({
		totalDocViewers: 1856,
		completedDocViewers: 1234,
		docCompletionRate: 66.5,
		totalDocExits: 456,
		docExitRate: 24.6,
		avgDocExitTime: '08:45',
		totalDiscussions: 234,
		totalReplies: 1567,
		avgRepliesPerDiscussion: 6.7
	})

	const weeklyStats = reactive({
		studentWeeklyPosts: 67,
		studentWeeklyReplies: 234,
		studentAvgPostsPerDay: 9.6,
		teacherWeeklyPosts: 23,
		teacherWeeklyReplies: 89,
		teacherAvgPostsPerDay: 3.3
	})

	// 图表引用
	const dailyVisitsChart = ref(null)
	let chartInstance = null

	// 讨论表格列定义
	const discussionColumns = [
		{
			title: '讨论主题',
			dataIndex: 'title',
			key: 'title'
		},
		{
			title: '发起人',
			dataIndex: 'author',
			key: 'author'
		},
		{
			title: '发起时间',
			dataIndex: 'createTime',
			key: 'createTime'
		},
		{
			title: '回帖数',
			dataIndex: 'replyCount',
			key: 'replyCount'
		},
		{
			title: '最后回复',
			dataIndex: 'lastReplyTime',
			key: 'lastReplyTime'
		}
	]

	// 讨论数据
	const discussionData = ref([
		{
			id: 1,
			title: 'JavaScript闭包概念理解',
			author: '张三',
			createTime: '2024-01-15 10:30',
			replyCount: 15,
			lastReplyTime: '2024-01-16 14:20'
		},
		{
			id: 2,
			title: 'Python数据分析库选择',
			author: '李四',
			createTime: '2024-01-14 16:45',
			replyCount: 8,
			lastReplyTime: '2024-01-15 09:15'
		},
		{
			id: 3,
			title: 'React组件生命周期',
			author: '王五',
			createTime: '2024-01-13 11:20',
			replyCount: 12,
			lastReplyTime: '2024-01-14 17:30'
		},
		{
			id: 4,
			title: '机器学习算法选择',
			author: '赵六',
			createTime: '2024-01-12 14:15',
			replyCount: 6,
			lastReplyTime: '2024-01-13 10:45'
		},
		{
			id: 5,
			title: '前端性能优化技巧',
			author: '钱七',
			createTime: '2024-01-11 09:30',
			replyCount: 20,
			lastReplyTime: '2024-01-15 16:20'
		}
	])

	// 文档表格列定义
	const documentColumns = [
		{
			title: '文档名称',
			dataIndex: 'name',
			key: 'name'
		},
		{
			title: '文档类型',
			dataIndex: 'type',
			key: 'type',
			width: '100px'
		},
		{
			title: '观看人数',
			dataIndex: 'viewCount',
			key: 'viewCount',
			width: '100px'
		},
		{
			title: '完成人数',
			dataIndex: 'completedCount',
			key: 'completedCount',
			width: '100px'
		},
		{
			title: '完成率',
			dataIndex: 'completionRate',
			key: 'completionRate',
			customRender: ({ text }) => {
				const rate = parseFloat(text)
				const className = rate >= 70 ? 'completion-rate' : rate < 50 ? 'low-engagement' : ''
				return h('span', { class: className }, `${text}%`)
			}
		},
		{
			title: '平均阅读时长',
			dataIndex: 'avgReadTime',
			key: 'avgReadTime',
			width: '130px'
		},
		{
			title: '跳出率',
			dataIndex: 'exitRate',
			key: 'exitRate',
			customRender: ({ text }) => {
				const rate = parseFloat(text)
				const className = rate > 30 ? 'low-engagement' : ''
				return h('span', { class: className }, `${text}$`)
			}
		},
		{
			title: '下载次数',
			dataIndex: 'downloadCount',
			key: 'downloadCount',
			width: '100px'
		}
	]

	// 文档数据
	const documentData = ref([
		{
			id: 1,
			name: 'JavaScript基础语法',
			type: 'PDF文档',
			viewCount: 1856,
			completedCount: 1234,
			completionRate: 66.5,
			avgReadTime: '25:30',
			exitRate: 24.6,
			downloadCount: 456
		},
		{
			id: 2,
			name: 'Python数据分析入门',
			type: '在线文档',
			viewCount: 1234,
			completedCount: 987,
			completionRate: 80.0,
			avgReadTime: '32:15',
			exitRate: 18.5,
			downloadCount: 234
		},
		{
			id: 3,
			name: 'React组件开发指南',
			type: 'PDF文档',
			viewCount: 987,
			completedCount: 756,
			completionRate: 76.6,
			avgReadTime: '28:45',
			exitRate: 22.3,
			downloadCount: 189
		},
		{
			id: 4,
			name: '机器学习算法详解',
			type: '在线文档',
			viewCount: 756,
			completedCount: 523,
			completionRate: 69.2,
			avgReadTime: '45:20',
			exitRate: 30.8,
			downloadCount: 123
		},
		{
			id: 5,
			name: '前端工程化实践',
			type: 'PDF文档',
			viewCount: 523,
			completedCount: 345,
			completionRate: 66.0,
			avgReadTime: '38:15',
			exitRate: 34.0,
			downloadCount: 89
		}
	])
	// 生成日期数据

	const generateDateData = (days) => {
		const dates = []
		const today = new Date()

		for (let i = days - 1; i >= 0; i--) {
			const date = new Date(today)
			date.setDate(date.getDate() - i)
			dates.push(date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }))
		}

		return dates
	}

	// 生成访问数据
	const generateVisitData = (days) => {
		const data = []
		for (let i = 0; i < days; i++) {
			// 模拟真实数据：工作日访问量较高，周末较低
			const dayOfWeek = (new Date().getDay() - days + i + 7) % 7
			const isWeekend = dayOfWeek === 0 || dayOfWeek === 6
			const baseValue = isWeekend ? 120 : 200
			const randomFactor = 0.7 + Math.random() * 0.6 // 0.7-1.3的随机因子
			data.push(Math.round(baseValue * randomFactor))
		}
		return data
	}

	// 初始化图表
	const initChart = () => {
		if (!dailyVisitsChart.value) return

		chartInstance = echarts.init(dailyVisitsChart.value)
		updateChartData()

		// 响应式处理
		window.addEventListener('resize', () => {
			chartInstance?.resize()
		})
	}

	// 更新图表数据
	const updateChartData = () => {
		if (!chartInstance) return

		const days = filters.timeRange
		const dates = generateDateData(days)
		const visits = generateVisitData(days)

		const option = {
			title: {
				text: `最近${days}天访问人数趋势`,
				left: 'center',
				textStyle: {
					color: '#2c3e50',
					fontSize: 16,
					fontWeight: 'bold'
				}
			},
			tooltip: {
				trigger: 'axis',
				backgroundColor: 'rgba(255, 255, 255, 0.95)',
				borderColor: '#3498db',
				borderWidth: 1,
				textStyle: {
					color: '#333'
				},
				formatter: function (params) {
					let result = params[0].name + '<br/>'
					params.forEach((param) => {
						result += param.marker + param.seriesName + ': ' + param.value + '人<br/>'
					})
					return result
				}
			},
			legend: {
				data: ['访问人数'],
				top: 30,
				textStyle: {
					color: '#2c3e50'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: dates,
				axisLine: {
					lineStyle: {
						color: '#bdc3c7'
					}
				},
				axisLabel: {
					color: '#2c3e50',
					rotate: days > 30 ? 45 : 0
				}
			},
			yAxis: {
				type: 'value',
				name: '访问人数',
				nameTextStyle: {
					color: '#2c3e50'
				},
				axisLine: {
					lineStyle: {
						color: '#bdc3c7'
					}
				},
				axisLabel: {
					color: '#2c3e50'
				},
				splitLine: {
					lineStyle: {
						color: '#ecf0f1'
					}
				}
			},
			series: [
				{
					name: '访问人数',
					type: 'line',
					smooth: true,
					data: visits,
					itemStyle: {
						color: '#3498db'
					},
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{
									offset: 0,
									color: 'rgba(52, 152, 219, 0.3)'
								},
								{
									offset: 1,
									color: 'rgba(52, 152, 219, 0.1)'
								}
							]
						}
					},
					lineStyle: {
						width: 3
					},
					symbol: 'circle',
					symbolSize: 8
				}
			]
		}

		chartInstance.setOption(option, true)
	}

	// 更新统计数据
	const updateStats = () => {
		// 模拟数据更新
		updateChartData()
	}

	// 组件挂载后初始化
	onMounted(() => {
		nextTick(() => {
			initChart()
		})
	})
</script>

<style scoped>
	.teaching-activity-analysis {
		padding: 20px;
		/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
	}

	.header {
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		border-radius: 15px;
		padding: 30px;
		margin-bottom: 30px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
		text-align: center;
	}

	.header h1 {
		color: #2c3e50;
		font-size: 2.5em;
		margin-bottom: 10px;
	}

	.header p {
		color: #7f8c8d;
		font-size: 1.1em;
	}

	.filter-section {
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		border-radius: 15px;
		padding: 25px;
		margin-bottom: 30px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	}

	.filter-section h3 {
		color: #2c3e50;
		margin-bottom: 20px;
		font-size: 1.5em;
	}

	.filter-controls {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 15px;
		align-items: end;
	}

	.filter-group {
		display: flex;
		flex-direction: column;
	}

	.filter-group label {
		margin-bottom: 8px;
		color: #2c3e50;
		font-weight: 600;
	}

	.stats-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 25px;
		margin-bottom: 30px;
	}

	.stat-card {
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		border-radius: 15px;
		padding: 25px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.stat-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
	}

	.stat-card h3 {
		color: #2c3e50;
		margin-bottom: 15px;
		font-size: 1.3em;
		border-bottom: 2px solid #3498db;
		padding-bottom: 10px;
	}

	.stat-number {
		font-size: 2.5em;
		font-weight: bold;
		color: #3498db;
		margin-bottom: 10px;
	}

	.stat-label {
		color: #7f8c8d;
		font-size: 0.9em;
	}

	.chart-container {
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		border-radius: 15px;
		padding: 25px;
		margin-bottom: 30px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	}

	.chart-container h3 {
		color: #2c3e50;
		margin-bottom: 20px;
		font-size: 1.5em;
	}

	.chart {
		height: 400px;
		border-radius: 10px;
	}

	.weekly-stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 20px;
		margin-bottom: 30px;
	}

	.weekly-card {
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		border-radius: 15px;
		padding: 20px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	}

	.weekly-card h4 {
		color: #2c3e50;
		margin-bottom: 15px;
		font-size: 1.2em;
	}

	.weekly-number {
		font-size: 2em;
		font-weight: bold;
		color: #3498db;
		margin-bottom: 5px;
	}

	.weekly-label {
		color: #7f8c8d;
		font-size: 0.9em;
	}

	.data-table {
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10px);
		border-radius: 15px;
		padding: 25px;
		margin-bottom: 30px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	}

	.data-table h3 {
		color: #2c3e50;
		margin-bottom: 20px;
		font-size: 1.5em;
	}

	:deep(.completion-rate) {
		color: #27ae60;
		font-weight: bold;
	}

	:deep(.low-engagement) {
		color: #e74c3c;
		font-weight: bold;
	}

	@media (max-width: 768px) {
		.stats-grid {
			grid-template-columns: 1fr;
		}

		.filter-controls {
			grid-template-columns: 1fr;
		}

		.header h1 {
			font-size: 2em;
		}

		.weekly-stats {
			grid-template-columns: 1fr;
		}
	}
</style>
