<template>
  <div>
    <home
      v-if="showMenu === 0"
      style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
    ></home>
    <psxt
      v-if="showMenu === 3"
      style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
    ></psxt>
    
    <v-scale-screen
      ref="scale-screen"
      width="1920"
      height="1080"
      :fullScreen="true"
    >
    <dlxt
      v-if="showMenu === 6"
      style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
    ></dlxt>
      <div class="container">
        <!-- 头部 -->
        <div class="header por">银洞坡金矿智能化综合管控平台</div>
        <div class="sub-header">
          <div class="sub-header-left">
            <div
              class="sub-item"
              :class="showMenu == 1 ? 'active' : ''"
              @click="changeMenu(1)"
            >
              <p>人员定位</p>
            </div>
            <div
              class="sub-item"
              @click="changeMenu(2)"
              key=""
              :class="showMenu == 2 ? 'active' : ''"
            >
              <p>环境监测</p>
            </div>
            <div
              class="sub-item"
              @click="changeMenu(3)"
              key=""
              :class="showMenu == 3 ? 'active' : ''"
            >
              <p>排水系统</p>
            </div>
          </div>
          <div class="sub-header-mid">
            <div class="top-change">
              <span @click="changeMenu(0)">首页</span>
              <span @click="openVideo">企业宣传</span>
              <span @click="goToSys">后台管理</span>
            </div>
          </div>
          <div class="sub-header-right">
            <div class="sub-item" :class="showMenu == 4 ? 'active' : ''" @click="changeMenu(4)"><p>提升机系统</p></div>
            <div class="sub-item" :class="showMenu == 5 ? 'active' : ''" @click="changeMenu(5)"><p>风机系统</p></div>
            <div class="sub-item" :class="showMenu == 6 ? 'active' : ''" @click="changeMenu(6)"><p>电力系统</p></div>
          </div>
        </div>

        <rydw v-if="showMenu === 1" style="pointer-events: auto"></rydw>
        <hjjc v-if="showMenu === 2" style="pointer-events: auto"></hjjc>

        <!-- 底部 -->
        <!-- <div class="footer">
          </div> -->
      </div>
    </v-scale-screen>
  </div>
</template>
<script>
// import * as echarts from "echarts";
// import { getScale } from "@/utils/tylerlcl";
import { listVideo } from "@/api/tyler/mainVideo";

import screenfull from "screenfull";
import rydw from "./items/rydw.vue";
import hjjc from "./items/hjjc.vue";
import psxt from "./items/psxt.vue";
import home from "./items/home.vue";
import dlxt from "./items/dlxt.vue";
export default {
  name: "cockpit",
  components: {
    home,
    rydw,
    hjjc,
    psxt,
    dlxt,
  },
  data() {
    return {
      previewUrl: process.env.VUE_APP_API_TARGET,
      showMenu: 0,
      videoData:null,
    };
  },
  mounted() {
    this.getVideo()
    if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
      screenfull.request();
    }
    //     this.areaCharts();
    //     this.alarm30();
  },
  methods: {
    getVideo(){
      this.videoData = null;
      listVideo().then(res => {
        this.videoData = this.previewUrl + res.data;
       
      })
    },
    changeMenu(val) {
      this.showMenu = val;
    },
    
    goToSys() {
      var link = this.$router.resolve({
        path: "/",
      });
      window.open(link.href);
      return;
    },
    openVideo(){
      window.open(this.videoData);
      return;
    },
  },
};
</script>
<style lang="scss" scoped>
/* 标题 */
@font-face {
  font-family: "ysbth";
  src: url("~@/assets/font/syhtCN-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "number";
  src: url("~@/assets/font/DS-Digital.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.por {
  position: relative;
}
.poa {
  position: absolute;
}
.psxt-bg {
  background: url("~@/assets/images/screen/psxt/bg.png") no-repeat center;
}
/* 基础容器 */
.container {
  width: 100%;
  height: 100%;
  background: url("~@/assets/images/screen/bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  // background-color: #08152a;
  position: relative;
  font-family: "SimHei";
  pointer-events: none;
  color: #fff;
}
/* 头部标题 */
.header {
  // height: 80px;
  text-align: center;
  // margin-bottom: 20px;
  // background: linear-gradient(90deg, rgba(0,72,143,0.8) 0%, rgba(0,36,71,0.6) 100%);

  display: flex;
  align-items: center;
  justify-content: center;
  // font-size: 2.5vw;
  letter-spacing: 2px;

  font-family: SimHei;
  // font-weight: 500;
  font-size: 38px;
  font-weight: bold;
  color: #ffffff;
  line-height: 55px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ffffff),
    color-stop(39.7216796875%, #f3f7fa),
    to(#03a9ff)
  );
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f3f7fa 39.7216796875%,
    #03a9ff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 70px;
}
.sub-header {
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  // transform-style: preserve-3d;
  perspective: 1000px;
  // transform: translateZ(-10px);
  pointer-events: auto;
}
.sub-header-left,
.sub-header-right {
  display: flex;
  justify-content: space-between;
  width: 494px;
  margin-top: -30px;

  .sub-item {
    width: 134px;
    height: auto;
    background: url("~@/assets/images/screen/normal.png") no-repeat center;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &.active {
      background: url("~@/assets/images/screen/click.png") no-repeat center;
      background-size: 100%;
    }
    p {
      font-family: Source Han Sans SC;
      font-weight: bold;
      font-size: 19px;
      color: #ffffff;
      line-height: 55px;
      background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f3f7fa 39.7216796875%,
        #03a9ff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      padding-bottom: 4px;
    }
  }
}
.sub-header-left {
  transform: rotateZ(4deg);
}
.sub-header-right {
  transform: rotateZ(-4deg);
}
.top-change {
  width: 425px;
  height: 44px;
  background: url("~@/assets/images/screen/top_bg.png") no-repeat center;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 16px;
  color: #11e0ff;
  span {
    cursor: pointer;
    text-indent: 1em;
    position: relative;
  }
  span:nth-child(1)::after {
    content: "";
    width: 17px;
    height: 17px;
    position: absolute;
    background: url("~@/assets/images/screen/icon7.png") no-repeat center;
    left: -4px;
    top: 0px;
    z-index: 20;
  }
  span:nth-child(2)::after {
    content: "";
    width: 17px;
    height: 17px;
    position: absolute;
    background: url("~@/assets/images/screen/icon6.png") no-repeat center;
    left: -4px;
    top: 2px;
    z-index: 20;
  }
  span:nth-child(3)::after {
    content: "";
    width: 17px;
    height: 17px;
    position: absolute;
    background: url("~@/assets/images/screen/icon8.png") no-repeat center;
    left: -4px;
    top: 0px;
    z-index: 20;
  }
}
::v-deep .screen-box {
  pointer-events: none;
}
</style>
