<!--
 * @Author: your name
 * @Date: 2024-07-01 10:34:30
 * @LastEditTime: 2024-07-04 10:11:46
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \my_web_new_gd\src\views\largeScreen\home\components\dialog\ajInfo.vue
-->
<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="box-contant" style="padding: 4px 10px; box-sizing: border-box">
      <div v-for="(item, index) in props.data" :key="index">
        <div class="infoBox">
          <JqItm :data="item" :isDetail="true"></JqItm>
        </div>
        <div class="btnBox">
          <button class="dp-default small" @click="handleGroup(item)">
            推荐处警巡组
          </button>
          <button class="dp-default small">现场视频</button>
          <button class="dp-default small" @click="handleVideo(item)">
            周边视频
          </button>
          <button class="dp-default small" @click="XZBtnShowFn(item)">
            指定处置
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import JqItm from "@/views/largeScreen/home/components/jqIem.vue";
import { ref, defineProps } from "vue";
import { useRouter } from "vue-router";
import emitter from "@/utils/eventBus.js"; // 左右折叠状态
import { addNewEvent } from "@/api/dpApi/home.js";
const props = defineProps({
  data: {
    type: Array,
    default: []
  }
});
const router = useRouter();

//关闭弹窗
function close() {
  emitter.emit("showAj", false);
  emitter.emit("deletePointArea", "jq");
  emitter.emit("removePlot", "PIOT");
}

// 周边视频
function handleVideo(item) {
  emitter.emit("videoClick", item);
}
//出警巡组
function handleGroup(item) {
  if (item.jd && item.wd) {
    emitter.emit("showZbxz", { data: item, type: "jq" });
  } else {
    ElMessage({ message: "该警情暂时没有经纬度!", type: "warning" });
  }
}

//先用转为指令弹窗
function XZBtnShowFn(item) {
  let obj = { type: "jq", data: item };
  emitter.emit("showXZBtn", obj);
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.box-contant {
  max-height: 700px;
  overflow: hidden;
  overflow-y: auto;
}
.btnBox{
  text-align: center;
  button{
    margin: 0 2px;
  }
}
</style>
