<template>
  <div class="homeBox" @click="handless">
    <Head :title="query.name" :query="query.name"></Head>
    <div class="mainBox_jcz hidden flex">
      <ul class="asideBox">
        <li class="asideItem" v-for="(item, idx) in meun.leftMeun" :key="idx">
          <div class="title">{{ item }}</div>
          <div class="asideCnt" @click="handless">
            <PeoCollection :jczId="query.id" v-if="item == '人员数据采集'"></PeoCollection>
            <PlowStatistics :jczId="query.id" v-if="item == '流入流出统计'"></PlowStatistics>
            <WarningCount :jczId="query.id" v-if="item == '预警统计'"></WarningCount>
          </div>
        </li>
      </ul>
      <div class="mainBox">
        <div class="main-top">
          <VideoMore></VideoMore>
        </div>
        <div class="main-bottom">
          <VideoFoot></VideoFoot>
        </div>
      </div>
      <ul class="asideBox">
        <li class="asideItem" v-for="(item, idx) in meun.rightMeun" :key="idx">
          <div class="title">{{ item }}</div>
          <div class="asideCnt">
            <BeOnDuty :jczId="query.id" v-if="item == '值班备勤'"></BeOnDuty>
            <CarWarning :jczId="query.id" v-if="item == '车辆预警'"></CarWarning>
            <PeoWarning :jczId="query.id" v-if="item == '人员预警'"></PeoWarning>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import Head from "@/views/home/layout/head.vue";
import PeoCollection from "./layout/PeoCollection.vue";
import PlowStatistics from "./layout/FlowStatistics.vue";
import WarningCount from "./layout/WarningCount.vue";
import BeOnDuty from "./layout/BeOnDuty.vue";
import CarWarning from "./layout/CarWarning.vue";
import PeoWarning from "./layout/PeoWarning.vue";
import VideoMore from "./layout/VideoMore.vue";
import VideoFoot from "./layout/VideoFoot.vue";
import { useRoute } from "vue-router";
import { ref, onMounted, onUnmounted, reactive, computed } from "vue";
const router = useRoute();
const meun = reactive({
  leftMeun: ["人员数据采集", "流入流出统计", "预警统计"],
  rightMeun: ["值班备勤", "车辆预警", "人员预警"]
});
const query = computed(() => {
  return router.query;
});
</script>

<style lang="scss" scoped>
.homeBox {
  background: #000;
}

.mainBox_jcz {
  position: absolute;
  top: 65px;
  width: 100%;
  height: calc(100vh - 60px);
  background: #000;

  .asideBox {
    width: 420px;
    height: 100%;

    .asideItem {
      height: calc(100% / 3);
      background: url("~@/assets/images/bg12.png") no-repeat;
      background-size: 100% 100%;
      padding: 0 10px;
      box-sizing: border-box;

      .title {
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
        font-size: 20px;
        font-family: "YSBTH";
        background: linear-gradient(0deg, #59a6f4 0%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .asideCnt {
        height: calc(100% - 50px);
        overflow: hidden;
        overflow-y: auto;
      }
    }
  }

  .mainBox {
    flex: 1 0 0;
    margin: 10px;

    .main-top {
      background: url("~@/assets/images/bg_13.png") no-repeat;
      background-size: 100% 100%;
      height: 70%;
    }

    .main-bottom {
      height: 30%;
      background: url("~@/assets/images/bg_14.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
