<template>
  <div class="homeBox">
    <GdMap></GdMap>





    <!-- 头部 -->

    <Head></Head>
    <!-- 左边 内容-->
    <div class="home-aside asideL">
      <div class="asideL-top">
        <div class="common-title">数据采集</div>
        <div class="comom-cnt">
          <Collection></Collection>
        </div>
      </div>
      <div class="asideL-bottom">
        <div class="common-title">人员预警</div>
        <div class="comom-cnt">
          <!-- <Warning></Warning> -->
          <PeoWarning />
        </div>
      </div>
      <div class="asideL-bottom">
        <div class="common-title">车辆预警</div>
        <div class="comom-cnt">
          <!-- <Warning></Warning> -->
          <CarWarning />
        </div>
      </div>
    </div>
    <!-- 右边 内容-->
    <div class="home-aside asideR">
      <div class="asideL-top">
        <div class="common-title">值班备勤</div>
        <div class="comom-cnt">
          <BeOnDuty></BeOnDuty>
        </div>
      </div>
      <div class="asideL-bottom">
        <div class="common-title">预警统计分析</div>
        <div class="comom-cnt">
          <WanringAnyse></WanringAnyse>
        </div>
      </div>
    </div>
    <div class="asideB" >
      <img src="@/assets/images/bi/gzy.png"  @click="getsxtGetList"/>
    </div>
  </div>
  <Entrance v-if="showEntrance" :JczData="JczData" />
  <PopupWindows />
</template>

<script setup>
import GdMap from "@/components/GdMap/index.vue";
import Head from "./layout/head.vue";
import Collection from "./components/collection.vue";
import CarWarning from "./components/CarWarning.vue";
import PeoWarning from "./components/PeoWarning.vue";
import BeOnDuty from "./components/beonDuty.vue";
import Entrance from "./components/entrance.vue";
import WanringAnyse from "./components/wanringAnyse.vue";
import { jczgetJczList, sxtGetList } from "@/api/mosty-jcz";
import { ysSxtGetList } from '@/api/yszx.js'
import emitter from "@/utils/eventBus.js";
import PopupWindows from "@/components/popupWindows/index.vue";

import { ref, onMounted } from "vue";
//获取所有检查站
const getjczgetJczList = () => {
  jczgetJczList({}).then((res) => {
    const point = res.filter((item) => item.jd && item.wd);
    const icon = require("@/assets/images/z.png");
    emitter.emit("addPointArea", { coords: point, icon, flag: "jczMap_hm" });
  });
};
getjczgetJczList();
const JczData = ref();
const showEntrance = ref(false);
onMounted(() => {
  emitter.on("showJcz", (res) => {
    if (res) {
      const promes = {
        jczid: res.id,
      }
      showEntrance.value = true;
      JczData.value = res;
      emitter.emit("deletePointArea", "jczMap_Gzy");
      sxtGetList(promes).then(resData => {
        emitter.emit("addPointArea", {
          coords: resData,
          icon: require("@/assets/point/sp.png"),
          flag: "jczMap_Gzy"
        });
      })
    } else {
      showEntrance.value = false;
    }
  });
});
const getsxtGetList = () => {
  ysSxtGetList().then(res => {
    emitter.emit("deletePointArea", "jczMap_Gzy");
    emitter.emit("addPointArea", {
      coords: res,
      icon: require("@/assets/point/sp.png"),
      flag: "jczMap_Gzy"
    });
  })
}
const showDiclog = ref(true)
getsxtGetList()
</script>

<style lang="scss" scoped>
.homeBox {
  width: 100%;
  height: 100vh;
  position: relative;

  .home-aside {
    overflow: hidden;
    z-index: 3;
    width: 442px;
    height: 100%;
    position: absolute;
    height: calc(100vh - 67px);
    top: 65px;
    background: #0e1b29;
  }

  // 左边
  .asideL {
    left: 0;

    .asideL-top {
      height: 480px;
      background: url("~@/assets/images/border_L_T.png") no-repeat center center;
      background-size: 100% 100%;
    }

    .asideL-bottom {
      height: calc((100% - 505px) / 2);
      margin-top: 10px;
      background: url("~@/assets/images/border_R_T.png") no-repeat center center;
      // background: url("~@/assets/images/border_L_T.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }

  // 右边
  .asideR {
    right: 0;
    padding-right: 10px;
    box-sizing: border-box;

    .asideL-top {
      height: 40%;
      background: url("~@/assets/images/border_R_T.png") no-repeat center center;
      background-size: 100% 100%;
    }

    .asideL-bottom {
      height: 60%;
      background: url("~@/assets/images/border_R_B.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }
.asideB{
  position: absolute;bottom: 50px;z-index:11;left: 50%;transform: translateX(-50%);height: 100px;width: 50%;padding: 0 30px;
}
  // 公用
  .common-title {
    padding: 0 54px;
    box-sizing: border-box;
    font-size: 22px;
    font-family: "YSBTH";
    background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .comom-cnt {
    height: calc(100% - 30px);
    padding: 4px 20px;
    box-sizing: border-box;
  }
}
</style>
