<template>
	<view class="examQuestionStatistics">
		<view class="top">
			<DataDisplay v-for="(item, index) in data.list" :data="item" :key="index" />
		</view>
		<view class="center">
			<view class="_left">
				<view class="center_title">
					<view class="title">题目类型占比</view>
				</view>
				<view class="_cont">
					<view ref="center_EchartTwo" class="_Echart"></view>
				</view>
			</view>
			<view class="_center">
				<view class="center_title">
					<view class="title">各主管成绩走势</view>
					<view>
						<el-select
							v-model="selectVal.selectValue"
							class="m-2"
							placeholder="选择题目"
							style="width: 240px"
							@change="changeSelect"
						>
							<el-option
								v-for="item in selectData.selectOptions"
								:key="item.qc_id"
								:label="item.qc_name"
								:value="item.qc_id"
							/>
						</el-select>
					</view>
				</view>
				<view class="_cont">
					<view ref="center_EchartThree" class="_Echart"></view>
				</view>
			</view>
			<view class="_right">
				<view class="center_title">
					<view class="title">各主管综合排名</view>
				</view>
				<view class="ranking">
					<view class="ranking_item" v-for="(item, index) in data.rankingList" :key="index">
						<view>
							<view class="serial" :style="index == 0 ? 'background: #ff3232' : (index == 1 ? 'background: #ff9800' : (index == 2 ? 'background: #ffd200' : 'background: #5470c6'))">{{ index + 1 }}</view>
							<view class="name">{{ item.dept_name }}</view>
						</view>
						<view>
							<view class="count">{{ item.er_score }}</view>
							<img :src="item.status ? '/src/assets/icons/shang.png' : '/src/assets/icons/xia.png'" alt="" />
							<view class="percentage" :style="!item.status ? 'color: #ff3232' : 'color: #00B42A'">{{ item.percentage }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="center_box">
				<view class="center_left">
					<view class="center_title">
						<view class="title">各类型题目得分分布</view>
						<view class="filter_tag">
							<span v-for="(item, index) in activeList" :key="index" @click="changeActive(index)" :class="activeName == index ? 'label active' : 'label'">{{ item }}</span>
						</view>
					</view>
					<view class="center_cont">
						<view ref="center_Echart" class="center_Echart"></view>
					</view>
				</view>
				<view class="center_right">
					<view class="center_title">
						<view class="title">薄弱知识点分析</view>
						<view style="color: red;margin-right: 20px;">Top5</view>
					</view>
					<view class="cont_box">
						<view class="right_cont" v-for="(item, index) in data.illegalList" :key="index">
							<view class="cont_title">
								<view>{{ item.category_name }}</view>
								<view>{{ item.correct_rate_percent }}%</view>
							</view>
							<view class="progress">
								<el-progress :show-text="false" :percentage="item.correct_rate_percent" :color="item.correct_rate_percent <= '50' ? 'red' : (item.correct_rate_percent > '50' && item.correct_rate_percent <= '70' ? '#FF7D00' : '#817e8a')" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="_center">
				<view class="center_title">
					<view class="title">各项题目类型成绩走势</view>
				</view>
				<view class="_cont">
					<view ref="echarts_name" class="_Echart"></view>
				</view>
			</view>
			<view class="failed_right">
				<view class="failed_user">
					<view class="center_title">
						<view class="title">未达标人员</view>
						<view style="margin-bottom: 8px;">
							<el-date-picker style="width: 100%" v-model="selectVal.timeVal" value-format="YYYY-MM" @change="changeFilterTime" type="month" placeholder="选择时间" />
						</view>
					</view>
					<view class="user_ranking">
						<vue3-scroll-seamless
							:classOptions="classOptions"
							:dataList="data.userList"
							class="scroll-wrap"
						>
					  	<view class="ranking_item" v-for="(item, index) in data.userList" :key="index">
					  		<view class="user_info">
					  			<img :src="item.avatar_url" alt="" />
					  			<view class="info">
					  				<view class="name">{{ item.user_name }}</view>
					  				<view class="division">{{ item.dept_name }}</view>
					  			</view>
					  		</view>
					  		<view class="fraction">{{ item.total_exams }}/{{ item.unqualified_count }}</view>
					  	</view>
						</vue3-scroll-seamless>
					</view>
				</view>
				<view class="desc">
					<view class="center_title">
						<view class="title">训练建议</view>
					</view>
					<view class="desc_cont"> 
						<view class="cont_text">
							<view class="title">加强X光机识别训练</view>
							<view class="text">&nbsp;&nbsp;&nbsp;针对X光机违禁品识别薄弱情况，建议每周组织两次专项训练，邀请专家进行案例分析。</view>
						</view>
						<view class="divider"></view>
						<view  class="cont_text">
							<view class="title">开展应急处置演练</view>
							<view class="text">&nbsp;&nbsp;&nbsp;应急处置流程得分较低，建议每季度组织一次全站范围的应急演练，提高实际操作能力。</view>
						</view>
						<view class="divider"></view>
						<view class="cont_text">
							<view class="title">更新危险品知识培训</view>
							<view class="text">&nbsp;&nbsp;&nbsp;危险品分类标准知识掌握不足，建议更新培训资料，增加最新案例和识别技巧。</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref, onMounted, onUnmounted } from 'vue';
	import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
	import DataDisplay from './components/dataDisplay.vue';
	import * as echarts from 'echarts';

	const activeName = ref('0');
	const activeList = reactive(['本月', '季度', '年度']);
	const selectData = reactive({
		selectOptions: []
	});
	const classOptions = {
	  limitMoveNum: 6,
	};
	const selectVal = reactive({
		selectValue: '',
		timeVal: ''
	});
	const data = reactive({
		list: [],
		illegalList: [],
		rankingList: [],
		userList: []
	});

	const chart = ref(null);
	const center_Echart = ref(null);
	const chartOption = ref({
		legend: {
			data: ['平均得分'],
			left: '30px',
			textStyle: {
				color: '#fff',
			},
			selectedMode: false
		},
		radar: {
			indicator: [],
			radius: '40%',
			center: ['42%', '50%'],
			name: {
				// 修改指标名称的文本样式
				textStyle: {
					color: '#fff', // 设置文字颜色为红色
					fontSize: 12, // 设置文字大小
				}
			}
		},
		series: [
			{
				name: 'Budget vs spending',
				type: 'radar',
				data: [
					{
						value: [80, 70, 75, 80, 80, 80],
						name: '平均得分',
						label: {
							show: true,
							color: '#fff',
							formatter: function (params) {
								return params.value;
							},
						},
						areaStyle: {
							color: '#a9bdff',
						},
						// 可以设置其他样式，如颜色等
						itemStyle: {
							color: 'blue',
						},
					},
				],
			},
		],
	});
	
	const chartTwo = ref(null);
	const center_EchartTwo = ref(null);
	const chartTwoOption = ref({
		tooltip: {
			trigger: 'item'
		},
		legend: {
			left: 'center',
			top: 15,
			textStyle: {
				color: '#fff',
			},
			selectedMode: false
		},
		series: [
			{
				name: '占比',
				type: 'pie',
				radius: ['40%', '70%'],
				center:['50%','60%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center'
				},
				labelLine: {
					show: false
				},
				data: []
			}
		]
	});
	
	const chartThree = ref(null);
	const center_EchartThree = ref(null);
	const chartThreeOption = ref({
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			data: [],
			textStyle: {
				color: '#fff',
			},
			selectedMode: false
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['1月', '2月', '3月', '4月', '5月', '6月'],
			axisLabel: {
				color: '#fff'
			}
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				color: '#fff'
			}
		},
		series: []
	});
	
	const chartT = ref(null);
	const echarts_name = ref(null);
	const chartTOption = ref({
		legend: {
			data: [],
			textStyle: {
				color: '#fff',
			},
			selectedMode: false
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				boundaryGap: false,
				data: ['1月', '2月', '3月', '4月', '5月', '6月'],
				axisLabel: {
					color: '#fff'
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				axisLabel: {
					color: '#fff'
				}
			}
		],
		series: []
	});

	// 初始化图标
	const initChart = () => {
		chart.value = echarts.init(center_Echart.value, 'macarons');
		chart.value.setOption(chartOption.value);
		chartTwo.value = echarts.init(center_EchartTwo.value, 'macarons');
		chartTwo.value.setOption(chartTwoOption.value);
		chartThree.value = echarts.init(center_EchartThree.value, 'macarons');
		chartThree.value.setOption(chartThreeOption.value);
		chartT.value = echarts.init(echarts_name.value, 'macarons');
		chartT.value.setOption(chartTOption.value);
	};
	
	// 点击切换各类型题目得分分布
	const changeActive = async (ind: any) => {
		if (activeName.value == ind) return;
		if (ind == 0) {
			// 月度
			await getCount('month_avg_score', '得分分布', '', null);
		} else if (ind == 1) {
			// 季度
			await getCount('quarter_avg_score', '得分分布', '', null);
		} else {
			// 年度
			await getCount('year_avg_score', '得分分布', '', null);
		}
		chart.value = echarts.init(center_Echart.value, 'macarons');
		chart.value.setOption(chartOption.value);
		activeName.value = ind;
	};
	
	// 处理接口返回数据
	const getCount = async (url: String, title: String, key: any, params: any) => {
		await executeSqlByKeyAndParam(url, params).then(res => {
			if (title == '参考人数') {
				data.list.push({
					title,
					current_month: res.data[0].current_month_count,
					previous_month: res.data[0].previous_month_count,
					percentage: res.data[0].year_over_year_growth,
					status: res.data[0].current_month_count >= res.data[0].previous_month_count
				});
			} else if (title == '平均成绩') {
				data.list.push({
					title,
					current_month: res.data[0].current_month_avg,
					previous_month: res.data[0].previous_month_avg,
					percentage: res.data[0].year_over_year_growth,
					status: res.data[0].current_month_avg >= res.data[0].previous_month_avg
				});
			} else if (title == '合格率') {
				data.list.push({
					title,
					current_month: res.data[0].current_month_pass_rate,
					previous_month: res.data[0].previous_month_pass_rate,
					percentage: res.data[0].year_over_year_growth,
					status: res.data[0].current_month_pass_rate >= res.data[0].previous_month_pass_rate
				});
			} else if (title == '优秀率') {
				data.list.push({
					title,
					current_month: res.data[0].current_month_good_rate,
					previous_month: res.data[0].previous_month_good_rate,
					percentage: res.data[0].year_over_year_growth,
					status: res.data[0].current_month_good_rate >= res.data[0].previous_month_good_rate
				});
			} else if (title == '综合排名') {
				data[key] = res.data;
			} else if (title == '得分分布') {
				const nameList = res.data.map((item) => {
					return {
						name: item.category,
					}
				});
				const valList = res.data.map((item) => item.avg_score);
				chartOption.value.radar.indicator = nameList;
				chartOption.value.series[0].data[0].value = valList;
			} else if (title == '问答占比') {
				chartTwoOption.value.series[0].data = res.data.map((item) => {
					return {
						name: item.category_name,
						value: item.total_count
					}
				});
			} else if (title == '题目类型下拉') {
				selectData.selectOptions = res.data;
			} else if (title == '未达标') {
				data.userList = res.data;
			} else if (title == '薄弱知识') {
				data.illegalList = res.data;
			}
		});
	};
	
	// 处理走势折线图数据
	const handlerDatas = (arr, name, type) => {
		if (type == 'topic') {
			const data = arr.filter((item) => item.question_type == name);
			const list = [0, 0, 0, 0, 0, 0];
			data.map((item, ind) => {
				list[item.month - 1] = item.total_score;
			});
			return {
				name: name,
				type: 'line',
				stack: 'Total',
				emphasis: {
					focus: 'series'
				},
				data: list
			};
		} else {
			const data = arr.filter((item) => item.dept_name == name);
			const list = [0, 0, 0, 0, 0, 0];
			data.map((item, ind) => {
				list[item.month - 1] = item.score;
			});
			return {
				name: name,
				type: 'line',
				stack: 'Total',
				areaStyle: {},
				emphasis: {
					focus: 'series'
				},
				data: list
			};
		}
	}
	
	// 主管成绩走势
	const getScoreData = async (url, params, type) => {
		await executeSqlByKeyAndParam(url, params).then(res => {
			if (type == 'topic') {
				const newArr = res.data.map((item) => item.question_type).filter((item, index, arr) => arr.indexOf(item) === index);
				const filteredArr = [...newArr].filter(el => el !== undefined);
				const newVal = filteredArr.map((item) => handlerDatas(res.data, item, type));
				chartTOption.value.legend.data = filteredArr;
				chartTOption.value.series = newVal;
			} else {
				const newArr = res.data.map((item) => item.dept_name).filter((item, index, arr) => arr.indexOf(item) === index);
				const newVal = newArr.map((item) => handlerDatas(res.data, item, ''));
				chartThreeOption.value.legend.data = newArr;
				chartThreeOption.value.series = newVal;
			}
		});
	}
	
	// 修改主管成绩走势筛选条件
	const changeSelect = (e) => {
		getScoreData('department_score_trend', { qc_id: e }, '');
		chartThree.value = echarts.init(center_EchartThree.value, 'macarons');
		chartThree.value.setOption(chartThreeOption.value);
	};
	
	// 获取当前月
	const getCurrentMonth = () => {
		const currentYear = new Date().getFullYear();
		const month = new Date().getMonth() + 1;
		return `${currentYear}-${month < 10 ? '0' + month : month}`;
	}
	
	// 未达标人员根据时间筛选
	const changeFilterTime = (e) => {
		getCount('exam_of_no_pass_rate', '未达标', '', { month: e || getCurrentMonth() });
	};
	
	onMounted(async () => {
		await getCount('exam_of_total_count', '参考人数', '', null);
		await getCount('exam_of_avg', '平均成绩', '', null);
		await getCount('exam_of_pass_rate', '合格率', '', null);
		await getCount('exam_of_good_rate', '优秀率', '', null);
		await getCount('exam_of_dept2_sort', '综合排名', 'rankingList', null);
		await getCount('month_avg_score', '得分分布', '', null);
		await getCount('proportion_of_answer_categories', '问答占比', '', null);
		await getCount('question_type', '题目类型下拉', '', null);
		await getCount('top5_weak_knowledge_points', '薄弱知识', '', null);
		await getCount('exam_of_no_pass_rate', '未达标', '', { month: getCurrentMonth() });
		await getScoreData('department_score_trend', { qc_id: 'QC250624000003' }, '');
		await getScoreData('six_months_question_score', null, 'topic');
		initChart();
		window.addEventListener('resize', () => {
			chart.value.resize();
			chartTwo.value.resize();
			chartThree.value.resize();
			chartT.value.resize();
		});
	});

	onUnmounted(() => {
		if (!chart.value) {
			return;
		}
		chart.value.dispose();
		chart.value = null;
		if (!chartTwo.value) {
			return;
		}
		chartTwo.value.dispose();
		chartTwo.value = null;
		if (!chartThree.value) {
			return;
		}
		chartThree.value.dispose();
		chartThree.value = null;
		if (!chartT.value) {
			return;
		}
		chartT.value.dispose();
		chartT.value = null;
	});
</script>

<style lang="scss" scoped>
	::v-deep .el-select__wrapper {
		background-color: rgba(0, 0, 0, .3);
	}
	::v-deep .el-select__placeholder {
		color: #fff;
	}
	::v-deep .is-transparent {
		color: #a8abb2;
	}
	::v-deep .el-input__wrapper {
		background-color: rgba(0, 0, 0, .3);
	}
	::v-deep .el-input__inner {
		color: #fff;
	}
	.examQuestionStatistics {
		width: 100%;
		position: fixed;
		height: 100%;
		background: url('../../../assets/images/bg-99b6904c.png');
		background-size: 100% 100%;
		overflow-y: auto;
		padding-bottom: 150px;
		.center_title {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title {
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				z-index: 1;
				align-content: flex-start;
				background: url(/src/assets/images/titlebg-4340cf1c.png);
				background-size: 100% 100%;
				font-weight: 400;
				font-size: 14px;
				color: #fbffff;
				padding: 8px 20px;
				margin-bottom: 8px;
				min-width: 110px;
			}
			.filter_tag {
				padding-right: 15px;
				.label {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
					background: #11134b;
					padding: 4px 4px;
					margin: -4px 0;
					border-radius: 4px;
					color: #fbffff;
					cursor: pointer;
				}
				.active {
					background: #171b75;
				}
			}
		}
		.top {
			width: calc(100% - 200px);
			display: flex;
			justify-content: space-between;
			margin-top: 10px;
		}
		.center {
			width: calc(100% - 220px);
			display: flex;
			justify-content: space-between;
			margin-top: 10px;
			margin-left: 10px;
			._left {
				width: 24.5%;
				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
				._cont {
					width: 100%;
					height: 400px;
					display: flex;
					justify-content: center;
					._Echart {
						width: 100%;
						height: 100%;
					}
				}
			}
			._center {
				width: 50%;
				margin-left: 10px;
				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
				._cont {
					width: 100%;
					height: 400px;
					display: flex;
					justify-content: center;
					padding: 10px;
					._Echart {
						width: 100%;
						height: 100%;
					}
				}
			}
			._right {
				width: 24.5%;
				margin-left: 10px;
				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
				.ranking {
					width: 100%;
					padding: 0 20px;
					display: inline-block;
					color: #fff;
					.ranking_item {
						height: 40px;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.serial {
							display: inline-block;
							width: 16px;
							height: 16px;
							color: #fff;
							border-radius: 4px;
							text-align: center;
							line-height: 16px;
							font-size: 15px;
							margin-right: 8px;
						}
						.name {
							font-size: 15px;
						}
						.count {
							font-size: 15px;
							font-weight: 800;
							margin-right: 8px;
						}
						img {
							width: 15px;
							height: 15px;
							padding-top: 5px;
						}
						.percentage {
							font-size: 12px;
						}
					}
				}
			}
		}
		.bottom {
			width: calc(100% - 220px);
			display: flex;
			justify-content: space-between;
			margin-top: 10px;
			margin-left: 10px;
			.center_box {
				width: 24.5%;
				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
				.center_left {
					width: 100%;
					background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
					display: inline-block;
					.center_cont {
						width: 100%;
						display: flex;
						justify-content: center;
						.center_Echart {
							width: 100%;
							height: 280px;
						}
					}
				}
				.center_right {
					display: block;
					background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
					.cont_box {
						width: calc(100% - 40px);
						margin-left: 20px;
						display: inline-block;
						.right_cont {
							width: 100%;
							height: 60px;
							display: inline-block;
							.cont_title {
								height: 40px;
								display: flex;
								justify-content: space-between;
								align-items: center;
								color: #fff;
							}
							.progress {
								margin-top: 10px;
							}
						}
					}
				}
			}
			._center {
				width: 50%;
				margin-left: 10px;
				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
				._cont {
					width: 100%;
					height: 600px;
					display: flex;
					justify-content: center;
					padding: 10px;
					._Echart {
						width: 100%;
						height: 100%;
					}
				}
			}
			.failed_right {
				width: 24.5%;
				margin-left: 10px;
				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
				.failed_user {
					display: block;
					background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
					.user_ranking {
						width: 100%;
						height: 286px;
						padding: 0 20px;
						overflow: hidden;
						display: inline-block;
						color: #fff;
						.ranking_item {
							width: 91%;
							height: 70px;
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-bottom: 1px solid #ffffff40;
							.user_info {
								display: flex;
								img {
									width: 50px;
									height: 50px;
									border-radius: 50%;
									border: 1px solid #ffffff40;
								}
								.info {
									display: flex;
									flex-direction: column;
									margin-left: 8px;
									font-size: 15px;
									.division {
										color: #ccc;
										font-size: 14px;
										margin-top: 8px;
									}
								}
							}
							.fraction {
								color: #ff3232;
							}
						}
					}
				}
				.desc {
					display: block;
					.desc_cont {
						padding: 10px;
						padding-bottom: 0;
						color: #fff;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-around;
						background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
						.cont_text {
							display: flex;
							flex-direction: column;
							margin: 10px 0;
							&:nth-child(1) {
								border-left: 5px solid blue;
							}
							&:nth-child(3) {
								border-left: 5px solid red;
							}
							&:nth-child(5) {
								border-left: 5px solid yellow;
							}
							& {
								padding-left: 10px;
							}
							.title {
								font-size: 15px;
								font-weight: 600;
							}
							.text {
								margin-top: 8px;
								font-size: 13px;
								line-height: 23px;
							}
							&:last-child {
								border-bottom: none;
							}
						}
						.divider {
							width: 100%;
							height: 1px;
							border-bottom: 1px solid #ffffff40;
						}
					}
				}
			}
		}
	}
</style>
