<template>
  <div
    class="rightDilog noScollLine"
    :style="{ right: props.isPosition ? '0px' : '388px' }"
    style="transition: all 0.5s"
  >
    <!-- 周边视频更多视频三个视频列表的时候 -->
    <MoreVideo
      @close="onVideoClose('zb')"
      :info="jqDetail"
      :title="'周边视频'"
      v-if="showVideoWindow"
    />
    <!--视频随动 -->
    <MoreVideo
      @close="onVideoClose('sd')"
      :info="xzDetail"
      :title="'视频随动'"
      v-if="showVideoSpsdWindow"
    />
    <!-- 轨迹预警 -->
    <DialogWarningList
      @close="onClose('gj')"
      :info="yjDetail"
      :title="'轨迹预警'"
      v-if="showYjWindow"
    />
    <!-- 周边预警 -->
    <DialogWarningList
      @close="onClose('zb')"
      :info="zbyjDetail"
      :title="'周边预警'"
      v-if="showZbyjWindow"
    />
    <!-- 打卡情况 -->
    <DkqkList
      @close="onClose('dk')"
      :info="dkqkDetail"
      :title="'打卡情况'"
      v-if="showDkqkWindow"
    />
  </div>
</template>

<script setup>
import emitter from "@/utils/eventBus.js";
import MoreVideo from "./dialog/moreVideo.vue";
import DialogWarningList from "./dialog/warningList.vue";
import DkqkList from "./dialog/dkqkList.vue";
import { ref, defineProps, onMounted, onUnmounted } from "vue";
const props = defineProps({
  isPosition: Boolean
});
const zbyjDetail = ref(null); //周边预警详情
const dkqkDetail = ref(null); //打卡情况详情
const showDkqkWindow = ref(false); //是否显示周边预警
const yjDetail = ref(null); //某条预警详情
const showZbyjWindow = ref(false); //是否显示周边预警
const jqDetail = ref(null); // 某条警情详情
const showVideoWindow = ref(false); //是否显示周边视频
const xzDetail = ref(null); //巡组详情
const showVideoSpsdWindow = ref(false); //吃否显示视频随动
const showYjWindow = ref(false); //是否显示预警轨迹弹窗
onMounted(() => {
  emitter.on("videoClick", (res) => {
    jqDetail.value = res;
    showVideoWindow.value = true;
  });
  emitter.on("closeVideo", (res) => {
    showVideoWindow.value = false;
    showVideoSpsdWindow.value = false;
  });
  emitter.on("clickZbyj", (res) => {
    zbyjDetail.value = res;
    showZbyjWindow.value = true;
  });
  emitter.on("clickDkqk", (res) => {
    dkqkDetail.value = res;
    showDkqkWindow.value = true;
  });
  emitter.on("showCcyj", (res) => {
    yjDetail.value = res;
    showYjWindow.value = true;
  });
  // 视频随动
  emitter.on("clickSpsd", (res) => {
    xzDetail.value = res;
    showVideoSpsdWindow.value = true;
  });
});
//关闭周边视频 || 视频随动
function onVideoClose(type) {
  if (type == "zb") {
    showVideoWindow.value = false;
  } else {
    showVideoSpsdWindow.value = false;
  }
}
//关闭轨迹预警 || 周边预警
function onClose(type) {
  if (type == "gj") {
    showYjWindow.value = false;
  } else if (type == "zb") {
    showZbyjWindow.value = false;
  } else {
    showDkqkWindow.value = false;
  }
}
onUnmounted(() => {
  emitter.off("clickDkqk");
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.rightDilog {
  position: absolute;
  top: 91px;
  width: 360px;
  right: 380px;
  z-index: 9;
  max-height: 90vh;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
</style>
