<template>
  <div
    class="all-dialog noScollLine"
    :style="{ left: props.isPosition ? '0px' : '388px' }"
    style="transition: all 0.5s"
  >
    <!-- 预警信息弹框 -->
    <WarningInfo v-if="isShow.showYj" :data="list.yjxqInfo" />
    <!--警情弹框 -->
    <AjInfo v-show="isShow.showJq" :data="list.jqxqList" />
    <!-- 指令信息弹框 -->
    <InstructionsInfo v-if="isShow.showZl" :data="list.zlxqList" />
    <!-- 公安资源弹窗 -->
    <GazyInfo v-show="isShow.showGazy" :data="list.gzjgxqList" />
    <!-- 社会资源弹窗 -->
    <ShzyInfo v-if="isShow.showShzy" :data="list.shzyxqList" />
    <!-- 感知源弹窗 -->
    <GzyInfo v-if="isShow.showGzy" :data="list.gzyxqList" />
    <!-- 周边巡组 -->
    <PoliceGroupList v-if="isShow.showZbxz" :data="list.zbxzxqList" />
    <!--转为指令 -->
    <PoliceGroupBtnList />
  </div>
</template> 

<script setup>
import emitter from "@/utils/eventBus.js";
import GzyInfo from "./dialog/gzyInfo.vue";

import PoliceGroupList from "./dialog/policeGroupList.vue";
import PoliceGroupBtnList from "./dialog/policeGroupBtnList.vue";
import ShzyInfo from "./dialog/shzyInfo.vue";
import WarningInfo from "./dialog/warningInfo.vue";
import AjInfo from "./dialog/ajInfo.vue";
import GazyInfo from "./dialog/gazyInfo.vue";
import InstructionsInfo from "./dialog/instructionsInfo.vue";
import { ref, defineProps, onMounted, onUnmounted, reactive } from "vue";
const props = defineProps({
  isPosition: Boolean
});

const isShowDefault = ref({});
const isShow = ref({
  showYj: false, //预警弹窗
  showJq: false, //警情弹窗
  showZl: false, //指令弹窗
  showGazy: false, //公安机关弹窗
  showShzy: false, //社会资源关弹窗
  showGzy: false, //社会资源关弹窗
  showZbxz: false //周边巡组弹窗
});
const list = reactive({
  yjxqInfo: [], //预警数据
  jqxqList: [], //警情数据
  zlxqList: [], //指令数据
  gzjgxqList: {}, //公安机关数据
  shzyxqList: [], //社会资源数据
  gzyxqList: [], //感知元数据
  zbxzxqList: Object //周边巡组数据
});

onMounted(() => {
  isShowDefault.value = JSON.parse(JSON.stringify(isShow.value));
  // 展示预警
  emitter.on("showYjxq", (res) => {
    isShow.value.showYj = res ? true : false;
    
    if (res) list.yjxqInfo = res;
  });
  // 展示警情
  emitter.on("showAj", (res) => {
    isShow.value.showJq = res ? true : false;
    if (res) list.jqxqList = res;
  });
  // 展示指令
  emitter.on("showYjzl", (res) => {
    isShow.value.showZl = res ? true : false;
    if (res) list.zlxqList = res;
  });

  // 展示公安机关
  emitter.on("showGazy", (res) => {
    isShow.value.showGazy = res ? true : false;
    if (!isShow.value.showGazy) emitter.emit("deleteText"); //清除巡防区文字
    if (res) list.gzjgxqList = res;
  });
  // 社会资源
  emitter.on("showShzy", (res) => {
    isShow.value.showShzy = res ? true : false;
    if (res) list.shzyxqList = res;
  });

  // 感知源
  emitter.on("showGzy", (res) => {
    isShow.value.showGzy = res ? true : false;
    if (res) {
      list.gzyxqList = res.map((item) => {
        item.isPlay = false;
        return item;
      });
    }
  });

  // 周边巡组
  emitter.on("showZbxz", (res) => {
    isShow.value.showZbxz = res ? true : false;
    if (res) list.zbxzxqList = res;
  });
  // 关闭所有弹窗
  emitter.on("closeAllDialog", (res) => {
    isShow.value = JSON.parse(JSON.stringify(isShowDefault.value));
    emitter.emit("deletePointArea", "xzlxIcon");
    emitter.emit("drawLineAnimation", "route");
    emitter.emit("clearLine");
  });
});
onUnmounted(() => {
  emitter.off("showCcyj");
  emitter.off("videoClick");
  emitter.off("clickZbyj");
  emitter.off("closeVideo");
  emitter.off("showGzy");
  emitter.off("showGazy");
  emitter.off("showShzy");
  emitter.off("showAj");
  emitter.off("showYjxq");
  emitter.off("showYjzl");
  emitter.off("showZbxz");
  emitter.off("closeAllDialog");
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.all-dialog {
  position: absolute;
  width: 370px;
  top: 90px;
  max-height: 90vh;
  overflow: hidden;
  overflow-y: auto;
  padding-right: 10px;
  box-sizing: border-box;
  
}
</style>