<template>
  <div class="dialogBox">
    <div class="title">
      <span class="mc">预警信息</span
      ><span @click="close" class="close">
        <el-icon><Close /></el-icon>
      </span>
    </div>
    <div class="containerBox">
      <div v-for="(item, index) in props.data" :key="index">
        <div class="infoBox">
          <YjItem :data="item" :isDetail="true" />
        </div>
        <div class="btnBox">
          <button class="dp-default small" @click="policeGroupShowFn(item)">
            推荐处警巡组
          </button>
          <button class="dp-default small" @click="videoShowSs(item)">
            实时视频
          </button>
          <button class="dp-default small" @click="XZBtnShowFn(item)">
            指定处置
          </button>
          <button class="dp-default small" @click="warningListShowYjgj(item)">
            预警轨迹
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  getCurrentInstance,
  onMounted,
  onBeforeUpdate,
  defineProps,
  defineEmits
} from "vue";
import YjItem from "@/views/largeScreen/home/components/yjItem.vue";
import people from "@/assets/images/peo.png";
import car from "@/assets/images/car.png";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import emitter from "@/utils/eventBus.js";
import { getVideoById, getVideoById2 } from "@/api/dpApi/video.js";
const props = defineProps({
  data: Array
});
const emits = defineEmits(["showYjxq"]);
const router = useRouter();

onMounted(() => {});

//关闭弹窗
function close() {
  emitter.emit("showYjxq", false);
  emitter.emit("deletePointArea", "yj");
}
// 显示周边巡组
function policeGroupShowFn(item) {
  if (item.jd && item.wd) {
    emitter.emit("showZbxz", item);
  } else {
    ElMessage({ message: "暂无巡组信息", type: "warning" });
  }
}
//显示预警轨迹
function warningListShowYjgj(item) {
  emitter.emit("showCcyj", item);
}
// 转为指令
function XZBtnShowFn(item) {
  let obj = { type: "yj", data: item };
  emitter.emit("showXZBtn", obj);
}
// 显示视频回放
function videoShowFn() {
  ElMessage({
    message: "暂无视频信息",
    type: "warning"
  });
}
//显示实时视频
function videoShowSs(item) {
  let id = item.yjGzyid;
  getVideoById2(id).then((res) => {
    if (res) {
      let params = {
        ...item,
        splitNum: 1,
        sbbh: res.sbbh
      };
      emitter.emit("openGzyVideo", params);
    } else {
      videoShowFn();
    }
  });
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/largeScreen.scss";
@import "@/assets/css/homeScreen.scss";
.dialogBox {
  padding: 0 0 10px 0;
  box-sizing: border-box;
  .title {
    border-bottom: 1px solid #275288;
    margin-bottom: 6px;
    .mc {
      margin-left: 10px;
    }
  }
  .containerBox {
    max-height: 696px;
    overflow: hidden;
    overflow-y: auto;
    padding: 4px 10px;
    box-sizing: border-box;
    .infoBox {
      position: relative;
      border: none;
      padding: 10px 0;
    }
    .btnBox {
      text-align: center;
      button.dp-default.small {
        margin: 0 4px;
      }
    }
  }
}
</style>
