<template>
	<div class="list-detail" v-if="showDialog && mapsDetail.length == 0">
		<div :class="postData.type == 1 ? 'dialog-content' : postData.type == 2 ? 'dialog-content-show' : 'dialog-content-more'">
			<div class="dialog-title">
				<!-- <div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div> -->
				<div class="title-text" :class="{ flex: showIndex == 7 }">
					<i>{{ postData.title }}</i>
					<div class="title-tabs" v-if="showIndex == 7">
						<div
							:class="{ 'title-color': item.enumType == tableTabInfo.tableTabActive }"
							v-for="item in tableTabInfo.tableTabs"
							:key="item.enumType"
							@click="onClickTab(item)"
						>
							{{ item.tabName }}
						</div>
						<!-- <div>较大</div>
						<div>一般</div>
						<div>低</div> -->
					</div>
				</div>
				<div class="close-icon" @click="closeDialog">
					<el-icon>
						<Close />
					</el-icon>
				</div>
			</div>
			<div class="political-outlook" v-if="showIndex == 1">
				<memberCountList ref="historyAlarmList" :tip="postData.tip"></memberCountList>
			</div>
			<div class="political-outlook" v-if="showIndex == 2">
				<safeInfo ref="historyAlarmList" tip="安全教育"></safeInfo>
			</div>
			<div class="political-outlook" v-if="showIndex == 3">
				<weatherInfo ref="historyAlarmList" tip="安全教育"></weatherInfo>
			</div>
			<div class="political-outlook" v-if="showIndex == 4">
				<riskCount ref="historyAlarmList" tip="安全教育"></riskCount>
			</div>
			<div class="political-outlook" v-if="showIndex == 5">
				<safeHidden ref="historyAlarmList" tip="安全教育"></safeHidden>
			</div>
			<div class="political-outlook" v-if="showIndex == 6">
				<aiAlarm ref="historyAlarmList" tip="安全教育"></aiAlarm>
			</div>
			<div class="political-outlook" v-if="showIndex == 7">
				<majorHidder ref="historyAlarmList" :majorInfo="majorInfo" :tip="'重大隐患未销项目'"></majorHidder>
			</div>
			<div class="political-outlook" v-if="showIndex == 8">
				<safeEducationDialog ref="historyAlarmList" tip="安全教育"></safeEducationDialog>
			</div>
			<div class="political-outlook" v-if="showIndex == 9">
				<monthSafeScore ref="historyAlarmList" tip="月度安全综合评分"></monthSafeScore>
			</div>
			<div class="political-outlook" v-if="showIndex == 11">
				<radarMapList ref="historyAlarmList" :randerDetail="postData" :tip="postData.title"></radarMapList>
			</div>
		</div>
	</div>
	<div v-else-if="showIndex == 10">
		<div class="list-detail" v-for="ele in mapsDetail.filter((option: any) => option.show)" :key="ele.id">
			<div :class="postData.type == 1 ? 'dialog-content' : postData.type == 2 ? 'dialog-content-show' : 'dialog-content-more'">
				<div class="warning-bg"></div>
				<div class="dialog-title">
					<!-- <div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div> -->
					<div class="title-text">
						<i>{{ ele.title }}</i>
					</div>
					<div class="title-time">
						{{ timeOutUp(ele) }}
					</div>
					<div class="close-icon" @click.stop="closeDialog1(ele.id)">
						<el-icon>
							<Close />
						</el-icon>
					</div>
				</div>
				<div class="political-outlook">
					<myMap :mapsDetail="ele" :key="ele.id" :tip="ele.title"></myMap>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, computed } from "vue";
import memberCountList from "./member-count-list.vue";
import safeInfo from "./safe-info.vue";
import weatherInfo from "./weather-info.vue";
import riskCount from "./risk-count.vue";
import safeHidden from "./safe-hidden.vue";
import aiAlarm from "./ai-alarm.vue";
import safeEducationDialog from "./safe-education-dialog.vue";
import majorHidder from "./major-hidder.vue";
import monthSafeScore from "./month-safe-score.vue";
import myMap from "./my-map.vue";
import radarMapList from "./radar-map-list.vue";
import { log } from "console";

// import { GlobalStore } from "@/stores";
let showDialog = ref(false as any);
const showIndex = ref(0);
const postData = ref({} as any);
// let dialogTitle = ref("危大工程" as any);
const majorInfo = ref({} as any);
const mapsDetail = ref([] as any);
const tableTabInfo = reactive({
	tableTabs: [
		{
			tabName: "重大",
			enumType: "1"
		},
		{
			tabName: "较大",
			enumType: "2"
		},
		{
			tabName: "一般",
			enumType: "3"
		},
		{
			tabName: "低",
			enumType: "4"
		}
	],
	tableTabActive: "1"
});
const onClickTab = (item: any) => {
	tableTabInfo.tableTabActive = item.enumType;
	majorInfo.value.enumType = item.enumType;
};

const closeDialog = () => {
	showDialog.value = false;
	postData.value = {};
};
const closeDialog1 = (id: string) => {
	// const findIndex = mapsDetail.value.findIndex((item: any) => item.id == id);
	// if (findIndex > -1) {
	// 	mapsDetail.value.splice(findIndex, 1);
	// }
	const find = mapsDetail.value.find((item: any) => item.id == id);
	if (find) {
		find.show = false;
	}
	if (mapsDetail.value.filter((item: any) => item.show).length == 0) {
		showDialog.value = false;
		postData.value = {};
		mapsDetail.value = [];
	}
};
function openDialog(obj: any) {
	postData.value = obj;
	showIndex.value = obj.index;
	if (obj.index == 7) {
		majorInfo.value = {
			...obj.majorInfo,
			title: obj.title,
			enumType: tableTabInfo.tableTabActive
		};
	}
	if (obj.index == 10) {
		mapsDetail.value.push({
			...obj.mapsDetail,
			timeOut: obj.timeOut,
			title: obj.title,
			show: obj.show
		});
	}
	showDialog.value = true;
}

const timeOutUp = computed(() => {
	return (ele: any) => {
		if (ele.timeOut <= 0) {
			closeDialog1(ele.id);
			return;
		}
		ele.timeFlag = setTimeout(() => {
			if (ele.timeFlag) {
				clearTimeout(ele.timeFlag);
			}
			const find = mapsDetail.value.find((item: any) => item.id == ele.id);
			if (find) {
				find.timeOut--;
			}
		}, 1000);

		return ele.timeOut;
	};
});

// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
	openDialog
});

onMounted(async () => {
});
</script>

<style lang="scss" scoped>
.warning-bg {
	width: 200px;
	height: 200px;
	background-image: url(@/assets/images/warning.gif);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: -190px;
	left: 50%;
	transform: translateX(-50%);
}
.flex {
	display: -webkit-box;
}

.title-tabs {
	display: flex;
	align-items: center;
	margin-left: 4%;

	> div {
		width: 60px;
		text-align: center;
		background-color: #315296;
		cursor: pointer;
	}

	.title-color {
		background-color: #1449b6;
	}
}

.list-detail {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	background: rgba(7, 28, 49, 0.5);
	z-index: 100;

	.dialog-content {
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 15%;
		top: 21%;
		width: 70%;
		height: 60%;
		background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}

	.dialog-content-show {
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 15%;
		top: 1%;
		width: 70%;
		height: 98%;
		background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}

	.dialog-content-more {
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 15%;
		top: 21%;
		width: 70%;
		height: 60%;
		background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
	}

	.dialog-content,
	.dialog-content-show,
	.dialog-content-more {
		padding-top: 50px;
		position: relative;

		.political-outlook {
			height: 100%;
		}

		.dialog-article {
			height: 95%;
		}

		.close-icon {
			// position: absolute;
			// right: 3%;
			// top: 3%;
			cursor: pointer;
			color: #ffffff;
			font-size: 18px;
		}

		.dialog-title {
			color: #ffffff;
			font-weight: bold;
			font-size: 18px;
			font-family: "OPPOSans-Bold";
			display: flex;
			align-items: center;
			margin: 0 40px;

			.title-time {
				font-size: 30px;
				color: #f34234;
				position: absolute;
				top: 3%;
				left: 50%;
				transform: translateX(-50%);
			}

			.title-img {
				width: 3%;
				height: 3%;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.title-text {
				margin-left: 1%;
				margin-right: auto;
			}
		}
	}
}

.notoDta {
	top: 73%;
	width: 12%;
	left: 44%;
	position: absolute;

	img {
		width: 40%;
		margin: 5% 30%;
	}

	p {
		color: #fff;
		font-size: 14px;
		margin: -6% 37%;
	}
}
</style>
