<template>
  <div class="padding-lr-xs" style="height: calc(100vh - 84px);">
    <el-row :gutter="20" style="height:100%;">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <el-menu :default-active="queryParams.msgType" style="min-height: 100%" @select="handleSelect">
          <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="lgjc">离岗检测</el-menu-item>
            <el-menu-item index="qycr">区域警戒</el-menu-item>
            <el-menu-item index="ddhjc">打电话检测</el-menu-item>
            <el-menu-item index="cyjc">抽烟检测</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <span>物品检测</span>
            </template>
            <el-menu-item index="kzjc">口罩检测</el-menu-item>
            <el-menu-item index="aqmjc">安全帽检测</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24" style="height:100%;">
        <div class="padding-lr-xs" style="height:100%;overflow-y: auto;">
          <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="" />
                <el-option label="离岗检测" value="lgjc" />
                <el-option label="区域警戒" value="qycr" />
                <el-option label="抽烟检测" value="cyjc" />
                <el-option label="打电话检测" value="ddhjc" />
                <el-option label="口罩检测" value="kzjc" />
                <el-option label="安全帽检测" value="aqmjc" />
              </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="alertLi.length">
              <div class="padding-xs" v-for="(item, i) in alertLi" :key="i">
                <el-card :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>
                        <svg-icon icon-class="adress" class="margin-right-xs" />
                        <span>{{ item.channelAlias }}</span>
                      </div>
                      <div @click="seeVid(item.videoUrl)" class="pointer">
                        <svg-icon icon-class="video" class="margin-right-xs" />查看视频
                      </div>
                    </div>
                    <div><svg-icon icon-class="time" class="margin-right-xs" />{{ parseTime(item.createDate) }}</div>
                  </div>
                </el-card>
              </div>
            </div>
            <el-empty description="暂无数据" v-else></el-empty>
          </div>
          <pagination v-show="total > 0" :total="total" v-model:page="_pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
        </div>
      </el-col>
    </el-row>
    <el-dialog title="视频回放" top="20px" v-model="dialogVisible" :before-close="handleClose" width="80%" :fullscreen="true">
      <div v-html="vidSrc"></div>
    </el-dialog>
  </div>
</template>

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

const { queryParams, vidSrc, dialogVisible } = toRefs(data);
const handleSelect = (key) => {
  if (queryParams.value.msgType != key) {
    queryParams.value.msgType = key;
    getList();
  }
};
function seeVid(url) {
  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() {
  _pageNum.value = 1;
  getList();
}

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

function getList() {
  loading.value = true;
  let _obj = queryParams.value;
  queryParams.value.pageNum = _pageNum.value - 1;

  listAlert(_obj).then((response) => {
    if (response.data != undefined) {
      let _obj = response.data;
      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/g, "https")
            .replace(/127.0.0.1:8170/g, "www.enstation.vip:9443");
          item.srcLi = _src.split(";");
          item.src = item.srcLi[0];
        } else {
          item.srcLi = [];
          item.src = "";
        }
      });
      alertLi.value = _obj;
      total.value = response.total;
    } else {
      alertLi.value = [];
      total.value = 0;
    }
    loading.value = false;
  });
}

getList();
</script>

<style scoped>
</style>
