<template>
  <div class="dialogBox">
    <div class="title">
      <span class="mc">指令信息</span
      ><span @click="close" class="close">
        <el-icon><Close /></el-icon>
      </span>
    </div>
    <ul style="padding: 4px 10px; box-sizing: border-box;">
      <li v-for="(item, index) in props.data" :key="index">
        <div class="infoBox">
          <ZlItm :data="item" :isDetail="true" :dic="{ zlzt: D_BZ_ZXZTAI }"/>
        </div>
        <div class="btnBox">
          <button class="dp-default small" @click="policeGroupShowFn(item)" v-if="item.zlly != '03'">
            推荐处警巡组
          </button>
          <button class="dp-default small" @click="videoShowSs(item)" v-if="item.zlly != '03'">
            实时视频
          </button>
          <button class="dp-default small"  @click="warningListShowYjgj(item)" v-if="item.zlly != '03'">
            预警轨迹
          </button>
          <button class="dp-default small" @click="CKDTShowFn(item)">
            查看动态
          </button>
        </div>
      </li>
    </ul>
    <MessageLoad
      v-if="activeMessage"
      v-model="activeMessage"
      :data="zlxxInfo"
      @upData="activeMessage = false"
    />
  </div>
</template>

<script setup>
import ZlItm from "@/views/largeScreen/home/components/zlItem.vue";
import MessageLoad from "./MessageLoad.vue";
import { ref, defineProps, getCurrentInstance } from "vue";
import emitter from "@/utils/eventBus.js";
import { ElMessage } from "element-plus";
import { getDetailZl } from "@/api/dpApi/home.js";
const props = defineProps({
  data: {
    type: Array,
    default: []
  }
});
const zlInfo = ref(false);
const activeMessage = ref(false);
const zlxxInfo = ref(null);
const { proxy } = getCurrentInstance();
const { D_BZ_ZXZTAI } = proxy.$dict("D_BZ_ZXZTAI");

// 显示周边巡组
function policeGroupShowFn(item) {
  if(item.jd && item.wd){
    emitter.emit("showZbxz", item);
  }else{
    ElMessage({ message: "暂无巡组信息", type: "warning" });
  }
}
//显示实时视频
function videoShowSs(item) {
  emitter.emit("closeVideo", false);
  if (item.zlly == "01") {
    if (item.sbbh !== null) {
      let params = { ...item, splitNum: 1 };
      emitter.emit("openGzyVideo", params);
    } else {
      ElMessage({ message: "没有设备编号，无法播放视频", type: "warning" });
    }
  } else {
    ElMessage({
      message: "非预警指令，无感知源信息，无法播放视频",
      type: "warning"
    });
  }
}

//查看动态按钮
function CKDTShowFn(item) {
  zlxxInfo.value = item;
  activeMessage.value = true;
}
//显示预警轨迹
function warningListShowYjgj(item) {
  if (item.ywId) {
    getDetailZl(item.ywId).then((res) => {
      if (res) {
        emitter.emit("showCcyj", res);
      } else {
        ElMessage({ message: "暂无预警轨迹信息", type: "warning" });
      }
    });
  } else {
    ElMessage({ message: "暂无预警轨迹信息", type: "warning" });
  }
}
//关闭弹窗
function close() {
  emitter.emit("showYjzl", false);
  emitter.emit("deletePointArea", "zl");
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/largeScreen.scss";
@import "@/assets/css/homeScreen.scss";
.btnBox{
  display: flex;
  justify-content: center;
  .dp-default{
    margin: 0 4px;
  }
}

</style>
