<template>
	<Card title="点位图">
		<div class="pit-top-left">
			<div class="select-right">
				<el-select v-model="selectDay" style="width: 85%" size="small" @change="selectChange">
					<el-option v-for="(item, index) in devList" :key="index" :label="item.engineeringName" :value="item.id" />
				</el-select>
			</div>
			<div class="point-state-top">
				<div class="common">
					<div class="background"></div>
					<div class="state-text">正常</div>
				</div>
				<div class="warn">
					<div class="background"></div>
					<div class="state-text">超出报警值</div>
				</div>
				<div class="control">
					<div class="background"></div>
					<div class="state-text">超出控制值</div>
				</div>
			</div>
			<div class="point-map" v-if="list.length > 0">
				<img :src="currentData.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
								? 'changeColor2'
								: item.alarmState == 3
								? 'changeColor3'
								: ''
						"
						:style="{
							left: item.mapX - 130 + 'px',
							top: item.mapY - 80 + 'px'
						}"
						@click="openDialog(item)"
					></div>
					<div
						class="item-dialog"
						:style="{
							left: item.mapX - 130 + 'px',
							top: item.mapY - 80 + 'px'
						}"
						v-if="item.id === currentIndex && showDialog"
					>
						<div class="triangle"></div>
						<div class="dialog-title">{{ item.pointName }}</div>
						<div class="dialog-text">监测类型:地下水位</div>
						<div class="dialog-text">单次变化值:0.56mm</div>
						<div class="dialog-text">累计变化值:2.04mm</div>
						<div class="dialog-text">变化速率:0.96mm/d</div>
						<div class="dialog-text">采集时间:2023-01-01 15:00:00</div>
						<div style="border-bottom: 1px solid rgba(255, 255, 255, 0.2); margin-top: 5%"></div>
						<div class="dialog-text">当前累计变化值为2.04mm,超过报警值10mm,偏差为39.1mm</div>
						<div class="close-icon" @click="closeDialog">
							<el-icon><Close /></el-icon>
						</div>
					</div>
				</div>
			</div>
			<div class="notoDta" v-if="list.length == 0">
					<img src="@/assets/images/noData.png" alt="" />
					<p>暂无数据</p>
				</div>
			<!-- <div class="check-time">已安全监测: 2065天19时30分28秒</div> -->
		</div>
	</Card>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { selectDeepExcavationList, selectDeepPicList, selectDeepPointList } from "@/api/modules/securityManagement";
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
import mitts from "@/utils/bus"; //兄弟组件传值
import { GlobalStore } from "@/stores";
const store = GlobalStore();
const BASEURL = import.meta.env.VITE_API_URL;
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([]);


// 当前对应的种类
let selectDay = ref("");
let devList = ref([]);

let showDialog = ref(false as any);
function handleClick(event: any) {
	console.log("点击", event.target.className);
	if (event.target.className == "list-detail") {
		showDialog.value = false;
	}
}
const getDevOption = async () => {
	const res: any = await selectDeepExcavationList({ projectSn: store.sn });
	console.log("设备列表", res);
	if (res.result.length > 0) {
		devList.value = res.result;
		selectDay.value = res.result[0].id;
		mitts.emit("foundationPitId", selectDay.value);
		getGantryCurrentData();
	}
};

function selectChange(e: any) {
	console.log("选择", e);
	selectDay.value = e;
	list.value = []
	mitts.emit("foundationPitId", e);
	getGantryCurrentData();
}

let currentData = ref({}) as any;
// 获取图列表
const getGantryCurrentData = async () => {
	const res: any = await selectDeepPicList({ projectSn: store.sn, deepExcavationId: selectDay.value });
	console.log("获取图列表", res);
	if (res.result.length > 0) {
		currentData.value = res.result[0];
		getPointList();
	}
};

// 获取点位
const getPointList = async () => {
	const res: any = await selectDeepPointList({ projectSn: store.sn, planeFigureId: currentData.value.id, deepExcavationId: selectDay.value });
	console.log("获取点位", res);
	if (res.result.length > 0) {
		list.value = res.result;
	}
};

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

</script>

<style scoped lang="scss">
.item-dialog {
	width: 189px;
	padding: 2%;
	left: 100%;
	top: -40%;
	z-index: 10;
	color: #ffffff;
	font-size: 12px;
	opacity: 0.8;
	background-color: #000000;
	position: absolute;
	.dialog-title {
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		padding-bottom: 2%;
	}
	.dialog-time {
		margin-top: 4%;
		width: 100%;
		text-align: right;
	}
	.dialog-text {
		margin-top: 5%;
		letter-spacing: 0.5px;
	}
	.triangle {
		position: absolute;
		width: 0;
		height: 0;
		left: -4%;
		top: 5%;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
		border-right: 12px solid #000000;
	}
	.close-icon {
		position: absolute;
		right: 5%;
		top: 3%;
		cursor: pointer;
		color: #ffffff;
		font-size: 14px;
	}
}
.changeColor1 {
	background: #48da39;
}
.changeColor2 {
	background: #eea959;
}
.changeColor3 {
	background: #ec6266;
}
.pit-top-left {
	width: 100%;
	height: 100%;
	position: relative;
	.point-map {
		width: 80%;
		height: 70%;
		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;
			}
		}
	}
	.point-state-top {
		width: 100%;
		display: flex;
		padding-top: 5%;
		margin-left: 5%;
		.common {
			width: 25%;
			display: flex;
			align-items: center;
			.background {
				width: 10px;
				height: 10px;
				margin-right: 15%;
				background: #48da39;
			}
			.state-text {
				color: #ffffff;
				font-size: 14px;
			}
		}
		.warn {
			width: 30%;
			display: flex;
			align-items: center;
			.background {
				width: 10px;
				height: 10px;
				margin-right: 15%;
				background: #eea959;
			}
			.state-text {
				color: #ffffff;
				font-size: 14px;
			}
		}
		.control {
			width: 30%;
			display: flex;
			align-items: center;
			.background {
				width: 10px;
				height: 10px;
				margin-right: 15%;
				background: #ec6266;
			}
			.state-text {
				color: #ffffff;
				font-size: 14px;
			}
		}
	}
	.check-time {
		width: 100%;
		text-align: center;
		font-size: 16px;
		margin-top: 3%;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		color: #ffffff;
	}
}
.select-right {
	position: absolute;
	right: 1%;
	width: 30%;
	top: -13%;
	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;
}
.notoDta {
	top: 35%;
	width: 50%;
	left: 30%;
	position: absolute;
	text-align: center;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: 14px;
		margin: -6% 37%;
	}
}
</style>
