<template>
	<Card title="锚杆内力监测">
		<div class="pit-right-first">
			<div class="pit-content">
				<div class="select-right">
					<div style="width: 33%; margin-right: 5%">
						<el-date-picker
							v-model="rangeTime"
							type="datetimerange"
							range-separator="至"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							:clearable="false"
							size="small"
							@change="selectRangeTime"
						/>
					</div>
					<el-select v-model="selectPoint" style="width: 15%; margin-right: 5%" size="small">
						<el-option v-for="(item, index) in pointList" :key="index" :label="item.dayType" :value="item.value" />
					</el-select>
					<el-select v-model="selectTime" style="width: 15%" size="small">
						<el-option v-for="(item, index) in timeList" :key="index" :label="item.dayType" :value="item.value" />
					</el-select>
				</div>
				<div id="pitRightFirst" ref="pitRightFirst" 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, 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([] as any);
// Y轴单位
let unit = ref("内力(kN)" as any);
// Y轴数据
let yData1 = ref([
	["2023-9-19 05:15:00", 12],
	["2023-9-19 15:15:00", 160],
	["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]
] as any);

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

// 当前对应的种类
// let nowType = ref("温度");
let pointList = ref([
	{
		value: 1,
		dayType: "基坑监测点001"
	},
	{
		value: 2,
		dayType: "基坑监测点002"
	},
	{
		value: 3,
		dayType: "基坑监测点003"
	},
	{
		value: 4,
		dayType: "基坑监测点004"
	}
]);

let timeList = ref([
	{
		value: 1,
		dayType: "本次内力"
	},
	{
		value: 2,
		dayType: "本次变化"
	}
]);

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

function selectRangeTime(e: any) {
	console.log("选择时间", e);
	startValue.value = e[0];
	endValue.value = e[1];
	drawChart();
}

function initOption() {
	option.value = {
		// backgroundColor: '#071c3a',
		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) {
				// console.log("tooltip", params);
				let currentMarker = "";
				let currentState = "";
				if (params[0].value[1] > 150 || params[0].value[1] < -150) {
					currentState = "超出报警值";
					currentMarker = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#f00;"> </span>`;
				} else {
					currentMarker = params[0].marker;
					currentState = "正常";
				}
				return (
					params[0].axisValueLabel +
					params[0].name +
					"<br/>" +
					"分类:" +
					// params[0].seriesName +
					"本次内力" +
					"<br/>" +
					currentMarker +
					// params[0].marker +
					"状态:" +
					currentState +
					"<br/>" +
					params[0].seriesName +
					":" +
					params[0].value[1] +
					"kN"
				);
			}
		},
		grid: {
			top: "35%",
			left: "7%",
			right: "3%",
			bottom: "20%"
			// containLabel: true
		},
		xAxis: [
			{
				type: "time",
				minInterval: 3600 * 1000 * 6,
				min: startValue.value,
				max: endValue.value,
				axisLine: {
					show: true,
					lineStyle: {
						color: "#14346C"
					}
				},
				splitArea: {
					// show: true,
					color: "#f00",
					lineStyle: {
						color: "#f00"
					}
				},
				axisLabel: {
					color: "#fff",
					formatter: function (value) {
						//在这里写你需要的时间格式
						let t_date = new Date(value);
						return (
							[t_date.getMonth() + 1, t_date.getDate()].join("-") +
							" " +
							[t_date.getHours(), t_date.getMinutes()].join(":") +
							"0:00"
						);
					}
				},
				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",
				min: -300,
				max: 300,
				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: true,
				// symbol: `image://${symbolIcon2}`,
				// symbol: "circle",
				symbolSize: 8,
				smooth: true, //是否平滑
				name: "基坑监测点001",
				type: "line",
				// symbol: "emptyCircle",
				color: "#4AC0F3",
				data: yData1.value,
				markLine: {
					// 添加 MarkLine 组件配置
					data: [
						// { type: 'average', name: '平均值' }, // 平均值标注线
						{ yAxis: 250, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
						{ yAxis: 150, name: "控制值", lineStyle: { color: "#EEA959" } }, // 自定义阈值标注线
						{ yAxis: -250, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
						{ yAxis: -150, name: "控制值", lineStyle: { color: "#EEA959" } } // 自定义阈值标注线
					],
					label: {
						normal: {
							// color: function (params) {
							// 	console.log(params, "特殊值");
							// 	// return params.lineStyle.color;
							// },
							color: "inherit",
							fontSize: 14,
							position: "insideEndBottom",
							distance: [15, -15],
							formatter: function (params) {
								return params.value;
							}
						}
					}
				}
			}
		]
	};
}

// function countTime() {
// 	// 设置起始时间和结束时间
// 	let startDate = new Date("2023-09-18T18:02:00");
// 	let endDate = new Date("2023-09-21T19:02:00");
// 	// 存放小时数
// 	let timeData = [];
// 	// 返回特定小时数
// 	const hours = [0, 6, 12, 18]; // 0时、6时、12时、18时
// 	for (let i = 0; i < 72; i++) {
// 		// 每次循环，将时间递增一小时
// 		const date = new Date(startDate);
// 		date.setHours(startDate.getHours() + i);

// 		// 仅将特定小时数进行处理
// 		if (hours.includes(date.getHours())) {
// 			// 格式化为mm-dd hh:00:00格式
// 			const month = ("0" + (date.getMonth() + 1)).slice(-2);
// 			const day = ("0" + date.getDate()).slice(-2);
// 			const hour = ("0" + date.getHours()).slice(-2);
// 			const formattedTime = `2023-${month}-${day} ${hour}:00:00`;
// 			timeData.push(formattedTime);
// 			// console.log(formattedTime, "时间");
// 		}
// 		// 超过结束时间，退出循环
// 		if (date >= endDate) {
// 			break;
// 		}
// 	}
// 	twenty_four_time.value = timeData;
// 	drawChart();
// }

function drawChart() {
	initOption();
	// console.log("绘制前数据", yData.value);
	let pitRightFirst = echarts.init(document.getElementById("pitRightFirst"));
	pitRightFirst.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>
.pit-right-first {
	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%;
		}
	}
	.pit-content {
		height: 100%;
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
		position: relative;
		.select-right {
			position: absolute;
			display: flex;
			right: -25%;
			width: 100%;
			top: 5%;
			z-index: 9;
		}
	}
}
: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>
