<template>
	<Card title="高边坡实时监测">
		<div class="formwork-top-right">
			<div class="left-point-map">
				<div class="monitor-time">
					<span> 已监测时长: {{ monitorTimeText }} </span>
					<el-select v-model="selectSlope" style="width: 140px; margin-right: 10px" size="small" @change="slopeListChange">
						<el-option v-for="(item, index) in slopeList" :key="index" :label="item.slopeName" :value="item.id" />
					</el-select>
					<el-select v-model="selectView" style="width: 140px; margin-right: 10px" size="small">
						<el-option v-for="(item, index) in viewList" :key="index" :label="item.planeFigureName" :value="item.id" />
					</el-select>
				</div>
				<div class="point-state">
					<div class="common">
						<div class="state-color"></div>
						<div class="state-text">正常</div>
					</div>
					<div class="warn">
						<div class="state-color"></div>
						<div class="state-text">超出报警值</div>
					</div>
					<div class="control">
						<div class="state-color"></div>
						<div class="state-text">超出控制值</div>
					</div>
				</div>
				<div class="point-map">
					<img :src="planViewData?.imageUrl" alt="" />
					<div class="point-list" v-for="item in list" :key="item.id">
						<div
							class="point-item"
							:class="
								item.alarmState == 1
									? 'changeColor1'
									: item.alarmState == 2
									? 'changeColor3'
									: item.alarmState == 3
									? 'changeColor2'
									: ''
							"
							:style="{
								left: (+item.mapX*100/721) + '%',
								top: (+item.mapY*100/545) + '%'
							}"
							@click="openDialog(item)"
						></div>
						<div
							class="item-dialog"
							:style="{
								left: ((+item.mapX - 65)*100/721) + '%',
								top: ((+item.mapY - 90)*100/545) + '%'
							}"
							v-if="item.id === currentIndex && showDialog"
							@click="closeDialog"
						>
							<div class="triangle"></div>
							<div class="dialog-title">{{ item.measurePointName }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right-list">
				<div class="list-tab">
					<div class="tab-box" v-for="(item, index) in topText" :key="item.id" @click="activeBtn(item)">
						<div class="text" :style="getStyle(item)">{{ item.title }}</div>
					</div>
				</div>
				<div class="select-project">
					<el-select v-model="selectPoint" style="width: 90%; margin-right: 5%" size="small">
						<el-option v-for="(item, index) in pointList" :key="index" :label="item.measurePointName" :value="item.measurePointNumber" />
					</el-select>
				</div>
				<div class="monitor-list">
					<div class="realTime-list" v-if="tabIndex == 1">
						<real-time-list :selectPoint="selectPoint"></real-time-list>
					</div>
					<div class="history-list" v-if="tabIndex == 2">
						<history-list :selectPoint="selectPoint"></history-list>
					</div>
					<div class="alarm-list" v-if="tabIndex == 3">
						<alarm-list :selectPoint="selectPoint"></alarm-list>
					</div>
				</div>
			</div>
		</div>
	</Card>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { watch, ref, onMounted } from "vue";
import realTimeList from "@/views/sevenLargeScreen/safetyManagement/highSlope/real-time-list.vue";
import historyList from "@/views/sevenLargeScreen/safetyManagement/highSlope/history-list.vue";
import alarmList from "@/views/sevenLargeScreen/safetyManagement/highSlope/alarm-list.vue";
import { highSlopeRealMonitorTime, highSlopeList, selectPlanView, selectPlanViewPoint, highSlopeMonitorType } from "@/api/modules/highSlope";
import firstIcon from "@/assets/images/smartPartyBuilding/contentBox.png";

import { GlobalStore } from "@/stores";
const store = GlobalStore();
const planViewData = ref<any>();
const slopeList = ref([] as any);
const viewList = ref([] as any);
const selectSlope = ref("");
const selectView = ref("");
const monitorTimeText = ref("");
const selectPoint = ref("" as any);
const pointList = ref([] as any);
let tabIndex = ref(1 as any);
let topText = ref([
	{ id: 1, title: "实时值", isActive: true },
	{ id: 2, title: "历史数据", isActive: false },
	{ id: 3, title: "报警记录", isActive: false }
]);

// function boxStyle(item: any) {
// 	if (item.isActive) {
// 		let choiseStyle = {
// 			background: `url(${firstIcon}) no-repeat`,
// 			backgroundSize: "100% 100%"
// 		};
// 		return choiseStyle;
// 	}
// 	return {};
// }
watch(
	() => selectView.value,
	newVal => {
		planViewData.value = viewList.value.find((item: any) => item.id === newVal);
		getMonitorViewPoint();
	}
);
// 获取监测类型
// const getMonitorType = async () => {
// 	const res: any = await highSlopeMonitorType({ highSlopePlaneFigureId: selectView.value });
// 	console.log("获取监测类型", res);
// 	pointList.value = res.result;
// 	if (res.result && res.result.length > 0) {
// 		selectPoint.value = res.result[0].id;
// 	}
// };
// 边坡列表选择切换时
const slopeListChange = async (e: any) => {
	console.log(e, "选中");
	await getMonitorView();
};
// 获取监测点数据
const getMonitorViewPoint = async () => {
	const res: any = await selectPlanViewPoint({ highSlopeEngineeringId: selectSlope.value, highSlopePlaneFigureId: selectView.value });
	console.log("获取监测点数据", res);
	list.value = res.result;
	pointList.value = res.result
	if(res.result && res.result.length > 0){
		selectPoint.value = res.result[0].measurePointNumber
	}
};
// 获取监测图纸
const getMonitorView = async () => {
	const res: any = await selectPlanView({ projectSn: store.sn, highSlopeEngineeringId: selectSlope.value });
	console.log("获取监测图纸", res);
	viewList.value = res.result;
	if (viewList.value && viewList.value.length > 0) {
		planViewData.value = viewList.value[0];
		selectView.value = viewList.value[0].id;
	}
};
// 获取边坡列表
const getSlopeList = async () => {
	const res: any = await highSlopeList({ projectSn: store.sn });
	console.log("获取边坡列表", res);
	slopeList.value = res.result;
	if (slopeList.value && slopeList.value.length > 0) {
		selectSlope.value = slopeList.value[0].id;
	}
};
// 获取监测时长
const getMonitorTime = async () => {
	const res: any = await highSlopeRealMonitorTime({ projectSn: store.sn });
	console.log("获取监测时长", res);
	monitorTimeText.value = res.result;
};
function getStyle(item: any) {
	if (item.isActive) {
		let choiseStyle = {
			color: "#4AC0F3"
		};
		return choiseStyle;
	}
	return {};
}

function activeBtn(item: any) {
	let currentState = item.isActive;
	if (!currentState) {
		topText.value.forEach(el => {
			el.isActive = false;
		});
		item.isActive = !currentState;
		tabIndex.value = item.id;
	}
}

let currentIndex = ref(1 as any);
let showDialog = ref(false as any);
function openDialog(item: any) {
	currentIndex.value = item.id;
	showDialog.value = true;
}
function closeDialog() {
	showDialog.value = false;
	// console.log("点击");
}
// 点位模拟数据
const list = ref([] as any);
onMounted(async () => {
	await getMonitorTime();
	await getSlopeList();
	await getMonitorView();
	await getMonitorViewPoint();
	// await getMonitorType();
});
</script>

<style scoped lang="scss">
.item-dialog {
	width: 100px;
	padding: 2%;
	z-index: 10;
	color: #ffffff;
	font-size: 12px;
	opacity: 0.8;
	background-color: #000000;
	position: absolute;
	.dialog-title {
		text-align: center;
		padding-bottom: 2%;
	}
	.triangle {
		position: absolute;
		width: 0;
		height: 0;
		left: 42%;
		bottom: -21%;
		border-left: 10px solid transparent;
		border-top: 10px solid #000000;
		border-right: 10px solid transparent;
	}
}
.changeColor1 {
	background: #48da39;
}
.changeColor2 {
	background: #eea959;
}
.changeColor3 {
	background: #ec6266;
}
.formwork-top-right {
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
	.left-point-map {
		width: 44%;
		.point-map {
			width: 90%;
			height: 65%;
			margin: 0 auto;
			margin-top: 5%;
			position: relative;
			img {
				width: 100%;
				height: 100%;
			}
			.point-list {
				.point-item {
					width: 20px;
					height: 20px;
					cursor: pointer;
					border-radius: 50%;
					position: absolute;
				}
			}
		}
		.monitor-time {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 3%;
			> span {
				font-size: 16px;
				margin-left: 5%;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				color: #ffffff;
				margin-right: auto;
			}
		}
		.point-state {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-top: 5%;
			padding-left: 5%;
			color: #ffffff;
			font-size: 14px;
			.common {
				width: 20%;
				display: flex;
				align-items: center;
				.state-color {
					width: 10px;
					height: 10px;
					margin-right: 15%;
					background: #48da39;
				}
			}
			.warn {
				width: 25%;
				display: flex;
				align-items: center;
				.state-color {
					width: 10px;
					height: 10px;
					margin-right: 15%;
					background: #eea959;
				}
			}
			.control {
				width: 25%;
				display: flex;
				align-items: center;
				.state-color {
					width: 10px;
					height: 10px;
					margin-right: 15%;
					background: #ec6266;
				}
			}
		}
	}
	.right-list {
		width: 56%;
		position: relative;
		.select-project {
			position: absolute;
			right: 0%;
			top: 5%;
		}
		.monitor-list {
			width: 100%;
			height: 90%;
			.realTime-list,.history-list,.alarm-list {
				width: 100%;
				height: 100%;
			}
		}
		.list-tab {
			display: flex;
			.tab-box {
				margin-right: 5%;
				margin-top: 3%;
				.text {
					font-size: 14px;
					color: rgba(255, 255, 255, 0.8);
					cursor: pointer;
				}
			}
		}
	}
}
: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>
