<template>
	<Card title="今日报警统计">
		<div class="top-bg">
			<div class="num">{{ totalAlarm }}</div>
			<div class="styleImg"></div>
			<div id="echartsTest" style="width: 100%; height: 100%"></div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import Card from "@/components/card.vue";
import { getAlarmCountTotalApi } from "@/api/modules/headNoise";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
// let timer = ref(null);
// //角度，用来做简单的动画效果的
// let angle = ref(0);
// let value = ref(55.33);
const totalAlarm = ref(0);
//图形右侧数据
let totalData = ref([
	{
		name: "噪声报警",
		value: 0,
		radio: 0
	},
	{
		name: "PM2.5超标报警",
		value: 0,
		radio: 0
	},
	{
		name: "PM10超标报警",
		value: 0,
		radio: 0
	},
	{
		name: "TSP报警",
		value: 0,
		radio: 0
	},
	{
		name: "温度报警",
		value: 0,
		radio: 0
	},
	{
		name: "湿度报警",
		value: 0,
		radio: 0
	},
	{
		name: "风速报警",
		value: 0,
		radio: 0
	}
]);
//控制图形数据比例
let trafficWay = reactive([
	{
		name: "噪声报警",
		value: 10
	},
	{
		name: "PM2.5超标报警",
		value: 10
	},
	{
		name: "PM10超标报警",
		value: 10
	},
	{
		name: "TSP报警",
		value: 10
	},
	{
		name: "温度报警",
		value: 10
	},
	{
		name: "湿度报警",
		value: 10
	},
	{
		name: "风速报警",
		value: 10
	}
]);
let data = reactive([]);
// let color = reactive(["#5A5EE0", "#34B1FA", "#53E4D8", "#52B06A", "#E8E65A", "#F06C48"]);
let color = reactive(["#82FBEA", "#EEA959", "#4CC4F8 ", "#E0D838", "#EC6266", "#6375C7", "#81F279"]);
for (var i = 0; i < trafficWay.length; i++) {
	data.push(
		{
			value: trafficWay[i].value,
			name: trafficWay[i].name,
			itemStyle: {
				normal: {
					borderWidth: 0,
					shadowBlur: 2,
					borderColor: color[i],
					shadowColor: color[i]
				}
			}
		},
		{
			value: 2,
			name: "",
			itemStyle: {
				normal: {
					label: {
						show: false
					},
					labelLine: {
						show: false
					},
					color: "rgba(0, 0, 0, 0)",
					borderColor: "rgba(0, 0, 0, 0)",
					borderWidth: 0
				}
			}
		}
	);
}
const seriesOption = ref([
	// {
	// 	name: "ring5",
	// 	type: "custom",
	// 	coordinateSystem: "none",
	// 	renderItem: function (params, api) {
	// 		return {
	// 			type: "arc",
	// 			shape: {
	// 				cx: api.getWidth() / 4,
	// 				cy: api.getHeight() / 2,
	// 				r: 80,
	// 				startAngle: ((0 + angle.value) * Math.PI) / 180,
	// 				endAngle: ((90 + angle.value) * Math.PI) / 180
	// 			},
	// 			style: {
	// 				stroke: "#0CD3DB",
	// 				fill: "transparent",
	// 				lineWidth: 1.5
	// 			},
	// 			silent: true
	// 		};
	// 	},
	// 	data: [0]
	// },
	// {
	// 	name: "ring5",
	// 	type: "custom",
	// 	coordinateSystem: "none",
	// 	renderItem: function (params, api) {
	// 		return {
	// 			type: "arc",
	// 			shape: {
	// 				cx: api.getWidth() / 4,
	// 				cy: api.getHeight() / 2,
	// 				r: 80,
	// 				startAngle: ((180 + angle.value) * Math.PI) / 180,
	// 				endAngle: ((270 + angle.value) * Math.PI) / 180
	// 			},
	// 			style: {
	// 				stroke: "#0CD3DB",
	// 				fill: "transparent",
	// 				lineWidth: 1.5
	// 			},
	// 			silent: true
	// 		};
	// 	},
	// 	data: [0]
	// },
	// {
	// 	name: "ring5",
	// 	type: "custom",
	// 	coordinateSystem: "none",
	// 	renderItem: function (params, api) {
	// 		return {
	// 			type: "arc",
	// 			shape: {
	// 				cx: api.getWidth() / 4,
	// 				cy: api.getHeight() / 2,
	// 				r: 90,
	// 				startAngle: ((270 + -angle.value) * Math.PI) / 180,
	// 				endAngle: ((40 + -angle.value) * Math.PI) / 180
	// 			},
	// 			style: {
	// 				stroke: "#0CD3DB",
	// 				fill: "transparent",
	// 				lineWidth: 1.5
	// 			},
	// 			silent: true
	// 		};
	// 	},
	// 	data: [0]
	// },
	// {
	// 	name: "ring5",
	// 	type: "custom",
	// 	coordinateSystem: "none",
	// 	renderItem: function (params, api) {
	// 		return {
	// 			type: "arc",
	// 			shape: {
	// 				cx: api.getWidth() / 4,
	// 				cy: api.getHeight() / 2,
	// 				r: 90,
	// 				startAngle: ((90 + -angle.value) * Math.PI) / 180,
	// 				endAngle: ((220 + -angle.value) * Math.PI) / 180
	// 			},
	// 			style: {
	// 				stroke: "#0CD3DB",
	// 				fill: "transparent",
	// 				lineWidth: 1.5
	// 			},
	// 			silent: true
	// 		};
	// 	},
	// 	data: [0]
	// },
	// {
	// 	name: "ring5",
	// 	type: "custom",
	// 	coordinateSystem: "none",
	// 	renderItem: function (params, api) {
	// 		let x0 = api.getWidth() / 4;
	// 		let y0 = api.getHeight() / 2;
	// 		let r = 90;
	// 		let point = getCirlPoint(x0, y0, r, 90 + -angle.value);
	// 		return {
	// 			type: "circle",
	// 			shape: {
	// 				cx: point.x,
	// 				cy: point.y,
	// 				r: 4
	// 			},
	// 			style: {
	// 				stroke: "#0CD3DB", //粉
	// 				fill: "#0CD3DB"
	// 			},
	// 			silent: true
	// 		};
	// 	},
	// 	data: [0]
	// },
	// {
	// 	name: "ring5", //绿点
	// 	type: "custom",
	// 	coordinateSystem: "none",
	// 	renderItem: function (params, api) {
	// 		let x0 = api.getWidth() / 4;
	// 		let y0 = api.getHeight() / 2;
	// 		let r = 90;
	// 		let point = getCirlPoint(x0, y0, r, 270 + -angle.value);
	// 		return {
	// 			type: "circle",
	// 			shape: {
	// 				cx: point.x,
	// 				cy: point.y,
	// 				r: 4
	// 			},
	// 			style: {
	// 				stroke: "#0CD3DB", //绿
	// 				fill: "#0CD3DB"
	// 			},
	// 			silent: true
	// 		};
	// 	},
	// 	data: [0]
	// },

	{
		name: "",
		type: "pie",
		center: ["25%", "55%"],
		clockWise: false,
		radius: [70, 60],
		hoverAnimation: false,
		itemStyle: {
			normal: {
				label: {
					show: false
				}
			}
		},
		data: data
	},
	//
	// {
	//     type: 'pie',
	//     radius: [70, 70],
	//     hoverAnimation: false,
	//     clockWise: false,
	//     itemStyle: {
	//         normal: {
	//             borderColor: '#34B0FA',
	//             borderWidth: 1,
	//         }
	//     },
	//     label: {
	//         show: false
	//     },
	//     data: [200]
	// },
	{
		type: "pie",
		center: ["25%", "54%"],

		radius: [50, 50],
		zlevel: 2,
		silent: true,
		label: {
			normal: {
				show: false
			}
		},
		labelLine: {
			normal: {
				show: false
			}
		},
		data: _pie3()
	}
]);

let option = ref({
	// backgroundColor: "#0A2E5D",
	color: color,
	center: ["25%", "50%"],

	title: {
		text: "报警总数",
		top: "57%",
		textAlign: "center",
		left: "24%",
		textStyle: {
			color: "#fff",
			fontSize: 14,
			fontWeight: "400"
		}
	},
	tooltip: {
		show: false
	},
	legend: {
		show: true,
		icon: "rect",
		itemGap: 20,
		itemWidth: 15,
		itemHeight: 15,
		orient: "vertical",
		x: "right",
		formatter: function (name) {
			let num;
			for (let i = 0; i < totalData.value.length; i++) {
				if (totalData.value[i].name === name) {
					let cont = 9;
					let stringArr = "  ";
					// if (name.length == 4) {
					// 	cont = 19;
					// } else if (name.length == 5) {
					// 	cont = 20;
					// }
					// for (let j = 0; j < cont; j++) {
					// 	stringArr += "";
					// }
					num = name + stringArr + totalData.value[i].value;
				}
			}
			return num;
		},
		data: ["噪声报警", "PM2.5超标报警", "PM10超标报警", "TSP报警", "温度报警", "湿度报警", "风速报警"],
		top: 20,
		right: 300,
		left: 280,
		bottom: 10,
		align: "left",
		textStyle: {
			color: "#fff"
		},
		itemGap: 15
	},
	toolbox: {
		show: false
	},
	series: seriesOption.value
});

function _pie3() {
	let dataArr = [];
	for (var i = 0; i < 100; i++) {
		if (i % 2 === 0) {
			dataArr.push({
				name: (i + 1).toString(),
				value: 10,
				itemStyle: {
					normal: {
						color: "#5A5DE0",
						borderWidth: 4,
						borderColor: "#87E0FB"
					}
				}
			});
		} else {
			dataArr.push({
				name: (i + 1).toString(),
				value: 20,
				itemStyle: {
					normal: {
						color: "rgba(0,0,0,0)",
						borderWidth: 0,
						borderColor: "rgba(0,0,0,0)"
					}
				}
			});
		}
	}
	return dataArr;
}
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) {
	let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
	let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
	return {
		x: x1,
		y: y1
	};
}

// function draw(echartsTest) {
// 	angle.value = angle.value + 3;
// 	echartsTest.setOption(option, true);
// 	//window.requestAnimationFrame(draw);
// }
//获取今日报警统计
const getList = async () => {
	const res = await getAlarmCountTotalApi({
		sn: store.sn,
		selectType: 1
	});
	// console.log("获取今日报警统计", res);
	if (res.result) {
		totalAlarm.value = res.result.totalAlarm;
		for (let i = 0; i < totalData.value.length; i++) {
			if (totalData.value[i].name == "噪声报警") {
				totalData.value[i].value = res.result.noiseNum;
			} else if (totalData.value[i].name == "PM2.5超标报警") {
				totalData.value[i].value = res.result.pm25Num;
			} else if (totalData.value[i].name == "PM10超标报警") {
				totalData.value[i].value = res.result.pm10Num;
			} else if (totalData.value[i].name == "TSP报警") {
				totalData.value[i].value = res.result.tspNum;
			} else if (totalData.value[i].name == "温度报警") {
				totalData.value[i].value = res.result.temperatureNum;
			} else if (totalData.value[i].name == "湿度报警") {
				totalData.value[i].value = res.result.humidityNum;
			} else if (totalData.value[i].name == "风速报警") {
				totalData.value[i].value = res.result.windspeedNum;
			}
		}
		console.log("获取今日报警统计", totalData.value);
		draw();
	}
};

function draw() {
	console.log("绘图数据", option.value);
	let echartsTest = echarts.init(document.getElementById("echartsTest"));
	echartsTest.setOption(option.value);
}
onMounted(async () => {
	getList();
	// setTimeout(function () {
	// 	timer = setInterval(function () {
	// 		// 	//用setInterval做动画感觉有问题
	// 		draw(echartsTest);
	// 	}, 100);
	// }, 700);
});
</script>

<style lang="scss" scoped>
.top-bg {
	position: relative;
	height: 100%;
	.num {
		width: 100px;
		text-align: center;
		font-family: sadigitalNumber;
		font-size: 20px;
		color: #fff;
		position: absolute;
		top: 41%;
		left: 15%;
		z-index: 9;
	}
	.styleImg {
		left: 5%;
		top: 17%;
		width: 40%;
		position: absolute;
		height: 75%;
		background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
		background-size: 100% 100%;
	}
}
</style>
