<template>
	<Card title="高支模累计变形量">
		<div class="formwork-bottom-right">
			<div class="formwork-content">
				<div class="select-right">
					<el-select v-model="selectPoint" style="width: 100%" size="small" @change="selectChange">
						<el-option
							v-for="(item, index) in pointList"
							:key="index"
							:label="item.measurePointName"
							:value="item.measurePointNumber"
						/>
					</el-select>
				</div>
				<div id="formworkLine" ref="formworkLine" style="width: 100%; height: 100%"></div>
			</div>
		</div>
	</Card>
</template>

<script lang="ts" setup>
import Card from "@/components/card.vue";
import { onMounted, ref, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { highFormworkPoint, countTransform } from "@/api/modules/highFormwork";
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("");
// let selectTime = ref(1);

// 当前对应的种类
// let nowType = ref("温度");
let pointList = ref([] as any);

let typeList = ref([
	{
		value: 1,
		dayType: "立杆倾斜",
		typeUnit: "°",
		key: "poleTilt"
	},
	{
		value: 2,
		dayType: "水平位移",
		typeUnit: "mm",
		key: "horizontalDisplacement"
	},
	{
		value: 3,
		dayType: "立杆轴力",
		typeUnit: "N",
		key: "poleAxialForce"
	},
	{
		value: 4,
		dayType: "地基沉降",
		typeUnit: "mm",
		key: "foundationSettlement"
	},
	{
		value: 5,
		dayType: "模板沉降",
		typeUnit: "mm",
		key: "formworkSettlement"
	}
]);

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

const selectChange = async () => {
	await getCountTransform();
	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: "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: 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",
				// min: 0,
				// max: 500,
				// 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 = [
	// 		["2023-9-19 05:15:00", 42 * 2 * (i + 1)],
	// 		["2023-9-19 07:15:00", 24 * 2 * (i + 1)],
	// 		["2023-9-19 09:15:00", 35 * 2 * (i + 1)],
	// 		["2023-9-19 10:15:00", 30 * 2 * (i + 1)],
	// 		["2023-9-19 15:15:00", 20 * 2 * (i + 1)],
	// 		["2023-9-19 17:15:00", 50 * 2 * (i + 1)],
	// 		["2023-9-19 20:15:00", 24 * 2 * (i + 1)],
	// 		["2023-9-20 05:15:00", 30 * 2 * (i + 1)],
	// 		["2023-9-20 15:15:00", 55 * 2 * (i + 1)]
	// 	];
	// 	let lineObj = {
	// 		showAllSymbol: false,
	// 		smooth: true, //是否平滑
	// 		name: typeList.value[i].dayType,
	// 		type: "line",
	// 		showSymbol: false,
	// 		// color: "#4AC",
	// 		data: data
	// 	};
	// 	option.value.series.push(lineObj);
	// }
}

function drawChart() {
	// console.log("绘制前数据", option.value);
	let chartDom = document.getElementById("formworkLine");
	if (chartDom) {
		chartDom.removeAttribute("_echarts_instance_");
	}
	let formworkLine = echarts.init(document.getElementById("formworkLine"));
	formworkLine.setOption(option.value);
}
// 获取累计变形量
const getCountTransform = async () => {
	const res: any = await countTransform({ projectSn: store.sn, measurePointNumber: selectPoint.value });
	console.log("获取高支模累计变形量", res);

	for (let i = 0; i < typeList.value.length; i++) {
		// 根据点位的种类画图(立杆倾斜,水平位移,立杆轴力,地基沉降)
		let responseData = res.result;
		let data = [] as any;
		for (let x = 0; x < responseData.length; x++) {
			data.push([responseData[x].time, responseData[x][typeList.value[i].key]]);
		}
		let lineObj = {
			showAllSymbol: false,
			smooth: true, //是否平滑
			name: typeList.value[i].dayType,
			type: "line",
			showSymbol: false,
			// color: "#4AC",
			data: data
		};
		option.value.series.push(lineObj);
	}
	console.log(option.value, "66666777777");
};
// 获取监测点数据
const getMonitorViewPoint = async () => {
	const res: any = await highFormworkPoint({ projectSn: store.sn, pageNo: -1 });
	console.log("获取测点数据", res);
	pointList.value = res.result.records;
	if (res.result.records && res.result.records.length > 0) {
		selectPoint.value = res.result.records[0].measurePointNumber;
	}
};
onMounted(async () => {
	initOption();
	await getMonitorViewPoint();
	await getCountTransform();
	drawChart();
});

onBeforeUnmount(async () => {
	mitts.off("devSn");
});
</script>

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