<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": "http://127.0.0.1:8170/faceImg/businessFile/20231204/cyjc/1715ee5d-07e2-46e9-9580-acb826253c97.mp4",
				"areaName": "智慧安防",
				"cameraId": 3,
				"imageUrl": "http://127.0.0.1:8170/faceImg/businessFile/20231204/cyjc/Waring_3586b596-d9b6-45ef-b325-c442beebd6a7.jpg;http://127.0.0.1:8170/faceImg/businessFile/20231204/cyjc/Org_34853e77-9d97-4d26-957b-9b860a637f94.png",
				"id": 124358,
				"taskId": 5,
				"createDate": 1701658164120
			}, {
				"imageTime": 1701657550000,
				"updateDate": 1701657550809,
				"msgType": "lgjc",
				"dealState": "N",
				"faceImg": "",
				"msgTypeCn": "离岗检测",
				"msgLevel": "1",
				"channelAlias": "集控室",
				"areaId": 1,
				"videoUrl": "http://127.0.0.1:8170/faceImg/businessFile/20231204/lgjc/b7548c71-1ee7-42d5-925b-441fea8e577f.mp4",
				"areaName": "智慧安防",
				"cameraId": 5,
				"imageUrl": "http://127.0.0.1:8170/faceImg/businessFile/20231204/lgjc/Waring_27c96252-4207-47de-8900-b8f4d51990ef.jpg;http://127.0.0.1:8170/faceImg/businessFile/20231204/lgjc/Org_21f41d2e-796b-45ca-85a0-d798ab1b9544.png",
				"id": 124357,
				"taskId": 1,
				"createDate": 1701657550809
			},{
				"imageTime": 1701186454000,
				"updateDate": 1701186455040,
				"msgType": "ddhjc",
				"dealState": "N",
				"faceImg": "",
				"msgTypeCn": "打电话检测",
				"msgLevel": "1",
				"channelAlias": "驾驶室内",
				"areaId": 1,
				"videoUrl": "http://127.0.0.1:8170/faceImg/businessFile/20231128/ddhjc/3e10d844-6b9a-46bb-8816-c68ee82d7f14.mp4",
				"areaName": "智慧安防",
				"cameraId": 3,
				"imageUrl": "http://127.0.0.1:8170/faceImg/businessFile/20231128/ddhjc/Waring_40628631-9bea-4f96-ade5-d0f6824cc215.jpg;http://127.0.0.1:8170/faceImg/businessFile/20231128/ddhjc/Org_e7118b95-4315-47f0-bcd5-01ab7b9c6119.png",
				"id": 121824,
				"taskId": 4,
				"createDate": 1701186455040
			}, {
				"imageTime": 1701608655000,
				"updateDate": 1701608655825,
				"msgType": "aqmjc",
				"dealState": "N",
				"faceImg": "",
				"msgTypeCn": "安全帽检测",
				"msgLevel": "1",
				"channelAlias": "左舷向后",
				"areaId": 1,
				"videoUrl": "http://127.0.0.1:8170/faceImg/businessFile/20231203/aqmjc/3978e732-b784-4fbf-bc14-567428e645a9.mp4",
				"areaName": "智慧安防",
				"cameraId": 9,
				"imageUrl": "http://127.0.0.1:8170/faceImg/businessFile/20231203/aqmjc/Waring_1914ca7d-e848-49a8-a822-d5abbcd41e9f.jpg;http://127.0.0.1:8170/faceImg/businessFile/20231203/aqmjc/Org_4a9c73ed-4618-4aea-99bf-3e49da3ee51f.png",
				"id": 124134,
				"taskId": 3,
				"createDate": 1701608655825
			}, {
				"imageTime": 1701244010000,
				"updateDate": 1701244010568,
				"msgType": "yhjc",
				"dealState": "N",
				"faceImg": "",
				"msgTypeCn": "烟火识别",
				"msgLevel": "1",
				"channelAlias": "船艉右舷向前",
				"areaId": 1,
				"videoUrl": "http://127.0.0.1:8170/faceImg/businessFile/20231129/yhjc/46f39198-638f-48a8-a4a0-e7c977d425f9.mp4",
				"areaName": "智慧安防",
				"cameraId": 12,
				"imageUrl": "http://127.0.0.1:8170/faceImg/businessFile/20231129/yhjc/Waring_25834c77-50bb-4351-9c07-23f7220fb6b2.jpg;http://127.0.0.1:8170/faceImg/businessFile/20231129/yhjc/Org_9ec60f63-b315-44a1-8100-d87ef8576a62.png",
				"id": 122266,
				"taskId": 7,
				"createDate": 1701244010568
			},{
				"imageTime": 1701502182000,
				"updateDate": 1701502182731,
				"msgType": "qycr",
				"dealState": "N",
				"faceImg": "",
				"msgTypeCn": "区域闯入",
				"msgLevel": "1",
				"channelAlias": "camera_7",
				"areaId": 1,
				"videoUrl": "http://127.0.0.1:8170/faceImg/businessFile/20231202/qycr/39ee040f-87e6-4a0c-81c5-72ed889aa4d2.mp4",
				"areaName": "智慧安防",
				"cameraId": 40,
				"imageUrl": "http://127.0.0.1:8170/faceImg/businessFile/20231202/qycr/Waring_9c320c58-1e30-4574-9138-15b4fc82c8a0.jpg;http://127.0.0.1:8170/faceImg/businessFile/20231202/qycr/Org_d5f046d7-ea53-43eb-8a42-62d411e22809.png",
				"id": 100467,
				"taskId": 2,
				"createDate": 1701502182731
			},{
				"imageTime": 1701593289000,
				"updateDate": 1701593289502,
				"msgType": "kzjc",
				"dealState": "N",
				"faceImg": "",
				"msgTypeCn": "口罩检测",
				"msgLevel": "1",
				"channelAlias": "camera_0",
				"areaId": 1,
				"videoUrl": "http://127.0.0.1:8170/faceImg/businessFile/20231203/kzjc/9d18e0ac-18e0-4de3-a4cb-3216a6030bfd.mp4",
				"areaName": "智慧安防",
				"cameraId": 34,
				"imageUrl": "http://127.0.0.1:8170/faceImg/businessFile/20231203/kzjc/Waring_0f9f2cff-8aeb-498e-9498-d4113e391682.jpg;http://127.0.0.1:8170/faceImg/businessFile/20231203/kzjc/Org_c21b5cdd-96f2-47df-9781-7a979ffeebb8.png",
				"id": 100787,
				"taskId": 5,
				"createDate": 1701593289502
			}],
		};
		// 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) {
						// _src = item.imageUrl.replace(/http/g,"https").replace(/127.0.0.1:8170\/faceImg\/businessFile/g,"www.enstation.vip:9443/alarm_folder/display_image");
						_src = item.imageUrl.replace("http://127.0.0.1:8170","https://www.enstation.vip:9443");
						item.srcLi = _src.split(";");
						item.src = item.srcLi[0];
					} 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>