<template>
  <!-- 顶栏 -->
  <top-bar />

  <container>
    <template v-slot:left>
      <side-item title="大事记">
        <memorabilia />
      </side-item>
      <side-item title="饱和量仪表盘">
        <div class="flex justify-between" style="width:100%;height:100%">
          <usable-area />
          <parking-space />
        </div>
      </side-item>
      <side-item title="仓库吞吐量对比图">
        <warehouse />
      </side-item>
    </template>

    <template v-slot:center>
      <iframe class="block frame" frameborder="0" src="https://www.tall.wiki/wl/2"></iframe>
    </template>

    <template v-slot:right>
      <side-item title="货物吞吐量曲线">
        <curve />
      </side-item>
      <side-item title="进出车次统计">
        <amount />
      </side-item>
      <side-item title="园区财务统计表">
        <finance />
      </side-item>
    </template>
  </container>

  <!-- 底部区域 -->
  <footer-bar :showIndex="showIndex" @showMonitor="showMonitor"></footer-bar>

  <!-- 监控 -->
  <div class="vedio" v-show="show">
    <div class="head">
      <div class="camera">摄像头监控视频</div>
      <img @click="show = false" class="close" src="../assets/img/close.png" />
    </div>
    <div class="monitor">
      <div class="monitor1">
        <iframe
          frameborder="0"
          height="100%"
          scrolling="no"
          src="https://www.tall.wiki/kangfu-v1/?key=230659446"
          width="100%"
        ></iframe>
        <!-- 生产   https://www.tall.wiki/kangfu-v1/?key=E83239936 -->
        <!-- 测试   https://www.tall.wiki/kangfu-v1/?key=230659446 -->
        <div class="screen">
          <img @click="$router.push('/vs')" class="monitor2" src="../assets/img/fullScreen.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import TopBar from "comp/top-bar.vue";
import Container from "comp/content.vue";
import SideItem from "comp/side-item.vue";
import FooterBar from "comp/footer-bar.vue";
import Curve from "comp/curve.vue";
import Amount from "@/components/amount.vue";
import Finance from "@/components/finance.vue";
import Warehouse from "@/components/warehouse.vue";
import ParkingSpace from "@/components/parkingSpace.vue";
import UsableArea from "@/components/usableArea.vue";
import Memorabilia from "@/components/memorabilia.vue";

export default defineComponent({
  components: {
    TopBar,
    Container,
    SideItem,
    FooterBar,
    Curve,
    Amount,
    Finance,
    Warehouse,
    ParkingSpace,
    UsableArea,
    Memorabilia,
  },
  data() {
    return {
      show: false,
      showIndex: 1,
    };
  },
  methods: {
    showMonitor() {
      console.log("显示");
      this.show = true;
    },
  },
});
</script>

<style scoped>
.frame {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.vedio {
  position: absolute;
  bottom: 15%;
  left: 37%;
  z-index: 99;
  width: 524rem;
  height: 369rem;
  background: url(/src/assets/img/vedio.png) center no-repeat;
  background-size: 100% 100%;
}

.head {
  text-align: center;
  font-size: 20rem;
  padding-top: 30rem;
  padding-bottom: 10rem;
}

.camera {
  color: #fff;
  font-size: 12rem;
}

.close {
  position: absolute;
  top: 7%;
  right: 8%;
  width: 20rem;
  height: 20rem;
}

.monitor {
  width: 446rem;
  height: 287rem;
  margin: 0 auto;
}

.monitor1 {
  width: 100%;
  height: 100%;
  position: relative;
}

.screen {
  width: 100%;
  height: 40rem;
  position: absolute;
  right: 0;
  bottom: -1px;
  z-index: 9;
  background: rgba(0, 0, 0, 0.5);
}

.monitor2 {
  width: 30rem;
  height: 30rem;
  position: absolute;
  right: 15rem;
  bottom: 5rem;
}
</style>
