<template>
	<Card title="历史告警趋势">
		<div class="topLeftBox">
			<div class="history-content">
				<div class="selectRight">
					<div class="rightHeader">
						<div class="day Selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">24时</div>
						<div class="week Selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">7日</div>
						<div class="month Selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">30日</div>
					</div>
				</div>
				<div id="AIHistoryTrend" ref="AIHistoryTrend" style="width: 100%; height: 100%"></div>
			</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import Card from "@/components/card.vue";
import symbolIcon from "@/assets/images/lineSymbol.png";
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
// import { getSelectDataListApi } from "@/api/modules/distribution";
// import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores";
import mitts from "@/utils/bus"; //兄弟组件传值
const store = GlobalStore();
// x轴
let twenty_four_time = ref(["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00"] as any);
// Y轴单位
let unit = ref("单位:V" as any);
// Y轴数据
let yData = ref([10, 5, 20, 25, 15, 25, 12, 13, 14, 20] as any);
// 图表数据项
let option = ref(null as any);

// 选中
let checked = ref(1);
function getNowData(type: any) {
	checked.value = type;
	// 初始化option
	// initOption();
}
function getWeekData(type: any) {
	checked.value = type;
	// 初始化option
	// initOption();
}
function getMonthData(type: any) {
	checked.value = type;
	// 初始化option
	// initOption();
}

function initOption() {
	option.value = {
		// backgroundColor: '#071c3a',
		title: {
			// text: '日用气量分析',
			textStyle: {
				align: "center",
				color: "#fff",
				fontSize: 20
			},
			top: "2%",
			left: "center"
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				lineStyle: {
					color: {
						type: "linear",
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{
								offset: 0,
								color: "rgba(0, 255, 233,0)"
							},
							{
								offset: 0.5,
								color: "rgba(255, 255, 255,1)"
							},
							{
								offset: 1,
								color: "rgba(0, 255, 233,0)"
							}
						],
						global: false
					}
				}
			}
		},
		grid: {
			top: "20%",
			left: "6%",
			right: "4%",
			bottom: "18%"
			// containLabel: true
		},
		xAxis: [
			{
				type: "category",
				axisLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				splitArea: {
					// show: true,
					color: "#f00",
					lineStyle: {
						color: "#f00"
					}
				},
				axisLabel: {
					color: "#fff"
				},
				splitLine: {
					show: false
				},
				boundaryGap: false,
				data: twenty_four_time.value
			}
		],

		yAxis: [
			{
				type: "value",
				// name: unit.value,
				nameTextStyle: {
					color: "#fff",
					nameLocation: "start"
				},
				min: 0,
				// max: 140,
				splitNumber: 3,
				splitLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				axisLabel: {
					show: true,
					margin: 20,
					textStyle: {
						color: "#fff"
					}
				},
				axisTick: {
					show: true
				}
			}
		],
		series: [
			{
				type: "line",
				// smooth: true, //是否平滑
				showAllSymbol: true,
				symbol: `image://${symbolIcon}`,
				// symbol: "circle",
				smooth: 0.8,
				symbolSize: 30,
				label: {
					show: false,
					position: "top",
					textStyle: {
						color: "#fff"
					}
				},
				itemStyle: {
					color: "#4AC0F3",
					borderColor: "#4AC0F3",
					borderWidth: 5,
					shadowColor: "rgba(0, 0, 0, .6)",
					shadowBlur: 0,
					lineStyle: {
						width: 0.1,
						normal: {
							color: "#fff",
							shadowBlur: 0
						}
					}
				},
				tooltip: {
					show: true
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(
							0,
							0,
							0,
							1,
							[
								{
									offset: 0,
									color: "rgba(74, 192, 243,0.5)"
								},
								{
									offset: 1,
									color: "rgba(74, 192, 243, 0.1)"
								}
							],
							false
						),
						shadowColor: "rgba(74, 192, 243, 1)",
						shadowBlur: 20
					}
				},
				data: yData.value
			}
		]
	};
}

function drawChart() {
	initOption();
	console.log("绘制前数据", yData.value);
	let AIHistoryTrend = echarts.init(document.getElementById("AIHistoryTrend"));
	AIHistoryTrend.setOption(option.value);
}

//获取当前时间-24小时
// function generateTimes() {
// 	let timeArrays = new Array(24).fill("");
// 	timeArrays.forEach((item, index) => (timeArrays[index] = (index < 10 ? "0" + index : index) + ":00"));
// 	return timeArrays;
// }

onMounted(async () => {
	drawChart();
});

// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
onBeforeUnmount(async () => {
	mitts.off("devSn");
});
</script>

<style lang="scss" scoped>
.topLeftBox {
	width: 100%;
	height: 100%;
	.title {
		height: 10%;
		line-height: 33px;
		text-align: left;
		font-size: calc(100vw * 18 / 1920);
		color: #ffffff;
		background: url("@/assets/images/titleBig.webp") no-repeat;
		background-size: 100% 100%;
		i {
			font-family: OPPOSansH;
			margin-left: 6%;
		}
	}
	.history-content {
		height: 100%;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		position: relative;
		.rightHeader {
			width: 20%;
			display: flex;
			position: absolute;
			z-index: 10;
			color: #fff;
			font-size: 10px;
			text-align: center;
			line-height: 20px;
			right: -1%;
			top: 5%;
			.Selected {
				height: 5%;
				background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
				background-size: 100% 100%;
				cursor: pointer;
			}
			.day {
				padding: 0 6%;
				margin-right: 5%;
				z-index: 99;
			}
			.week {
				padding: 0 6%;
				margin-right: 5%;
				z-index: 99;
			}
			.month {
				padding: 0 6%;
				z-index: 99;
			}
			.active {
				background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
				background-size: 100% 100%;
			}
		}
	}
}
::v-deep .el-input__wrapper {
	background: #112d59;
}
::v-deep .el-input__inner {
	color: #fff;
}
::v-deep .el-select .el-input .el-select__caret {
	color: #fff;
}
</style>
