<template>
	<Card title="监测曲线">
		<div class="concrete-bottom-left">
			<div class="choice-right">
				<div class="day selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">温度</div>
				<div class="week selected" @click="getWeekData(2)" :class="checked == 2 ? 'active' : ''">温差</div>
				<div class="month selected" @click="getMonthData(3)" :class="checked == 3 ? 'active' : ''">降温速度</div>
			</div>

			<div class="concrete-content">
				<div class="select-right">
					<el-date-picker v-model="selectTime" type="date" size="small" />
				</div>
				<div id="concreteLine" ref="concreteLine" style="width: 100%; height: 100%"></div>
			</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import Card from "@/components/card.vue";
// import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";

import { onMounted, 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([] as any);
// Y轴单位
let unit = ref("" as any);
// Y轴数据
// let yData1 = ref([
// 	["2023-9-19 05:15:00", 12],
// 	["2023-9-19 15:15:00", 200],
// 	["2023-9-19 17:15:00", 50],
// 	["2023-9-19 19:15:00", 24],
// 	["2023-9-20 05:15:00", 30],
// 	["2023-9-20 15:15:00", 60]
// ]);

// 图表数据项
let option = ref(null as any);
// 选中
// let rangeTime = ref("");
let selectPoint = ref(1);
let selectTime = ref("2023-09-01");

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

let typeList = ref([
	{
		value: 1,
		dayType: "表面温度",
		typeUnit: "℃"
	},
	{
		value: 2,
		dayType: "中上层温度",
		typeUnit: "℃"
	},
	{
		value: 3,
		dayType: "中层温度",
		typeUnit: "℃"
	},
	{
		value: 4,
		dayType: "中下层温度",
		typeUnit: "℃"
	},
	{
		value: 5,
		dayType: "底层温度",
		typeUnit: "℃"
	}
]);

// 时间轴起止时间
let startValue = ref("2023-9-19 05:15:00" as any);
let endValue = ref("2023-9-21 05:15:00" as any);

function selectChange(e: any) {
	console.log("当前日期", e);
	drawChart();
}

function initOption() {
	option.value = {
		// backgroundColor: '#071c3a',
		legend: {
			align: "left",
			top: "5%",
			left: "2%",
			textStyle: {
				color: "#FFFFFF",
				fontSize: 14,
				padding: [0, 0, 0, 10]
			},
			icon: "rect",
			itemGap: 25,
			itemWidth: 10,
			itemHeight: 10
		},
		// dataZoom: [
		// 	{
		// 		// orient: "vertical", //水平显示
		// 		type: "slider",
		// 		show: true, //显示滚动条
		// 		height: 0,
		// 		// startValue: startValue.value, //起始值
		// 		// endValue: endValue.value, //结束值
		// 		start: 0,
		// 		end: 35,
		// 		showDetail: false,
		// 		bottom: "8%",
		// 		moveHandleStyle: {
		// 			color: "#4AC0F3"
		// 		},
		// 		backgroundColor: "#193C8D"
		// 	}
		// ],
		tooltip: {
			trigger: "axis",
			backgroundColor: "rgba(0, 0, 0, 0.9)",
			borderColor: "#010306",
			textStyle: {
				color: "#FFFFFF"
			},
			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
					}
				}
			},
			formatter: function (params: any) {
				// console.log("tooltip", params);
				let currentInnerHtml = "";
				let nowTime = params[0].axisValueLabel;
				for (let index = 0; index < params.length; index++) {
					let pointType = params[index].seriesName;
					let pointValue = params[index].data[1];
					let currentTypeData = typeList.value.filter((item: any) => {
						return item.dayType === params[index].seriesName;
					});
					let unit = currentTypeData[0].typeUnit;
					// console.log(unit, "单位");
					currentInnerHtml = currentInnerHtml + "</br>" + params[index].marker + pointType + " " + pointValue + unit;
				}
				return nowTime + currentInnerHtml;
			}
		},
		grid: {
			top: "20%",
			left: "5%",
			right: "3%",
			bottom: "10%"
			// containLabel: true
		},
		xAxis: [
			{
				type: "category",
				axisLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				splitArea: {
					// show: true,
					color: "#f00",
					lineStyle: {
						color: "#f00"
					}
				},
				axisLabel: {
					color: "#fff"
					// formatter: function (value: any) {
					// 	//需要的时间格式
					// 	let t_date = new Date(value);
					// 	let nowMinutes: any = t_date.getMinutes();
					// 	if (nowMinutes < 10) {
					// 		nowMinutes = "0" + nowMinutes;
					// 	}
					// 	let nowSeconds: any = t_date.getSeconds();
					// 	if (nowSeconds < 10) {
					// 		nowSeconds = "0" + nowSeconds;
					// 	}
					// 	return (
					// 		[t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join("-") +
					// 		" " +
					// 		[t_date.getHours(), nowMinutes, nowSeconds].join(":")
					// 	);
					// }
				},
				splitLine: {
					show: false
				},
				boundaryGap: false
				// data: twenty_four_time.value
			}
		],

		yAxis: [
			{
				name: unit.value,
				nameGap: 25,
				nameTextStyle: {
					align: "right", // 将 Y 轴名称文字右对齐
					verticalAlign: "middle", // 将 Y 轴名称文字垂直居中
					padding: [0, 5, 0, 0], // 设置名称文字的内边距，调整位置
					color: "#fff",
					nameLocation: "start"
				},
				type: "value",
				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: []
		// [
		// 	// {
		// 	// 	showAllSymbol: false,
		// 	// 	smooth: true, //是否平滑
		// 	// 	name: "监测点001",
		// 	// 	type: "line",
		// 	// 	showSymbol: false,
		// 	// 	color: "#4AC0F3",
		// 	// 	data: yData1.value
		// 	// }
		// ]
	};

	for (let i = 0; i < typeList.value.length; i++) {
		// 根据点位的种类画图(立杆倾斜,水平位移,立杆轴力,地基沉降)

		// 测试点位数据[x,y]
		let data = [
			["00:00", 42 * 2 * (i + 1)],
			["02:00", 24 * 2 * (i + 1)],
			["04:00", 35 * 2 * (i + 1)],
			["06:00", 30 * 2 * (i + 1)],
			["08:00", 20 * 2 * (i + 1)],
			["10:00", 50 * 2 * (i + 1)],
			["12:00", 24 * 2 * (i + 1)],
			["14:00", 30 * 2 * (i + 1)],
			["16:00", 55 * 2 * (i + 1)],
			["18:00", 30 * 2 * (i + 1)],
			["20:00", 30 * 2 * (i + 1)],
			["22:00", 30 * 2 * (i + 1)],
			["24:00", 30 * 2 * (i + 1)]
		];
		let lineObj = {
			smooth: true, //是否平滑
			name: typeList.value[i].dayType,
			type: "line",
			showSymbol: true,
			symbol: "emptyCircle",
			symbolSize: 6,
			// color: "#4AC",
			data: data
		};
		option.value.series.push(lineObj);
	}
}

function drawChart() {
	initOption();
	// console.log("绘制前数据", option.value);
	let chartDom = document.getElementById("concreteLine");
	if (chartDom) {
		chartDom.removeAttribute("_echarts_instance_");
	}
	let concreteLine = echarts.init(document.getElementById("concreteLine"));
	concreteLine.setOption(option.value);
}

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

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

<style lang="scss" scoped>
.concrete-bottom-left {
	width: 100%;
	height: 100%;
	position: relative;
	.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%;
		}
	}
	.concrete-content {
		height: 100%;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		position: relative;
		.select-right {
			position: absolute;
			display: flex;
			right: 22%;
			width: 10%;
			top: 5%;
			z-index: 9;
		}
	}
}

.choice-right {
	width: 25%;
	display: flex;
	position: absolute;
	z-index: 99;
	color: #fff;
	font-size: 10px;
	text-align: center;
	line-height: 20px;
	right: -6%;
	top: 5%;
	.selected {
		height: 5%;
		background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
		background-size: 100% 100%;
		cursor: pointer;
	}
	.day {
		padding: 0 5%;
		margin-right: 4%;
		z-index: 99;
	}
	.week {
		padding: 0 5%;
		margin-right: 4%;
		z-index: 99;
	}
	.month {
		padding: 0 5%;
		z-index: 99;
	}
	.active {
		background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
		background-size: 100% 100%;
	}
}

:deep(.el-input__wrapper) {
	background: #112d59;
}
:deep(.el-input__inner) {
	color: #fff;
}
:deep(.el-select .el-input .el-select__caret) {
	color: #fff;
}
:deep(.el-date-editor) {
	width: 100%;
}
:deep(.el-range-separator) {
	color: #fff;
}
:deep(.el-date-editor .el-range-input) {
	color: #fff;
}
</style>
