<template>
	<div>
		<el-row class="home-card-one mb10" :gutter="10">
			<el-col :span="6" v-for="(item, idx) in  list ">
				<div class="consear">
					<div class="conseartitle">
						<p>{{ item.title }}</p>
						<SvgIcon @click="gomore(item.type)" name="ele-MoreFilled" class="font20 cur" />
					</div>
					<div class="consearcon">
						<div class="consearconcum">
							<div class="consearconcumtop">
								<div class="consearconTop" :class="item.level == 4 ? 'green' : 'red'">
									<p v-if="item.level == 1">Ⅰ级预警</p>
									<p v-if="item.level == 2">Ⅱ级预警</p>
									<p v-if="item.level == 3">Ⅲ级预警</p>
									<p v-if="item.level == 4">正常</p>
								</div>
								<div class="consearcontime">{{ item.dateRange }}</div>
								<div class="consearconitem">
									<p>{{ item.name }}</p>
									<span>{{ item.value }}</span>
								</div>
							</div>
							<div class="consearcontxt" v-if="item.content != null">{{ item.content }}</div>
						</div>
						<div class="x"></div>
						<div class="consearconbom">
							<div class="consearconbomtitle">预警阈值</div>
							<div class="consearconbomitem" v-for=" i  in  item.list " style="line-height: 30px">
								<b>{{ i.level }}</b>：{{ i.content }}
							</div>
						</div>
					</div>

				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script setup lang="ts">
import { onMounted, ref, reactive, defineProps } from "vue";
import { useRouter } from 'vue-router';
const router = useRouter();

const gomore = (e: number) => {
	let url = ''
	if (e == 5) url = '/early/deple'
	if (e == 2) url = '/early/month'
	if (e == 3) url = '/early/halyear'
	if (e == 6) url = '/early/stop'
	router.push({ path: url })
}

const props = defineProps({
	list: {
		type: Array,
		default: [],
	},
});
</script>
<style lang="scss" scoped>
.consear {
	background-color: #fff;
	border-radius: 5px;
	overflow: hidden;
	border: 1px solid #eee;
	transition: .3s;

	&:hover {
		box-shadow: 0 0 20px #eee;
	}

	.cur {
		cursor: pointer;
	}

	.consearcontxt {
		background-color: #f4f4f4;
		padding: 10px;
		text-align: center;
		font-size: 14px;
		color: #ff0000;
		margin: 20px 0;
	}

	.x {
		width: 100%;
		height: 1px;
		background-color: #ccc;
		margin-bottom: 10px;
	}

	.consearcon {
		padding: 20px;

		.consearconcum {
			height: 200px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.consearconbom {
			overflow: auto;
			height: 300px;
      padding: 0 20px 0  0;
      font-family: "微软雅黑";
			.consearconbomitem {
				font-size: 14px;
				color: #333;
				letter-spacing: 1px;
				margin-bottom: 6px;
				text-indent: 1em;
				text-align: justify;
			}

			.consearconbomtitle {
				font-size: 14px;
				font-weight: bold;
				margin-bottom: 20px;
				position: relative;

				&::after {
					content: '';
					width: 30px;
					height: 2px;
					border-radius: 10px;
					background-color: #0b5766;
					position: absolute;
					bottom: -6px;
					left: 0;
					z-index: 2;
				}
			}
		}

		b {
			color: #001330;
		}

		.consearconitem {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			margin-bottom: 10px;

			p {
				color: #001330;
			}
		}

		.consearcontime {
			padding: 10px 0;
			font-size: 14px;
			color: #333;
		}

		.consearconTop {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			font-weight: bold;
			padding: 6px 0;
			margin-bottom: 10px;
		}

		.green {
			color: #22bd9d;
			background-color: #ebfff2;
		}

		.red {
			color: #ff0000;
			background-color: #ffebeb;
		}
	}

	.conseartitle {
		padding: 15px 20px;
		display: flex;
		align-items: center;
		background-color: #e4edfd;
		justify-content: space-between;

		p {
			font-size: 16px;
			font-weight: bold;
		}
	}
}
</style>