<template>
	<div class="score-globe-container">
		<MOSTY.Assort title="甘肃省烟草行业预警得分"></MOSTY.Assort>
		<div class="score-globe-content">
			<div class="score-globe">
				<div id="waveChart" class="liquidfill"></div>
			</div>
			<div class="score-globe-detail">
				<div v-for="(item, index) in globeDetailList" :key="index" class="score-globe-item">
					<span class="score-globe-item-title">
						{{ item.name }} ({{ item.bracket }})
					</span>
					<span class="score-globe-item-value">
						{{ item.value }}
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import * as MOSTY from "@/components/MyComponents/index";
import 'echarts-liquidfill';

const globeDetailList = ref(
	[
		{
			name: '安全责任',
			value: 99.99,
			bracket: 100
		},
		{
			name: '双层预防',
			value: 99.99,
			bracket: 100
		},
		{
			name: '培训教育',
			value: 99.99,
			bracket: 100
		},
		{
			name: '应急管理',
			value: 99.99,
			bracket: 100
		},
		{
			name: '重点领域',
			value: 99.99,
			bracket: 100
		},
		{
			name: '事故事件',
			value: 99.99,
			bracket: '扣分项目'
		}
	]
);
/**
 * @description 设置波浪图
 */
const setWaveChart = (value) => {
	const cssText = document.documentElement.style.cssText;
	const color = cssText.match(/--el-color-primary: (.*);/)[1] || '#007457';
	const chart = echarts.init(document.getElementById('waveChart'));
	const option = {
		series: [
			{
				type: 'liquidFill',
				// 水波图的配置
				data: [value], // 设置水位，值为0到1之间
				radius: '90%', // 设置图的大小
				color: [color],
				outline: {
					borderDistance: 0, // 外边框距离
					itemStyle: {
						borderWidth: 2, // 外边框宽度
						borderColor: color // 外边框颜色
					}
				},
				backgroundStyle: {
					color: '#fff' // 背景色
				},
				label: {
					show: false
				}
			},
		],
	};
	chart.setOption(option);
}
onMounted(() => {
	setWaveChart(0.22);
})

</script>

<style lang="scss" scoped>
.score-globe-container {
	// width: calc(50% - 10px);
	height: 100%;
	padding: 0 10px 10px;
	background-color: #fff;
}

.score-globe-content {
	display: flex;
	align-items: center;
}

.score-globe {
	width: 200px;
	height: 200px;

	.liquidfill {
		width: 100%;
		height: 100%;
	}
}

.score-globe-detail {
	display: flex;
	justify-content: center;
	width: calc(100% - 200px);
	flex-wrap: wrap;
	color: #000;

	.score-globe-item {
		font-weight: bolder;
		padding: 1.8%;

		.score-globe-item-title {
			display: inline-block;
			width: 10.5em;
		}

		.score-globe-item-value {
			display: inline-block;
			min-width: 5em;
			color: var(--el-color-primary);
		}
	}
}
</style>