<template>
	<div class="grid col-2" :style="$store.state.app.device == 'desktop'? 'min-height: calc(100vh - 84px);' : ''">
		<div class="solid-right" style="width: 200px">
			<div class="padding-lr-sm padding-tb-xs text-white text-bold margin-xs" style="background-color: var(--el-menu-bg-color);">
				<svg-icon icon-class="ship_1" class="margin-right-xs" />易站科技
			</div>
			<ScrollBox>
				<el-menu :default-active="queryParams.msgType" style="min-height: 100%" @select="handleSelect"
					background-color="var(--el-fill-color-blank)" text-color="var(--el-text-color-regular)">
					<el-menu-item index="">
						<template #title>
							<span>告警总览</span>
						</template>
					</el-menu-item>
					<el-sub-menu index="2">
						<template #title>
							<span>行为告警</span>
						</template>
						<el-menu-item :index="bitm.value" v-for="(bitm,bind) in algorithm_behavior" :key="bind">{{bitm.label}}</el-menu-item>
					</el-sub-menu>
					<el-sub-menu index="3">
						<template #title>
							<span>物品检测</span>
						</template>
						<el-menu-item :index="aitm.value" v-for="(aitm,aind) in algorithm_article" :key="aind">{{aitm.label}}</el-menu-item>
					</el-sub-menu>
				</el-menu>
			</ScrollBox>
		</div>
		<div class="flex-sub padding-lr-xs" style="">
			<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px"
				class="margin-top-lg">
				<el-form-item label="告警类型">
					<el-select v-model="queryParams.msgType" placeholder="选择告警类型" clearable @change="handleQuery">
						<el-option label="告警总览" value="" />
						<template v-for="(aitm,aind) in [...algorithm_behavior,...algorithm_article]" :key="aind">
							<el-option :value="aitm.value" :label="aitm.label"/>
						</template>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
					<el-button icon="Refresh" @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>
			<div v-loading="loading">
				<div class="grid col-4" v-if="alertList.length">
					<div class="padding-xs" v-for="(item, i) in alertList" :key="i">
						<el-card style="border-color: #28dbac;" :body-style="{ padding: '0px !important' }" shadow="hover">
							<el-image :src="item.src" style="height: 150px; width: 100%" :preview-src-list="item.srcLi"
								fit="fill"></el-image>
							<div class="text-sm padding-sm">
								<div class="flex justify-between">
									<div class="text-bold">
										<svg-icon icon-class="jinggao" class="margin-right-xs" />
										<span>{{ item.msgTypeCn }}</span>
									</div>
									<div>LV.{{ item.msgLevel }}</div>
								</div>
								<div class="flex justify-between margin-tb-xs">
									<div>
										<elIcon class="margin-right-xs"><Location/></elIcon>	
										<span>{{ item.channelAlias }}</span>
									</div>
									<div @click="seeVideo(item.videoUrl)" class="pointer">
										<el-link type="primary">查看视频</el-link>
									</div>
								</div>
								<div><svg-icon icon-class="time"
										class="margin-right-xs" />{{ parseTime(new Date((item.createDate+"").length>10?item.createDate:parseInt(item.createDate)*1000)) }}</div>
							</div>
						</el-card>
					</div>
				</div>
				<el-empty description="暂无数据" v-else></el-empty>
			</div>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>

		<el-dialog title="视频回放" top="20px" v-model="dialogVisible" :before-close="handleClose" width="80%"
			:fullscreen="false">
			<!-- <div v-html="vidSrc"></div> -->
			<video controls autobuffer autoplay style="width:100%" v-if="dialogVisible">
				<source :src="videoUrl" type="video/mp4" />
			</video>
		</el-dialog>
	</div>
</template>

<script setup>
	import { listAlert } from "@/api/ai/alert";
	const {
		proxy
	} = getCurrentInstance();
	const { algorithm_article, algorithm_behavior } = proxy.useDict("algorithm_behavior","algorithm_article");
	const loading = ref(false);
	const showSearch = ref(true);
	const total = ref(0);
	const alertList = ref([]);
	const data = reactive({
		queryParams: {
			user: "yzkj_test",
			msgType: "",
			enddate: "",
			startdate: "",
			pageSize: 12,
			pageNum: 1,
		},
		vidSrc: "",
		dialogVisible: false,
	});

	const {
		queryParams,
		vidSrc,
		dialogVisible
	} = toRefs(data);
	const handleSelect = (key) => {
		queryParams.value.msgType = key;
		getList();
	};

	const videoUrl = ref("");

	function seeVideo(url) {
		videoUrl.value = url.replace(
			"http://127.0.0.1:8170",
			"https://www.enstation.vip:9443"
		);
		dialogVisible.value = true;
		if (url.indexOf("127.0.0.1:8170") != -1) {
			vidSrc.value = `<video width="100%" controls autobuffer autoplay>
				<source src="${url.replace(
          "http://127.0.0.1:8170",
          "https://www.enstation.vip:9443"
        )}" type="video/mp4"></source>
			</video>`;
		} else {
			vidSrc.value = "";
		}
	}
	const handleClose = () => {
		vidSrc.value = "";
		dialogVisible.value = false;
	};
	/** 搜索按钮操作 */
	function handleQuery() {
		queryParams.value.pageNum = 1;
		getList();
	}

	function resetQuery() {
		proxy.resetForm("queryRef");
		handleQuery();
	}

	function getList() {
		loading.value = true;
		let _queryParams = JSON.parse(JSON.stringify(queryParams.value));
		_queryParams.pageNum--;
		let response = {
			data:  [{
				"imageTime": 1701658164000,
				"updateDate": 1701658164120,
				"msgType": "cyjc",
				"dealState": "N",
				"faceImg": "",
				"msgTypeCn": "抽烟检测",
				"msgLevel": "1",
				"channelAlias": "驾驶室内",
				"areaId": 1,
				"videoUrl": "",
				"areaName": "智慧安防",
				"cameraId": 3,
				"imageUrl": "http://116.205.170.159:8080/faceImg/cyjc.jpg",
				"id": 124358,
				"taskId": 5,
				"createDate": 1701658164120
			}, {
				"imageTime": 1701657550000,
				"updateDate": 1701657550809,
				"msgType": "lgjc",
				"dealState": "N",
				"faceImg": "",
				"msgTypeCn": "离岗检测",
				"msgLevel": "1",
				"channelAlias": "集控室",
				"areaId": 1,
				"videoUrl": "",
				"areaName": "智慧安防",
				"cameraId": 5,
				"imageUrl": "http://116.205.170.159:8080/faceImg/lgjc.jpg",
				"id": 124357,
				"taskId": 1,
				"createDate": 1701657550809
			},{
				"imageTime": 1701608655000,
				"updateDate": 1701608655825,
				"msgType": "aqmjc",
				"dealState": "N",
				"faceImg": "",
				"msgTypeCn": "安全帽检测",
				"msgLevel": "1",
				"channelAlias": "左舷向后",
				"areaId": 1,
				"videoUrl": "",
				"areaName": "智慧安防",
				"cameraId": 9,
				"imageUrl": "http://116.205.170.159:8080/faceImg/aqmjc.jpg",
				"id": 124134,
				"taskId": 3,
				"createDate": 1701608655825
			},{
				"imageTime": 1701593289000,
				"updateDate": 1701593289502,
				"msgType": "kzjc",
				"dealState": "N",
				"faceImg": "",
				"msgTypeCn": "口罩检测",
				"msgLevel": "1",
				"channelAlias": "camera_0",
				"areaId": 1,
				"videoUrl": "",
				"areaName": "智慧安防",
				"cameraId": 34,
				"imageUrl": "http://116.205.170.159:8080/faceImg/kzjc.jpg",
				"id": 100787,
				"taskId": 5,
				"createDate": 1701593289502
			},{
				"imageTime": 1701502182000,
				"updateDate": 1701502182731,
				"msgType": "qycr",
				"dealState": "N",
				"faceImg": "",
				"msgTypeCn": "区域闯入",
				"msgLevel": "1",
				"channelAlias": "camera_7",
				"areaId": 1,
				"videoUrl": "",
				"areaName": "智慧安防",
				"cameraId": 40,
				"imageUrl": "http://116.205.170.159:8080/faceImg/qycr.jpg",
				"id": 100467,
				"taskId": 2,
				"createDate": 1701502182731
			},{
				"imageTime": 1701244010000,
				"updateDate": 1701244010568,
				"msgType": "yhjc",
				"dealState": "N",
				"faceImg": "",
				"msgTypeCn": "烟火识别",
				"msgLevel": "1",
				"channelAlias": "船艉右舷向前",
				"areaId": 1,
				"videoUrl": "",
				"areaName": "智慧安防",
				"cameraId": 12,
				"imageUrl": "http://116.205.170.159:8080/faceImg/yhjc.jpg",
				"id": 122266,
				"taskId": 7,
				"createDate": 1701244010568
			},{
				"imageTime": 1701186454000,
				"updateDate": 1701186455040,
				"msgType": "ddhjc",
				"dealState": "N",
				"faceImg": "",
				"msgTypeCn": "打电话检测",
				"msgLevel": "1",
				"channelAlias": "驾驶室内",
				"areaId": 1,
				"videoUrl": "",
				"areaName": "智慧安防",
				"cameraId": 3,
				"imageUrl": "http://116.205.170.159:8080/faceImg/ddhjc.jpg",
				"id": 121824,
				"taskId": 4,
				"createDate": 1701186455040
			},{
				"imageTime": 1701664807000,
				"updateDate": 1701664807040,
				"msgType": "lwjc",
				"dealState": "N",
				"faceImg": "",
				"msgTypeCn": "未瞭望检测",
				"msgLevel": "1",
				"channelAlias": "驾驶室内左",
				"areaId": 1,
				"videoUrl": "",
				"areaName": "智慧安防",
				"cameraId": 3,
				"imageUrl": "http://116.205.170.159:8080/faceImg/lwjc.png",
				"id": 121824,
				"taskId": 4,
				"createDate": 1701664807040
			}],
			total: 8
		};
		// listAlert(_queryParams).then((response) => {
			let _obj = (queryParams.value.msgType.length?response.data.filter((item) => { return item.msgType == queryParams.value.msgType}):response.data);
			if (_obj != undefined) {
				let _src = "";
				_obj.forEach((item, ind) => {
					if (item.imageUrl != undefined) {
						item.src = item.imageUrl;
						item.srcLi = [item.src];
					} else {
						item.srcLi = [];
						item.src = "";
					}
				});
				alertList.value = _obj;
				total.value = response.total;
			} else {
				alertList.value = [];
				total.value = 0;
			}
			loading.value = false;
		// });
		
	}
	getList();
</script>

<style scoped lang="scss">
</style>