<template>
  <div id="data-view">
    <dv-full-screen-container ref="dataView">
      <div class="main-header index-head">
        <!-- 顶栏开始 -->
        <div id="header" class="index-head">
          <div class="bt">
            {{ title }}
          </div>
          <!-- <div class="bt">海南监控数据中心</div> -->
          <el-row class="elRow">
            <el-col :span="8">
              <div class="elCol">
                <div class="yxsj">
                  运行时间：<span class="p1">{{ yxsj }}</span><span style="margin-left: 10px">天</span>
                </div>
                <div class="dqsj">
                  当前时间：<span class="p2">{{ dqsj }}</span>
                </div>
              </div>
            </el-col>

            <el-col :span="8" :offset="8">
              <div class="elCol" style="padding: 0 23%">
                <div class="tjsj">
                  统计时间：<span class="p3">{{ tjsj }}</span>
                </div>
                <!-- <div style="font-size: 20px; color: #00bf8f">首页概览</div> -->
              </div>
            </el-col>
          </el-row>

          <!-- <el-button
            type="primary"
            class="menu-index"
            :icon="fullscreen ? 'el-icon-close' : 'el-icon-view'"
            size="mini"
            circle
            @click="handleFullScreen"
          ></el-button> -->
        </div>
      </div>

      <div class="main-container" :key="sun" :style="`height: calc(${fullscreen ? '100% - 80px' : '100% - 250px'
        }   );`">
        <!-- 左 -->
        <div class="rmctc-right-container">
          <!-- 监测点规模 -->
          <dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-1">
            <MonitoringPointScale ref="MonitoringPointScale" @control="control" @Remove="Remove" />
          </dv-border-box-13>
          <!-- 暂降事件 -->
          <dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-2" :reverse="true">
            <DropEvent ref="DropEvent" @control="control" @Remove="Remove" />
            <!-- <Right-Chart-2 /> -->
          </dv-border-box-13>
          <!-- 稳态越线占比 -->
          <dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-1" :reverse="true">
            <SteadyState ref="SteadyState" @control="control" @Remove="Remove" />
          </dv-border-box-13>
        </div>
        <!-- 中 -->
        <div class="right-main-container">
          <!-- 地图片区 -->
          <dv-border-box-1 class="rmc-top-container mapBJ">
            <Map />
          </dv-border-box-1>
          <!-- 表格 -->
          <dv-border-box-7 ref="TableHeight" :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmc-bottom-container">
            <Table :height="heightTable" />
          </dv-border-box-7>
        </div>
        <!-- 右 -->
        <div class="rmctc-right-container">
          <!-- 用户规模 -->
          <dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-1">
            <UserScale v-if="isChina" />
            <tHDistortion v-else />
          </dv-border-box-13>
          <!-- 数据规模 -->
          <!-- <dv-border-box-13
            :color="['rgb(7 216 253)', 'rgb(7 216 253)']"
            class="rmctc-chart-2"
            :reverse="true"
          >
            <DataSize />
          </dv-border-box-13> -->
          <dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-2" :reverse="true">
            <PowerLoad />
          </dv-border-box-13>
          <!-- 数据中心 -->
          <dv-border-box-13 :color="['rgb(7 216 253)', 'rgb(7 216 253)']" class="rmctc-chart-1" :reverse="true">
            <DataCenter v-if="isChina" />
            <datashuju v-else />
          </dv-border-box-13>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import { getRunTime } from "@/api/center/DropEvent.js";
import MonitoringPointScale from "./components/MonitoringPointScale";
import DropEvent from "./components/DropEvent";
import SteadyState from "./components/SteadyState";
import Map from "./components/Map";
import Table from "./components/Table";
import UserScale from "./components/UserScale";
// import DataSize from "./components/DataSize";
import DataCenter from "./components/DataCenter";
import PowerLoad from "./components/PowerLoad";
import tHDistortion from "./components/tHDistortion";
import datashuju from "./components/datashuju";
export default {
  components: {
    MonitoringPointScale,
    DropEvent,
    SteadyState,
    Map,
    Table,
    UserScale,
    // DataSize,
    DataCenter,
    PowerLoad,
    tHDistortion,
    datashuju,
  },
  data() {
    return {
      vh: undefined,
      nowTime: "",
      dqsj: "",
      tjsj: this.getCurrentMonthFirst() + "--" + this.getNowFormatDate(),
      yxsj: this.day2 - this.day1 + 1,
      heightTable: 0,
      day1: "",
      day2: "",
      isChina: true,
      title: "南京灿能监控数据中心",
      isFullscreenBool: true,
      fullscreen: false,
      sun: 0,
    };
  },
  created() {
    const info = JSON.parse(localStorage.getItem("adminInfo"));
    if (info.areaId !== "0") {
      this.isChina = false;
      this.title = info.areaName + "电能质量监控大屏";
    }
  },
  mounted() {
    this.vh =
      (window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight) -
      80 +
      "px";
    let _this = this;
    window.addEventListener("fullscreenchange", (event) => {
      if (document.fullscreenElement) {
        // console.log("变大了");
      } else {
        // console.log("变小了");
        _this.fullscreen = false;
        _this.sun++;
        // this.handleFullScreen()
      }
    });

    window.addEventListener("keydown", (e) => {
      // 阻止F11键默认事件，用HTML5全屏API代替
      e = e || window.event;
      if (e.keyCode === 122) {
        this.handleFullScreen();
        e.preventDefault();
      }
    });

    setTimeout(() => {
      this.heightTable = this.$refs.TableHeight.height;
    }, 0);
    setInterval(() => {
      this.fullscreen = false;
      this.GetTheCurrentTime();
    }, 1000);

    this.time();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onresize);
  },
  methods: {
    // 点击事件 分控
    control(e) {
      // 片区
      if (e.val == 1) {
        if (e.name == "MonitoringPointScale") {
          this.$refs.DropEvent.tab1(0);
          this.$refs.SteadyState.tab1(0);
        } else if (e.name == "DropEvent") {
          this.$refs.MonitoringPointScale.tab1(0);
          this.$refs.SteadyState.tab1(0);
        } else if (e.name == "SteadyState") {
          this.$refs.DropEvent.tab1(0);
          this.$refs.MonitoringPointScale.tab1(0);
        }
      } else if (e.val == 2) {
        if (e.name == "MonitoringPointScale") {
          this.$refs.DropEvent.tab2(0);
          this.$refs.SteadyState.tab2(0);
        } else if (e.name == "DropEvent") {
          this.$refs.MonitoringPointScale.tab2(0);
          this.$refs.SteadyState.tab2(0);
        } else if (e.name == "SteadyState") {
          this.$refs.DropEvent.tab2(0);
          this.$refs.MonitoringPointScale.tab2(0);
        }
      } else if (e.val == 3) {
        this.$refs.MonitoringPointScale.tab2(0);
        this.$refs.SteadyState.tab2(0);
      }
    },
    time() {
      getRunTime().then((res) => {
        this.yxsj = res.data.days;
      });
    },
    // 鼠标移出事件
    Remove(e) {
      this.$refs.SteadyState.info();
      this.$refs.DropEvent.info();
      this.$refs.MonitoringPointScale.info();
    },
    //获取当前时间
    GetTheCurrentTime() {
      var date = new Date();
      var seperator1 = "-";
      var seperator2 = ":";
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      if (month < 10) {
        month = "0" + month;
      }
      if (strDate < 10) {
        strDate = "0" + strDate;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      var currentdate =
        date.getFullYear() +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        hours +
        seperator2 +
        minutes +
        seperator2 +
        seconds;
      this.dqsj = currentdate;
    },
    //获取当月第一天日期
    getCurrentMonthFirst() {
      var date = new Date();
      var year = date.getFullYear();
      date.setDate(1);
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      this.day1 = day;
      // console.log(this.day1);
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }

      return year + "-" + month + "-" + day;
    },
    //获取当天日期
    getNowFormatDate() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      this.day2 = day;
      // console.log(this.day2);
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }

      return year + "-" + month + "-" + day;
    },

    handleFullScreen() {
      console.log(1);
      let element = document.documentElement;
      // 判断是否已经是全屏
      // 如果是全屏，退出
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        this.fullscreen = false;
      } else {
        // 否则，进入全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
        this.fullscreen = true;
        // console.log("已全屏！");
      }
      this.sun++;
      // 改变当前全屏状态
      // this.fullscreen = !this.fullscreen;
    },

    //进入菜单内容页
  },
};
</script>

<style lang="less" scoped>
::v-deep.dpjcksss.el-dialog .el-dialog__body {
  max-height: 70vh;
  padding: 0px !important;
  overflow-y: auto;
}

// @import url("../center/css/commonStyle.less");
// @import url("../center/css/themeMixin.less");
@import url("./css/home.less");

// @import url("../center/css/change.less");
@font-face {
  font-family: sszh;
  src: url("./fonts/sszh.ttf");
  /* IE9+ */
}

#data-view {
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #030409;

  #dv-full-screen-container {
    display: flex;
    // background-image: linear-gradient(
    //   rgb(57, 86, 102,0.8),
    //   rgb(57, 86, 102,0.9),
    //   // rgb(41, 62, 76)
    // );
    // background-repeat: no-repeat;
    // background-size: 100% auto;
    background: url("../center/images/BJ1.png") no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    flex-direction: column;
  }

  .main-header {
    height: 80px;

    .yxsj {
      // width: 165px;
      font-family: electricFont;
      font-size: 1.2rem;
      color: #03fa2c;

      .p1 {
        font-size: 1.5rem;
        color: rgb(1, 238, 255);
      }
    }

    .dqsj {
      width: 50%;
      font-family: electricFont;
      font-size: 1.2rem;
      color: #06e0fa;

      .p2 {
        font-size: 1.5rem;
        color: rgb(1, 238, 255);
      }
    }

    .tjsj {
      // width:56%;
      font-family: electricFont;
      font-size: 1.2rem;
      color: #06e0fa;

      .p3 {
        font-size: 1.5rem;
        color: rgb(1, 238, 255);
      }
    }

    .bt {
      // position: absolute;
      // left: 38.3%;
      margin-top: 10px;
      font-size: 2.2rem;
      color: #fff;
      text-align: center;
    }

    .index-head {
      // margin-top: 30px;
      z-index: 2000 !important;
      width: 100%;
      height: 80px !important;
      // background-image: url("../center/images/header.png");
      background: url("../center/images/header.png") no-repeat;
      // background-attachment: fixed;
      background-position: 0 25px;
      background-size: 100% 100%;
      // background-size: contain;
      // transform: translate(-15%, -50%);

      // width: 400px;
      //         height: 300px;
      //         border-bottom: 15px solid rgb(249, 244, 245);
      //         /* 边框图片路径 */
      //         border-image-source: url(../center/images/header.png);
      //         /* 第一种写法上右下左值不同的时候  */
      //         /* border-image-slice: 170 10 45 80; */
      //         /* 第二种写法上右下左值都相同的时候  */
      //         border-image-slice: 200;
      //         /* 图片边框的宽度（需要加单位） */
      //         border-image-width: 30px;
      //         /* 图像边框是否平铺（repeat）、铺满（round）或拉伸（stretch） */
      //         border-image-repeat: stretch;

      .menu-index {
        position: absolute;
        //right: 0;
        top: 10px;
        left: 95%;
        width: 30px;
        height: 30px;

        color: aliceblue;
        text-align: center;
        cursor: pointer;
        background: #527f74;
      }

      .el-icon-s-home {
        font-size: 26px;
        color: #00bf8f;
      }
    }
  }

  .main-container {
    display: flex;
    // height: calc(~"100% - 80px");
    padding: 10px;
    box-sizing: border-box;
  }

  .right-main-container {
    width: 50% !important;
    padding: 0 0.5% !important;
    box-sizing: border-box;
  }

  .rmc-top-container {
    display: flex;
    height: 66.2% !important;
  }

  .mapBJ {
    // background: url("../center/images/BJ.png") no-repeat;
    // background-attachment: fixed;
    background-position: center;
    background-size: 98% 98%;
    width: 100%;
  }

  .rmc-bottom-container {
    height: 97%/3 !important;
    margin-top: 1% !important;
    border: 0 solid rgb(7 216 253) !important;
    box-shadow: #279cb1 0 0 5px inset !important;
  }

  .rmctc-right-container {
    width: 27% !important;
  }

  .rmctc-chart-1,
  .rmctc-chart-2 {
    height: 32.444% !important;

    border: 0 solid rgb(7 216 253) !important;
    box-shadow: #279cb1 0 0 1px inset !important;
  }

  .rmctc-chart-2 {
    margin: 2% 0 !important;
  }
}

.dv-border-box-13,
.dv-border-box-7 {
  position: relative;
  width: 100%;
  height: 32.4%;
  padding: 15px 10px 10px 10px;
}

.elRow {
  position: relative;
  top: -10px;
}

.elCol {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
</style>
