<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%">
          <parking-space />
          <usable-area />
        </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/1"
      ></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>

  <!-- 长时间不操作屏幕跳出视频 -->
  <div
    id="thvideo"
    class="out-img flex justify-center align-center"
    v-if="timeOut"
  >
    <video
      id="myAudio"
      class="video"
      :src="vList[curr]"
      controls
      autoplay
    ></video>
  </div>

  <!-- 音频 -->
  <audio
    v-if="!timeOut"
    :src="src"
    controls
    autoplay
    loop="loop"
    id="audioBtn"
    ref="audio"
  ></audio>

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

  <!-- 监控1 -->
  <img
    @click="getWarehouses('show1')"
    class="monitor—btn"
    src="../assets/img/monitor.png"
    style
  />
  <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
          :src="iframeSrc1"
          frameborder="0"
          height="100%"
          scrolling="no"
          width="100%"
        ></iframe>
        <div class="screen">
          <img
            @click="showScreen = true"
            class="monitor2"
            src="../assets/img/fullScreen.png"
          />
        </div>
      </div>
    </div>
  </div>
  <!-- 全屏监控 -->
  <video-screen
    :iframeSrc="iframeSrc1"
    @closeScreen="closeScreen"
    v-if="showScreen"
  />

  <!-- 监控2 -->
  <img
    @click="getWarehouses('show2')"
    class="monitor—btn monitor—btn1"
    src="../assets/img/monitor-left.png"
    style
  />
  <div class="vedio" v-show="show2">
    <div class="head">
      <div class="camera">摄像头监控视频</div>
      <img @click="show2 = false" class="close" src="../assets/img/close.png" />
    </div>
    <div class="monitor">
      <div class="monitor1">
        <iframe
          :src="iframeSrc2"
          frameborder="0"
          height="100%"
          scrolling="no"
          width="100%"
        ></iframe>
        <div class="screen">
          <img
            @click="showScreen = true"
            class="monitor2"
            src="../assets/img/fullScreen.png"
          />
        </div>
      </div>
    </div>
  </div>

  <!-- 全屏监控 -->
  <video-screen
    :iframeSrc="iframeSrc2"
    @closeScreen="closeScreen"
    v-if="showScreen"
  />
</template>

<script lang="ts">
import senaudio from "../assets/sedaudio.wav";
import thvideo from "../assets/thvideo.mp4";
import forvideo from "../assets/forvideo.mp4";
import fifivideo from "../assets/fifvideo.mp4";
import sixvideo from "../assets/sixvideo.mp4";
import sevenvideo from "../assets/sevenvideo.mp4";
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";
import VideoScreen from "@/components/videoScreen.vue";
// import { getWarehouses } from "api/index";

export default defineComponent({
  components: {
    TopBar,
    Container,
    SideItem,
    FooterBar,
    Curve,
    Amount,
    Finance,
    Warehouse,
    ParkingSpace,
    UsableArea,
    Memorabilia,
    VideoScreen,
  },
  data() {
    return {
      show: false,
      show2: false,
      showScreen: false,
      showIndex: 0,
      iframeSrc1: "",
      iframeSrc2: "",
      timeOut: false, //设置超时的时间：1分钟
      timer: 0,
      src: senaudio,
      curr: 0,
      vList: [thvideo, forvideo, fifivideo, sixvideo, sevenvideo],
    };
  },

  mounted() {
    const that = this;
    // window.addEventListener("mousemove", this.move);
    window.addEventListener("mousemove", function () {
      that.move();
    });
  },

  methods: {
    //弹出视频
    move() {
      this.timeOut = false;
      const that = this;
      setTimeout(async () => {
        that.timeOut = true;
        await that.videoEnd();
      }, 5 * 60 * 1000);
    },

    //视频播放结束切换下一个视频
    videoEnd() {
      var aud = document.getElementById("myAudio");
      // console.log(aud);
      const that = this;
      aud.onended = function () {
        // alert("音频播放完成");
        if (that.curr === that.vList.length - 1) {
          that.curr = 0;
        } else {
          that.curr++;
        }
      };
    },

    // 关闭大屏
    closeScreen() {
      this.showScreen = false;
    },

    // 获取仓库信息
    async getWarehouses(value) {
      try {
        if (value === "show1") {
          if (this.show2) {
            this.show2 = false;
          }
          this.show = true;
        }
        if (value === "show2") {
          if (this.show) {
            this.show = false;
          }
          this.show2 = true;
        }
        // const data = await getWarehouses({ parkId: 1 });
        // if (data && data.parkEquipment && data.parkEquipment.length) {
        //   this.iframeSrc1 = data.parkEquipment[0].equipmentLocation;
        //   this.iframeSrc2 = data.parkEquipment[1].equipmentLocation;
        // }
      } catch (error) {
        console.log("error: ", error);
      }
    },
  },
});
</script>

<style scoped>
.out-img {
  position: absolute;
  height: 100% !important;
  width: 100% !important;
  z-index: 100;
  /* padding: 30px; */
  background-color: white;
}

/* .video {
  border-top: 30px solid #fff;
  border-bottom: 30px solid #fff;
} */

.monitor—btn {
  position: absolute;
  right: 0;
  top: 20%;
  z-index: 99;
  width: 48rem;
  height: 50rem;
}

.monitor—btn1 {
  top: 28%;
}

.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>
