<template>
	<div class="layer-group">
		<Module
			:loading="loading"
			:error="error"
			:info="bsMeta && bsMeta['utilities']"
		>
			<template #title> 设备状态数据 </template>
			<div class="w-full pb-2 pt-2">
				<div style="width: 100%; height: 150px" class="cirle-box">
					<div class="pie-content">
						<span class="pie-value">84%</span>
						<span class="pie-label">正常率</span>
					</div>
					<Ect :options="pieOptions" class="ectstyle" />
					<div class="paging">
						<div></div>
						<div class="paging-center">
							<div class="p-icon">
								<img :src="LEFT" />
							</div>
							<div class="p-icon">
								<img :src="RIGHT" />
							</div>
						</div>
						<div></div>
					</div>
				</div>
				<div class="bar">
					<Ect :options="barOptions" />
				</div>
			</div>
		</Module>
	</div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import * as echarts from 'echarts'
import LEFT from '@/assets/images/newLayerContrl/left.png'
import RIGHT from '@/assets/images/newLayerContrl/right.png'
const WorkOrder = ref([
	{
		lable: '机电任务',
		value: 1,
		content: '遂渝高速梅江收费站ETC亭内交换机需要维修',
	},
	{
		lable: '机电故障',
		value: 2,
		content: '交换机',
	},
	{
		lable: '机电任务',
		value: 1,
		content: '遂渝高速沙坪坝收费站广场入口广场ETC情报板',
	},
])
let pieOptions = ref({
	series: [
		{
			type: 'pie',
			radius: [40, 70],
			center: ['50%', '50%'],
			labelLine: {
				show: false,
			},
			itemStyle: {
				borderColor: '#002945',
				borderWidth: 4,
				// normal: {
				// 	color: function ({ value }) {
				// 		const colors = ['#0DF5FA', '#002945']
				// 		return value == 1
				// 			? colors[0]
				// 			: colors[1]
				// 	},
				// },
			},
			data: [
				{ value: 1, itemStyle: { color: '#0DF5FA' } },
				{ value: 1, itemStyle: { color: '#0DF5FA' } },
				{ value: 1, itemStyle: { color: '#0DF5FA' } },
				{ value: 1, itemStyle: { color: '#0DF5FA' } },
				{ value: 1, itemStyle: { color: '#0DF5FA' } },
				{ value: 1, itemStyle: { color: '#0DF5FA' } },
				{ value: 1, itemStyle: { color: '#0DF5FA' } },
				{ value: 1, itemStyle: { color: '#0DF5FA' } },
				{ value: 1, itemStyle: { color: '#0DF5FA' } },
				{ value: 1, itemStyle: { color: '#0DF5FA' } },
				{ value: 1, itemStyle: { color: '#0DF5FA' } },
				{ value: 1, itemStyle: { color: '#0DF5FA' } },
				{ value: 1, itemStyle: { color: '#0DF5FA' } },
				{ value: 1, itemStyle: { color: '#0DF5FA' } },
				{ value: 1, itemStyle: { color: '#002945' } },
				{ value: 1, itemStyle: { color: '#002945' } },
				{ value: 1, itemStyle: { color: '#002945' } },
				{ value: 1, itemStyle: { color: '#002945' } },
				{ value: 1, itemStyle: { color: '#002945' } },
				{ value: 1, itemStyle: { color: '#002945' } },
			],
		},
	],
})
let barOptions = ref({
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow',
		},
	},
	grid: {
		top: '35%',
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true,
	},
	xAxis: [
		{
			type: 'category',
			data: [
				'上升/下降',
				'关闭',
				'半开半闭',
				'开',
				'报警',
				'拥挤',
				'故障',
				'本地关',
				'正常',
				'禁止',
			],
			axisTick: {
				alignWithLabel: true,
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(42, 53, 68, 0.35)', // 轴线的颜色
				},
			},
			axisLabel: {
				textStyle: {
					fontSize: '12',
					fontFamily: 'PingFangSC-Regular',
					color: '#94A8C6', // 坐标值的具体的颜色
				},
				// 设置字体的倾斜角度
				interval: 0,
				rotate: -90,
			},
		},
	],
	yAxis: [
		{
			type: 'value',
			axisLabel: {
				textStyle: {
					fontSize: '12',
					fontFamily: 'PingFangSC-Regular',
					color: '#94A8C6', // 坐标值的具体的颜色
				},
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(42, 53, 68, 0.35)',
                    width: 3
				},
			},
		},
	],
	series: [
		{
			name: '',
			type: 'bar',
			barWidth: '8px',
			data: [80, 52, 85, 45, 58, 38, 41, 83, 26, 67],
            showBackground: true,
			backgroundStyle: {
				color: 'rgba(42, 53, 68, 0.35)',
			},
			itemStyle: {
				barBorderRadius: [2, 2, 0, 0],
				color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
					{
						offset: 0,
						color: '#FFFFFF',
					},
					{
						offset: 1,
						color: '#3DA5FF',
					},
				]),
			},
		},
	],
})
</script>

<style lang="postcss" scoped>
.layer-group {
	width: 100%;
}
.ectstyle {
	transform: rotateX(-60deg);
	top: -50px;
}
.bar {
	width: 100%;
	height: 150px;
	margin-top: 50px;
}
.cirle-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
}
.pie-content {
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-top: -90px;
}
.pie-value {
	font-size: 28px;
	font-weight: bold;
}
.pie-label {
	font-size: 14px;
	font-weight: 600;
}
.paging {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 110px;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.paging-center {
	width: 300px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: 5px;
}
.p-icon {
	width: 32px;
	height: 32px;
	cursor: pointer;
}
.p-icon > img {
	width: 100%;
	height: 100%;
}
</style>
