<template>
	<div class="container">
		<el-row :gutter="20">
			<el-col :span="18">
				<el-row :gutter="20" class="mgb20">
					<el-col :span="6">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-0">
								<el-icon class="grid-con-icon">
									<Odometer />
								</el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{ levelCount?.today_total }}</div>
									<div>今日累计预警</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-1">
								<el-icon class="grid-con-icon">
									<User />
								</el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{ levelCount?.today_y }}</div>
									<div>黄色预警</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-2">
								<el-icon class="grid-con-icon">
									<ChatDotRound />
								</el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{ levelCount?.today_o }}</div>
									<div>橙色预警</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-3">
								<el-icon class="grid-con-icon">
									<Goods />
								</el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{ levelCount?.today_r }}</div>
									<div>红色预警</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<el-card shadow="hover" style="min-height: 403px">
					<template #header>
						<div class="clearfix">
							<span>预警列表</span>
							<el-button style="float: right; padding: 3px 0" text>查看全部</el-button>
						</div>
					</template>


					<!-- 表格 -->
					<el-table :data="tableData" border class="table" ref="multipleTable"
						header-cell-class-name="table-header">
						<el-table-column prop="id" label="ID" width="55" align="center" v-if="false"></el-table-column>
						<el-table-column prop="createTime" label="报警时间" align="center"></el-table-column>
						<el-table-column prop="deviceName" label="报警设备" align="center"></el-table-column>
						<el-table-column prop="alertLevel" label="报警等级" align="center"></el-table-column>
						<el-table-column prop="monitorCode" label="监测项" align="center"></el-table-column>
						<el-table-column prop="monitorValue" label="监测值" align="center"></el-table-column>
						<el-table-column prop="threshold" label="阈值" align="center"></el-table-column>
						<el-table-column prop="deviceId" label="" align="center" v-if="false"></el-table-column>
						<!-- <el-table-column label="操作" width="220" align="center"> -->
						<!-- <template #default="scope">
								<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)"
									v-permiss="'user-setting'">
									编辑
								</el-button>
								<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row)"
									v-permiss="'user-setting'">
									删除
								</el-button>
							</template> -->
						<!-- </el-table-column> -->
					</el-table>
					<!-- 分页 -->
					<div class="pagination">
						<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
							:page-size="query.pageSize" :total="pageTotal"
							@current-change="handlePageChange"></el-pagination>
					</div>
					<!-- <el-table :show-header="false" :data="todoList" style="width: 100%">
						<el-table-column width="40">
							<template #default="scope">
								<el-checkbox v-model="scope.row.status"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column>
							<template #default="scope">
								<div
									class="todo-item"
									:class="{
										'todo-item-del': scope.row.status
									}"
								>
									{{ scope.row.title }}
								</div>
							</template>
						</el-table-column>
					</el-table> -->
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card shadow="hover" class="mgb20">
					<p>
						监测预警总览
					</p>
					<div class="alert-image-container">
						<img class="alert-image" :class="isAlerting ? 'alert-ing' : []"
							:src="isAlerting ? '/assets/image/svg/alert_warning.svg' : '/assets/image/svg/alert_default.svg'"
							@click="isAlerting = !isAlerting">
					</div>

					<!-- 表格 -->
					<el-table :data="alertLogCountTableData" style="width: 100%">
						<el-table-column prop="timeRange" label="" />
						<el-table-column prop="yellow" label="黄色预警" />
						<el-table-column prop="orange" label="橙色预警" />
						<el-table-column prop="red" label="红色预警" />
						<el-table-column prop="total" label="总计" />
					</el-table>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="dashboard">
import { ref, reactive } from 'vue';
import send_request from '../utils/send_request';

const name = localStorage.getItem('ms_username');
const role: string = name === 'admin' ? '超级管理员' : '普通用户';


// 筛选条件
const query = reactive({
	params: {
		deviceType: '',
		name: '',
	},
	pageIndex: 1,
	pageSize: 10
});

// 展示的铃铛是否处于报警状态
const isAlerting = ref(false);

const alertLevel = {
	"1": "黄色预警",
	"2": "橙色预警",
	"3": "红色预警",
}
const tableData: any = ref([]);
const pageTotal = ref(0);
const levelCount = ref({
	'today_y': '',
	'today_o': '',
	'today_r': '',
	'today_total': '',
});

// 统计表格的数据
const alertLogCountTableData = ref([]);

const getData = async () => {
	// const loading = ElLoading.service({
	// 	lock: true,
	// 	text: '请稍候',
	// 	background: 'rgba(0, 0, 0, 0.7)',
	// });
	await send_request('v1/alert/list', "GET", {
		...query.params,
		pageIndex: query.pageIndex,
		pageSize: query.pageSize,
		page: query.pageIndex,
	}, (data: any) => {
		let alertList = data;

		//生成"设备类型"数据字典
		//console.log("deviceList/deviceTypeList:", deviceList, deviceTypeList)
		// deviceTypeList.forEach((item: any) => deviceTypeDict.value[item.id] = item.type)

		// 渲染表格
		tableData.value = alertList.list.map((i: any) => {
			i.state = "在线"
			i.alertLevel = alertLevel[i.alertLevel]
			i.createTime = new Date(new Date(i.createTime).getTime() + 8 * 3600 * 1000).toISOString().substring(0, 19).replace('T', ' ')
			return i
		});
		pageTotal.value = alertList.total;
		// // 渲染下拉框
		// deviceTypeOption.value = deviceTypeList;
	});

	// 各种预警的数量
	await send_request('v1/chart-data/levelCount', "GET", {
	}, (data: any) => {
		console.log("v1/chart-data/levelCount:", data);

		let timeRangeDict = {
			"day": "今日",
			"week": "本周",
			"month": "本月",
			"year": "今年",
			"total": "累计",
		}
		alertLogCountTableData.value = data.map((row: any) => {
			row.total = row.yellow + row.orange + row.red;
			if (row.timeRange == "day") {
				levelCount.value.today_y = row.yellow;
				levelCount.value.today_o = row.orange;
				levelCount.value.today_r = row.red;
				levelCount.value.today_total = row.total;
				console.log(levelCount.value)
			}
			row.timeRange = timeRangeDict[row.timeRange]
			return row
		})
		console.log("alertLogCountTableData.value", alertLogCountTableData.value);
	});

	// loading.close();
};
getData();
// 分页导航
const handlePageChange = (val: number) => {
	query.pageIndex = val;
	getData();
};


</script>

<style scoped>
/* 警铃抖动样式 */
@keyframes shaking {
	0% {
		transform: rotate(0deg);
	}

	35% {
		transform: rotate(20deg);
	}

	65% {
		transform: rotate(-20deg);
	}

	100% {
		transform: rotate(0deg);
	}
}

.alert-image-container {
	text-align: center;
}

.alert-image {
	width: 60%;
}

.alert-ing {
	animation-duration: 1s;
	animation-name: shaking;
	animation-direction: normal;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0.76, 0.44, 0.33, 0.75);
	animation-delay: 0.8s;
}

/* ############ */

.el-row {
	margin-bottom: 20px;
}

.grid-content {
	display: flex;
	align-items: center;
	--grid-content-height: min(150px, 6vw);
	height: var(--grid-content-height);
}

.grid-cont-right {
	flex: 1;
	text-align: center;
	font-size: 14px;
	color: #999;
}

.grid-num {
	font-size: min(70px, 4vw);
	font-weight: bold;
}

.grid-con-icon {
	font-size: min(50px, 2.8vw);
	width: min(150px, 5vw);
	height: var(--grid-content-height);
	text-align: center;
	line-height: 100px;
	color: #fff;
}

.grid-con-0 .grid-con-icon {
	background: rgb(43 157 255);
}

.grid-con-0 .grid-num {
	color: rgb(43 157 255);
}

.grid-con-1 .grid-con-icon {
	background: rgb(255 223 43);
}

.grid-con-1 .grid-num {
	color: rgb(255 223 43);
}

.grid-con-2 .grid-con-icon {
	background: rgb(255, 135, 0);
}

.grid-con-2 .grid-num {
	color: rgb(255, 135, 0);
}

.grid-con-3 .grid-con-icon {
	background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
	color: rgb(242, 94, 67);
}

.user-info {
	display: flex;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 2px solid #ccc;
	margin-bottom: 20px;
}

.user-info-cont {
	padding-left: 50px;
	flex: 1;
	font-size: 14px;
	color: #999;
}

.user-info-cont div:first-child {
	font-size: 30px;
	color: #222;
}

.user-info-list {
	font-size: 14px;
	color: #999;
	line-height: 25px;
}

.user-info-list span {
	margin-left: 70px;
}

.mgb20 {
	margin-bottom: 20px;
}

.todo-item {
	font-size: 14px;
}

.todo-item-del {
	text-decoration: line-through;
	color: #999;
}
</style>
