<template>
	<Card title="群塔报警对比分析">
		<div class="num" v-if="towerAlarmData">{{ towerAlarmData.alarmNum }}</div>
		<div class="rightHeader">
			<div
				class="day"
				:class="airType == 1 ? 'active' : ''"
				@click="
					airType = 1;
					getTowerNumAndAlarmList(1);
				"
			>
				近7天
			</div>
			<div
				class="year"
				:class="airType == 2 ? 'active' : ''"
				@click="
					airType = 2;
					getTowerNumAndAlarmList(2);
				"
			>
				近30天
			</div>
			<div class="time">
				<el-date-picker
					v-model="rangeTime"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="YYYY-MM-DD"
					:clearable="false"
					@change="timeChange"
				/>
			</div>
		</div>
		<div class="styleImg"></div>
		<div id="echartsLeftCenter" style="width: 100%; height: 100%"></div>
	</Card>
</template>

<script lang="ts" setup>
import { onMounted, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import Card from "@/components/card.vue";
import { getDistinguishedNumApi } from "@/api/modules/tower";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
const airType = ref(1);

// let timer = ref(null);
// //角度，用来做简单的动画效果的
// let angle = ref(0);
// let value = ref(55.33);
let trafficWay = ref([
	{
		name: "回转限位",
		value: 12,
		radio: 0.13
	},
	{
		name: "风速",
		value: 52,
		radio: 0.01
	},
	{
		name: "力矩",
		value: 15,
		radio: 3.9
	},
	{
		name: "倾斜",
		value: 56,
		radio: 10.5
	},
	{
		name: "塔吊间碰撞",
		value: 17,
		radio: 0.4
	},
	{
		name: "吊钩限位",
		value: 19,
		radio: 85.3
	}
]);
let totalData = ref([
	{
		name: "回转限位",
		value: 12
	},
	{
		name: "风速",
		value: 52
	},
	{
		name: "力矩",
		value: 15
	},
	{
		name: "倾斜",
		value: 56
	},
	{
		name: "塔吊间碰撞",
		value: 17
	},
	{
		name: "吊钩限位",
		value: 19
	}
]);
let data = ref([]);
let color = ref(["#82FBEA", "#EEA959", "#4CC4F8 ", "#E0D838", "#EC6266", "#6375C7"]);
let seriesOption = ref([] as any);
let option = ref([] as any);
let rangeTime = ref("" as any);

function initOption() {
	seriesOption.value = [
		{
			name: "",
			type: "pie",
			center: ["25%", "50%"],
			clockWise: false,
			radius: [70, 60],
			hoverAnimation: false,
			itemStyle: {
				normal: {
					label: {
						show: false
					}
				}
			},
			data: data.value
		},
		{
			type: "pie",
			center: ["25%", "50%"],

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

	option.value = {
		// backgroundColor: "#0A2E5D",
		color: color.value,
		center: ["25%", "50%"],

		title: {
			text: "报警总数",
			top: "125",

			textAlign: "center",
			left: "24%",
			textStyle: {
				color: "#fff",
				fontSize: 12,
				fontWeight: "400"
			}
		},
		tooltip: {
			show: false
		},
		legend: {
			type:'scroll',
			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: dataName.value,
			top:50,
			right: 400,
			left: 280,
			bottom: 0,
			align: "left",
			textStyle: {
				color: "#fff"
			}
		},
		toolbox: {
			show: false
		},
		series: seriesOption.value
	};
}

function _pie3() {
	let dataArr = [];
	for (let 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;
}
let dataName = ref([] as any);
let towerAlarmData = ref(null as any);
const getTowerNumAndAlarmList = async (type: any) => {
	if (type == 1) {
		//近七天
		var currentDate = new Date();
		var pastDate = new Date();
		pastDate.setDate(pastDate.getDate() - 7);
		var currentYear = currentDate.getFullYear();
		var currentMonth = currentDate.getMonth() + 1;
		var currentDay = currentDate.getDate();
		var pastYear = pastDate.getFullYear();
		var pastMonth = pastDate.getMonth() + 1;
		var pastDay = pastDate.getDate();
		currentMonth >= 1 && currentMonth <= 9 ? (currentMonth = "0" + currentMonth) : "";
		currentDay >= 0 && currentDay <= 9 ? (currentDay = "0" + currentDay) : "";
		pastMonth >= 1 && pastMonth <= 9 ? (pastMonth = "0" + pastMonth) : "";
		pastDay >= 0 && pastDay <= 9 ? (pastDay = "0" + pastDay) : "";
		var currentTimer = currentYear + "-" + currentMonth + "-" + currentDay;
		var pastTimer = pastYear + "-" + pastMonth + "-" + pastDay;
		rangeTime.value = [pastTimer, currentTimer];
	} else if (type == 2) {
		//近30天
		var currentDate = new Date();
		var pastDate = new Date();
		pastDate.setDate(pastDate.getDate() - 30);
		var currentYear = currentDate.getFullYear();
		var currentMonth = currentDate.getMonth() + 1;
		var currentDay = currentDate.getDate();
		var pastYear = pastDate.getFullYear();
		var pastMonth = pastDate.getMonth() + 1;
		var pastDay = pastDate.getDate();
		currentMonth >= 1 && currentMonth <= 9 ? (currentMonth = "0" + currentMonth) : "";
		currentDay >= 0 && currentDay <= 9 ? (currentDay = "0" + currentDay) : "";
		pastMonth >= 1 && pastMonth <= 9 ? (pastMonth = "0" + pastMonth) : "";
		pastDay >= 0 && pastDay <= 9 ? (pastDay = "0" + pastDay) : "";
		var currentTimer = currentYear + "-" + currentMonth + "-" + currentDay;
		var pastTimer = pastYear + "-" + pastMonth + "-" + pastDay;
		rangeTime.value = [pastTimer, currentTimer];
	}
	const res: any = await getDistinguishedNumApi({
		projectSn: store.sn,
		queryStartTime: rangeTime.value[0],
		queryEndTime: rangeTime.value[1]
	});
	if (res.result) {
		console.log("群塔报警对比分析", res.result);

		let projectWorkerTypeOption: any = [];
		res.result.typeNumList.forEach(item => {
			// 只取有数据的工种
			towerAlarmData.value = res.result;
			// console.log("塔吊左中圆环图", res.result);
			// dataName.value.push(item.enterpriseName);
			if (item.num > 0) {
				projectWorkerTypeOption.push({
					value: item.num,
					name: item.typeName
				});
				dataName.value.push(item.typeName);
			}
		});
		trafficWay.value = projectWorkerTypeOption;
		totalData.value = projectWorkerTypeOption;
		initOption();
	}

	for (let i = 0; i < totalData.value.length; i++) {
		data.value.push({
			value: totalData.value[i].value,
			name: totalData.value[i].name,
			itemStyle: {
				normal: {
					borderWidth: 0,
					shadowBlur: 2,
					borderColor: color.value[i],
					shadowColor: color.value[i]
				}
			}
		});
	}
};
function timeChange(e: any) {
	if (e) {
		getTowerNumAndAlarmList(null);
	}
}
onMounted(async () => {
	// initOption();
	await getTowerNumAndAlarmList(1);
	draw();
});

function draw() {
	console.log("塔吊左侧圆环图", option.value);
	let echartsTest = echarts.init(document.getElementById("echartsLeftCenter"));
	echartsTest.setOption(option.value, true);
}

onBeforeUnmount(() => {
	// clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.num {
	width: 66px;
	text-align: center;
	font-family: sadigitalNumber;
	font-size: calc(100vw * 24 / 1920);
	color: #fff;
	position: absolute;
	top: 53%;
	left: 5.6%;
	z-index: 9;
}
.styleImg {
	left: 2.1%;
	top: 46%;
	width: 10%;
	position: absolute;
	height: 20%;
	background: url("@/assets/images/dustNoise/motionEffect.webp") no-repeat;
	background-size: cover;
}
.rightHeader {
	width: 10%;
	display: flex;
	position: absolute;
	z-index: 99;
	color: #fff;
	font-size: 10px;
	text-align: center;
	line-height: 2.5vh;
	left: 10%;
	top: 45.2%;
	.Selected {
		height: 5%;
		background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
		background-size: 100% 100%;
		cursor: pointer;
	}
	.day {
		height: 5%;
		width: 25%;
		margin-right: 5%;
		z-index: 99;
		margin-left: 8%;
	}
	.year {
		height: 5%;
		width: 25%;
		margin-right: 8%;
		z-index: 99;
	}
	.active {
		height: 5%;
		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
		background-size: 100% 100%;
	}
}
.time {
		position: absolute;
		z-index: 999;
		left: 64%;
		margin-top: -1%;
	}
::v-deep .el-input__wrapper {
	width: 250%;
	height: 0%;
	background: #0d2956;
}
::v-deep .el-range-separator {
	color: #ccc;
	font-size: 10px;
}
::v-deep .el-range-input {
	color: #ccc;
	font-size: 10px;
}
</style>
