<template>
	<view class="data-analyze-container">
		<!-- 页面标题区域 -->
		<view class="header-section">
			<view class="header-title">
				<text class="title">数据图表</text>
				<text class="subtitle">训练数据可视化分析</text>
			</view>
		</view>

		<!-- 多人折线图 -->
		<view class="chart-card">
			<view class="chart-header">
				<text class="chart-title">多人成绩趋势</text>
				<text class="chart-desc">近5次训练成绩对比</text>
			</view>
			<view class="chart-box">
				<qiun-data-charts
					type="line"
					:opts="lineOpts"
					:chartData="lineChartData"
					:ontouch="true"
				/>
			</view>
		</view>

		<!-- 完成率饼状图 - 每个学生 -->
		<view class="chart-card">
			<view class="chart-header">
				<text class="chart-title">学员完成率</text>
				<text class="chart-desc">各学员训练完成情况统计</text>
			</view>
			<view class="chart-box">
				<qiun-data-charts
					type="pie"
					:opts="completionOpts"
					:chartData="completionChartData"
					:ontouch="true"
				/>
			</view>
		</view>

		<!-- 排名统计图 -->
		<view class="chart-card">
			<view class="chart-header">
				<text class="chart-title">学员排名</text>
				<text class="chart-desc">按最佳成绩排名</text>
			</view>
			<view class="chart-box">
				<qiun-data-charts
					type="column"
					:opts="columnOpts"
					:chartData="columnChartData"
					:ontouch="true"
				/>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onShow, onLoad } from "@dcloudio/uni-app"
	import { ref, computed, } from 'vue'
	// 折线图配置
	const lineOpts = ref({
		color: ['#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1'],
		padding: [15, 10, 0, 15],
		legend: {},
		xAxis: {
			disableGrid: true,
			itemCount: 4
		},
		yAxis: {
			data: [{ min: 0 }]
		},
		extra: {
			line: {
				type: 'curve',
				width: 2,
				activeType: 'hollow'
			}
		}
	})

	const lineChartData = ref({
		categories: ['第1次', '第2次', '第3次', '第4次', '第5次'],
		series: [
			{
				name: '张三',
				data: [45, 42, 38, 40, 36]
			},
			{
				name: '李四',
				data: [50, 48, 45, 44, 42]
			},
			{
				name: '王五',
				data: [55, 52, 50, 48, 45]
			}
		]
	})

	// 完成率饼状图配置
	const completionOpts = ref({
		color: ['#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2'],
		padding: [5, 5, 5, 5],
		legend: {},
		extra: {
			pie: {
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				ringWidth: 40,
				title: {
					name: '总完成率',
					fontSize: 15,
					color: '#666666'
				},
				subtitle: {
					name: '87%',
					fontSize: 20,
					color: '#1890ff'
				}
			}
		}
	})

	const completionChartData = ref({
		series: [
			{
				name: '完成率',
				data: [
					{ value: 17, name: '张三' },
					{
						value: 17,
						name: '李四',
						color: '#52c41a'
					},
					{
						value: 17,
						name: '王五',
						color: '#faad14'
					},
					{
						value: 14,
						name: '赵六',
						color: '#f5222d'
					},
					{
						value: 14,
						name: '钱七',
						color: '#722ed1'
					},
					{
						value: 11,
						name: '孙八',
						color: '#13c2c2'
					}
				]
			}
		]
	})

	// 柱状图配置
	const columnOpts = ref({
		color: ['#1890ff', '#52c41a', '#faad14', '#f5222d', '#722ed1', '#13c2c2'],
		padding: [15, 10, 0, 15],
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			data: [{ min: 0, max: 60 }]
		},
		extra: {
			column: {
				type: 'group',
				width: 30,
				activeBgColor: '#000000',
				activeBgOpacity: 0.08,
				linearType: 'custom',
				seriesGap: 2,
				categoryGap: 0.5,
				barBorderCircle: true
			}
		}
	})

	const columnChartData = ref({
		categories: ['张三', '李四', '王五', '赵六', '钱七', '孙八'],
		series: [
			{
				name: '最佳成绩(秒)',
				data: [36, 42, 45, 50, 56, 60]
			}
		]
	})

	onLoad(() => {

	})

	onShow(() => {

	})
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.data-analyze-container {
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: 40rpx;
	}

	/* 页面标题区域 */
	.header-section {
		margin-bottom: 24rpx;

		.header-title {
			.title {
				font-size: 36rpx;
				font-weight: 700;
				color: #333;
				display: block;
				margin-bottom: 8rpx;
			}

			.subtitle {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	/* 图表卡片 */
	.chart-card {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;

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

		.chart-header {
			margin-bottom: 20rpx;
			padding-left: 8rpx;
			border-left: 6rpx solid #1890ff;

			.chart-title {
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
				display: block;
				margin-bottom: 6rpx;
			}

			.chart-desc {
				font-size: 24rpx;
				color: #999;
			}
		}

		.chart-box {
			width: 100%;
			height: 500rpx;
			background-color: #fafafa;
			border-radius: 16rpx;
			overflow: hidden;
		}
	}
</style>
