<template>
	<view class="abilityPortrait">
		<view class="root">
			<DataDisplay v-for="(item, index) in data.list" :data="item" :key="index" />
		</view>
		<view class="top">
			<view class="top_left">
				<view class="_title">
					<view class="title">能力画像</view>
					<view class="filter_tag">
						<el-select
							v-model="selectVal.selectValue"
							class="m-2"
							placeholder="按时间筛选"
							style="width: 240px;"
						>
							<el-option
								v-for="item in selectData.selectOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
						<span v-for="(item, index) in activeList" :key="index" @click="changeActive(index)" :class="activeName == index ? 'label active' : 'label'">{{ item }}</span>
					</view>
				</view>
				<view class="top_cont">
					<view ref="top_Echart" class="top_Echart"></view>
				</view>
			</view>
			<view class="top_right">
				<view class="_title">
					<view class="title">综合能力排名Top5</view>
					<view class="filter_tag">
						<el-select
							v-model="selectVal.schemeValue"
							class="m-2"
							placeholder="选择筛选条件"
							style="width: 240px"
						>
							<el-option
								v-for="item in selectData.schemeOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
						<span class="label" @click="dialogVisible = true">自定义权重</span>
					</view>
				</view>
				<view class="top_cont">
					<view ref="echart_right" class="top_Echart"></view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom_left">
				<view class="_title">
					<view class="title">不同能力排名Top10</view>
					<view class="filter_tag">
						<el-select
							v-model="selectVal.capacityValue"
							class="m-2"
							placeholder="选择筛选条件"
							style="width: 240px"
						>
							<el-option
								v-for="item in selectData.capacityOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</view>
				</view>
				<view class="bottom_cont">
					<view class="cont_title">
						<view class="serial_num">排名</view>
						<view class="name">姓名</view>
						<view class="progress">占比</view>
						<view class="fraction">分数</view>
					</view>
					<view class="user_ranking">
						<vue3-scroll-seamless
							:classOptions="classOptions"
							:dataList="data.capacityList"
							class="scroll-wrap"
						>
							<view class="ranking_item" v-for="(item, index) in data.capacityList" :key="index">
								<view class="serial_num" :style="index == 0 ? 'background: #ff3232' : (index == 1 ? 'background: #ff9800' : (index == 2 ? 'background: #ffd200' : 'background: #5470c6'))">{{ index + 1 }}</view>
								<view class="name">{{ item.name }}</view>
								<view class="progress"><el-progress :percentage="100" :format="format" /></view>
								<view class="fraction">{{ item.fraction }}</view>
							</view>
						</vue3-scroll-seamless>
					</view>
				</view>
			</view>
			<view class="bottom_right">
				<view class="_title">
					<view class="title">综合能力分析</view>
				</view>
				<view class="bottom_cont">
					<view ref="center_EchartAnalysis" class="bottom_Echart"></view>
				</view>
			</view>
		</view>
		<el-dialog v-model="dialogVisible" title="自定义权重设置" width="30%">
			<view v-for="(item, index) in data.sliderList" :key="index">
				<view>{{ item.label }}</view>
				<view style="display: flex;align-items: center;">
					<el-slider v-model="item.value" />
					<view style="width: 55px;text-align: right;">{{ item.value || 0 }}%</view>
				</view>
			</view>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="handleConfirm">保存设置</el-button>
				</span>
			</template>
		</el-dialog>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, onMounted, onUnmounted } from 'vue';
	import * as echarts from 'echarts';
	import DataDisplay from './components/dataDisplay.vue';
	const format = (percentage) => (percentage === 100 ? '' : ``);
	const data = reactive({
		capacityList: [
			{
				name: '程海超',
				fraction: '98'
			},
			{
				name: '邓海阳',
				fraction: '95.3'
			},
			{
				name: '陈涵亮',
				fraction: '94'
			},
			{
				name: '万浩波',
				fraction: '92.5'
			},
			{
				name: '徐涵衍',
				fraction: '91'
			},
			{
				name: '陈浩',
				fraction: '90.8'
			},
			{
				name: '宋鹏海',
				fraction: '90.5'
			},
			{
				name: '徐鸿哲',
				fraction: '90.2'
			},
			{
				name: '张雅',
				fraction: '89.8'
			},
			{
				name: '宋明宇',
				fraction: '89.5'
			},
		],
		list: [
			{
				title: '安检员总数',
				percentage: '2',
				current_month: '2100',
				status: true
			},
			{
				title: '平均综合评分',
				percentage: '1.2',
				current_month: '96.3',
				status: true
			},
			{
				title: '查获物品总数',
				percentage: '1.2',
				current_month: '5013',
				status: true
			},
			{
				title: '违规事件数',
				percentage: '0.2',
				current_month: '42',
				status: false
			}
		],
		sliderList: [{
			label: '查获能力权重',
			value: ''
			},
		 {
		 	label: '业务知识学握程度权重',
		 	value: ''
		 },
		 {
		 	label: '设备熟练程度权重',
		 	value: ''
		 },
		 {
		 	label: '工作态度权重',
		 	value: ''
		 },
		 {
		 	label: '按章作业规范度权重',
		 	value: ''
		 }]
	});
	const selectData = reactive({
		selectOptions: [
			{
				value: '1',
				label: '近一周'
			},
			{
				value: '2',
				label: '近三个月'
			},
			{
				value: '3',
				label: '近一年'
			},
		],
		capacityOptions: [
			{
				value: '0',
				label: '综合能力'
			},
			{
				value: '1',
				label: '查获能力'
			},
			{
				value: '2',
				label: '作风建设'
			},
			{
				value: '3',
				label: '操作能力'
			},
			{
				value: '4',
				label: '业务知识'
			},
			{
				value: '5',
				label: '应急能力'
			},
		],
		schemeOptions: [
			{
				value: '1',
				label: '默认权重方案'
			}
		]
	});
	const classOptions = {
	  limitMoveNum: 6,
	};
	const activeList = reactive(['科', '班组', '个人']);
	const selectVal = reactive({
		selectValue: '',
		capacityValue: '0',
		schemeValue: '1'
	});
	const activeName = ref('0');
	const chart = ref(null);
	const top_Echart = ref(null);
	const chartOption = ref({
		legend: {
			data: ['旅检一科', '旅检二科', '旅检三科', '旅检四科'],
			right: '10%',
			top: '10%',
			orient: 'vertical',
			textStyle: {
				color: '#fff',
			},
		},
		radar: {
			indicator: [
				{ name: '查获能力', max: 100 },
				{ name: '作风建设', max: 100 },
				{ name: '操作能力', max: 100 },
				{ name: '应急能力', max: 100 },
				{ name: '业务知识', max: 100 },
			],
			center: ['45%', '50%'],
			name: {
				// 修改指标名称的文本样式
				textStyle: {
					color: '#fff', // 设置文字颜色为红色
					fontSize: 12, // 设置文字大小
					fontWeight: 'bold' // 设置文字粗细
				}
			}
		},
		series: [
			{
				name: 'Budget vs spending',
				type: 'radar',
				data: [
					{
						value: [80, 70, 75, 80, 80, 80],
						name: '旅检一科',
						label: {
							show: true,
							color: '#fff',
						},
						areaStyle: {
							color: '#a9bdff',
						},
						itemStyle: {
							color: 'blue',
						},
					},
					{
						value: [8, 50, 25, 70, 60, 80],
						name: '旅检二科',
						label: {
							show: true,
							color: '#fff',
						},
						areaStyle: {
							color: '#ffff7f',
						},
						itemStyle: {
							color: 'yellow',
						},
					},
					{
						value: [30, 40, 15, 40, 70, 60],
						name: '旅检三科',
						label: {
							show: true,
							color: '#fff',
						},
						areaStyle: {
							color: '#ff557f',
						},
						itemStyle: {
							color: 'red',
						},
					},
					{
						value: [21, 10, 55, 20, 60, 50],
						name: '旅检四科',
						label: {
							show: true,
							color: '#fff',
						},
						areaStyle: {
							color: '#aaff7f',
						},
						itemStyle: {
							color: 'green',
						},
					},
				],
			},
		],
	});
	
	const chartRight = ref(null);
	const echart_right = ref(null);
	const chartRightOption = ref({
		xAxis: {
			type: 'category',
			data: ['1', '2', '3', '4', '5'],
			axisLabel: {
				color: '#fff'
			},
			categoryGap: '50%',
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				color: '#fff'
			},
		},
		series: [
			{
				data: [95, 93, 90, 88, 85],
				type: 'bar',
				showBackground: true,
				backgroundStyle: {
					color: 'rgba(180, 180, 180, 0.2)'
				}
			}
		]
	});
	
	const chartAnalysis = ref(null);
	const dialogVisible = ref(false)
	const center_EchartAnalysis = ref(null);
	const chartAnalysisOption = 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: [
					{ value: 735, name: '优秀(90-100)' },
					{ value: 1048, name: '良好(80-89)' },
					{ value: 580, name: '中等(70-79)' },
					{ value: 484, name: '需提升(<70)' },
				]
			}
		]
	});
	
	const initChart = () => {
		chart.value = echarts.init(top_Echart.value, 'macarons');
		chart.value.setOption(chartOption.value);
		chartRight.value = echarts.init(echart_right.value, 'macarons');
		chartRight.value.setOption(chartRightOption.value);
		chartAnalysis.value = echarts.init(center_EchartAnalysis.value, 'macarons');
		chartAnalysis.value.setOption(chartAnalysisOption.value);
	};
	
	const changeActive = (ind) => {
		if (ind == 0) {
			chartOption.value = {
				legend: {
					data: ['旅检一科', '旅检二科', '旅检三科', '旅检四科'],
					right: '10%',
					top: '10%',
					orient: 'vertical',
					textStyle: {
						color: '#fff',
					},
				},
				radar: {
					indicator: [
						{ name: '查获能力', max: 100 },
						{ name: '作风建设', max: 100 },
						{ name: '操作能力', max: 100 },
						{ name: '应急能力', max: 100 },
						{ name: '业务知识', max: 100 },
					],
					center: ['45%', '50%'],
					name: {
						// 修改指标名称的文本样式
						textStyle: {
							color: '#fff', // 设置文字颜色为红色
							fontSize: 12, // 设置文字大小
							fontWeight: 'bold' // 设置文字粗细
						}
					}
				},
				series: [
					{
						name: 'Budget vs spending',
						type: 'radar',
						data: [
							{
								value: [80, 70, 75, 80, 80, 80],
								name: '旅检一科',
								label: {
									show: true,
									color: '#fff',
								},
								areaStyle: {
									color: '#a9bdff',
								},
								itemStyle: {
									color: 'blue',
								},
							},
							{
								value: [8, 50, 25, 70, 60, 80],
								name: '旅检二科',
								label: {
									show: true,
									color: '#fff',
								},
								areaStyle: {
									color: '#ffff7f',
								},
								itemStyle: {
									color: 'yellow',
								},
							},
							{
								value: [30, 40, 15, 40, 70, 60],
								name: '旅检三科',
								label: {
									show: true,
									color: '#fff',
								},
								areaStyle: {
									color: '#ff557f',
								},
								itemStyle: {
									color: 'red',
								},
							},
							{
								value: [21, 10, 55, 20, 60, 50],
								name: '旅检四科',
								label: {
									show: true,
									color: '#fff',
								},
								areaStyle: {
									color: '#aaff7f',
								},
								itemStyle: {
									color: 'green',
								},
							},
						],
					},
				],
			}
		} else if (ind == 1) {
			chartOption.value = {
				legend: {
					data: ['李攀班', '李士强班', '程莎莎班', '李延班'],
					right: '10%',
					top: '10%',
					orient: 'vertical',
					textStyle: {
						color: '#fff',
					},
				},
				radar: {
					indicator: [
						{ name: '查获能力', max: 100 },
						{ name: '作风建设', max: 100 },
						{ name: '操作能力', max: 100 },
						{ name: '应急能力', max: 100 },
						{ name: '业务知识', max: 100 },
					],
					center: ['45%', '50%'],
					name: {
						// 修改指标名称的文本样式
						textStyle: {
							color: '#fff', // 设置文字颜色为红色
							fontSize: 12, // 设置文字大小
							fontWeight: 'bold' // 设置文字粗细
						}
					}
				},
				series: [
					{
						name: 'Budget vs spending',
						type: 'radar',
						data: [
							{
								value: [10, 70, 25, 40, 10, 60],
								name: '李攀班',
								label: {
									show: true,
									color: '#fff',
								},
								areaStyle: {
									color: '#a9bdff',
								},
								itemStyle: {
									color: 'blue',
								},
							},
							{
								value: [18, 30, 75, 40, 38, 80],
								name: '李士强班',
								label: {
									show: true,
									color: '#fff',
								},
								areaStyle: {
									color: '#ffff7f',
								},
								itemStyle: {
									color: 'yellow',
								},
							},
							{
								value: [80, 60, 25, 30, 50, 60],
								name: '程莎莎班',
								label: {
									show: true,
									color: '#fff',
								},
								areaStyle: {
									color: '#ff557f',
								},
								itemStyle: {
									color: 'red',
								},
							},
							{
								value: [22, 15, 35, 10, 65, 50],
								name: '李延班',
								label: {
									show: true,
									color: '#fff',
								},
								areaStyle: {
									color: '#aaff7f',
								},
								itemStyle: {
									color: 'green',
								},
							},
						],
					},
				],
			}
		} else {
			chartOption.value = {
				legend: {
					data: ['李攀', '李士强'],
					right: '10%',
					top: '10%',
					orient: 'vertical',
					textStyle: {
						color: '#fff',
					},
				},
				radar: {
					indicator: [
						{ name: '查获能力', max: 100 },
						{ name: '作风建设', max: 100 },
						{ name: '操作能力', max: 100 },
						{ name: '应急能力', max: 100 },
						{ name: '业务知识', max: 100 },
					],
					center: ['45%', '50%'],
					name: {
						// 修改指标名称的文本样式
						textStyle: {
							color: '#fff', // 设置文字颜色为红色
							fontSize: 12, // 设置文字大小
							fontWeight: 'bold' // 设置文字粗细
						}
					}
				},
				series: [
					{
						name: 'Budget vs spending',
						type: 'radar',
						data: [
							{
								value: [20, 70, 55, 80, 50, 30],
								name: '李攀',
								label: {
									show: true,
									color: '#fff',
								},
								areaStyle: {
									color: '#a9bdff',
								},
								itemStyle: {
									color: 'blue',
								},
							},
							{
								value: [48, 50, 20, 70, 30, 80],
								name: '李士强',
								label: {
									show: true,
									color: '#fff',
								},
								areaStyle: {
									color: '#ffff7f',
								},
								itemStyle: {
									color: 'yellow',
								},
							}
						],
					},
				],
			}
		}
		chart.value.setOption(chartOption.value);
		chartRight.value = echarts.init(echart_right.value, 'macarons');
		activeName.value = ind;
	};
	
	// 确认编辑权重
	const handleConfirm = () => {
	  dialogVisible.value = false;
	};
	
	onMounted(() => {
		initChart();
		window.addEventListener('resize', () => {
			chart.value.resize();
			chartAnalysis.value.resize();
			chartRight.value.resize();
		});
	});
	
	onUnmounted(() => {
		if (!chart.value) {
			return;
		}
		chart.value.dispose();
		chart.value = null;
		if (!chartAnalysis.value) {
			return;
		}
		chartAnalysis.value.dispose();
		chartAnalysis.value = null;
		if (!chartRight.value) {
			return;
		}
		chartRight.value.dispose();
		chartRight.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 .demo-progress .el-progress--line {
	  margin-bottom: 15px;
	  width: 100%;
	}
	.el-progress {
		width: 100%;
		background: #fff;
	}
	.abilityPortrait {
		width: 100%;
		position: fixed;
		height: 100%;
		background: url('../../../assets/images/bg-99b6904c.png');
		background-size: 100% 100%;
		overflow-y: auto;
		padding-bottom: 150px;
		.root {
			width: calc(100% - 200px);
			display: flex;
			justify-content: space-between;
			margin-top: 10px;
		}
		._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;
			}
			.filter_tag {
				padding-right: 15px;
				.label {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
					background: #11134b;
					padding: 4px 8px;
					margin: -4px 0;
					border-radius: 4px;
					color: #fbffff;
					cursor: pointer;
				}
				.active {
					background: #171b75;
				}
			}
		}
		.top {
			width: calc(100% - 220px);
			display: flex;
			justify-content: space-between;
			margin: 10px;
			.top_left {
				width: 49%;
				margin-right: 1%;
				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
				display: inline-block;
				.top_cont {
					width: 100%;
					display: flex;
					justify-content: center;
					.top_Echart {
						width: 100%;
						height: 320px;
					}
				}
			}
			.top_right {
				width: 50%;
				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
				display: inline-block;
				.top_cont {
					width: 100%;
					display: flex;
					justify-content: center;
					.top_Echart {
						width: 100%;
						height: 320px;
					}
				}
			}
		}
		.bottom {
			width: calc(100% - 220px);
			display: flex;
			justify-content: space-between;
			margin: 10px;
			.bottom_left {
				width: 49%;
				margin-right: 1%;
				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
				display: inline-block;
				.bottom_cont {
					width: 100%;
					.cont_title {
						width: 80%;
						margin-left: 10%;
						height: 30px;
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #fff;
						border-bottom: 1px solid #ffffff40;
						padding-bottom: 15px;
						margin-top: 10px;
						.serial_num {
							width: 40px;
						}
						.progress {
							width: 60%;
							margin-left: 20px;
							text-align: center;
						}
						.name {
							width: 20%;
							padding-left: 15px;
							text-align: center;
						}
						.fraction {
							width: 15%;
							text-align: right;
						}
					}
					.user_ranking {
						width: 88%;
						height: 244px;
						margin-left: 10%;
						padding: 0 10px;
						overflow: hidden;
						display: inline-block;
						color: #fff;
						.ranking_item {
							width: 92%;
							height: 40px;
							display: flex;
							align-items: center;
							border-bottom: 1px solid #ffffff40;
							.serial_num {
								width: 20px;
								height: 20px;
								border-radius: 50%;
								text-align: center;
								line-height: 20px;
								background: red;
								font-size: 13px;
							}
							.progress {
								width: 60%;
								margin-left: 20px;
							}
							.name {
								width: 20%;
								padding-left: 25px;
								text-align: center;
							}
							.fraction {
								width: 15%;
								text-align: right;
							}
						}
					}
				}
			}
			.bottom_right {
				width: 50%;
				background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
				display: inline-block;
				.bottom_cont {
					width: 100%;
					display: flex;
					justify-content: center;
					.bottom_Echart {
						width: 100%;
						height: 280px;
					}
				}
			}
		}
	}
</style>