<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!-- <img src="../../assets/img/fullscreen.png" class="fullscreen" @click="gopath" /> -->
        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box1">
            <div>
              <dv-border-box-12>
                <div class="selectoptions" v-if="userInfo.type==0">
                  <el-select v-model="selectoptionValue" size="mini" class="handle-input mr10" placeholder="请选择数据中心"
                    @change="selectTenantId" >
                    <el-option v-for="item in selectoption" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <centerLeft1 />
              </dv-border-box-12>
            </div>
            <!-- <div>
              <dv-border-box-12>
                <mapcom></mapcom>
              </dv-border-box-12>
            </div> -->
            <!-- 中间 -->
            <div>
              <dv-border-box-12>
                <center1></center1>
              </dv-border-box-12>
            </div>
            <!-- 中间 -->
            <!-- <div>
              <centerRight2 />
            </div> -->
            <div>
              <dv-border-box-13>
                <centerRight1 />
              </dv-border-box-13>
            </div>
          </div>

          <!-- 第四行数据 -->
          <div class="bototm-box">
            <dv-border-box-13 class="left50">
              <bottomLeft />
            </dv-border-box-13>
            <dv-border-box-12 class="left50">
              <bottomRight />
            </dv-border-box-12>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
  import {
    formatTime
  } from '../../utils/index.js'
  import centerLeft1 from "./centerLeft1";
  import centerLeft2 from "./centerLeft2";
  import centerRight1 from "./centerRight1";
  import centerRight2 from "./centerRight2";
  import center1 from "./center";
  import bottomLeft from "./bottomLeft";
  import bottomRight from "./bottomRight";
  import mapcom from "./map";

  export default {
    inject: ['reload'],
    data() {
      return {
        selectoption: [],
        selectoptionValue: '',
        loading: true,
        dateDay: null,
        dateYear: null,
        dateWeek: null,
        weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        userInfo:{type:''}
      };
    },
    components: {
      centerLeft1,
      centerLeft2,
      centerRight1,
      centerRight2,
      center1,
      bottomLeft,
      bottomRight,
      mapcom
    },
    created() {
    },
    mounted() {
      this.userInfo = JSON.parse(localStorage.getItem('info'))
      this.selectoption = JSON.parse(localStorage.getItem('selectoption'))
      this.selectoptionValue = localStorage.getItem('tenantId')
      this.timeFn();
      this.cancelLoading();
    },
    methods: {
      selectTenantId(e) {
        localStorage.setItem('tenantId', e)
        this.reload()
      },
      gopath() {
        this.$router.push("/visualization")
      },
      timeFn() {
        setInterval(() => {
          this.dateDay = formatTime(new Date(), 'HH: mm: ss');
          this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
          this.dateWeek = this.weekday[new Date().getDay()];
        }, 1000)
      },
      cancelLoading() {
        setTimeout(() => {
          this.loading = false;
        }, 500);
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/scss/index.scss';

  .bg {
    z-index: 999;
    position: absolute !important;
    padding-top: 1em !important;
  }

  #index {
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
  }

  #dv-full-screen-container {
    height: auto !important;
    width: calc(100vw - 120px) !important;
    transform: scale(1) !important;
  }

  .fullscreen {
    position: fixed;
    top: 0;
    right: .5rem;
    width: .3rem;
    cursor: pointer;
  }
  .selectoptions{
    position: absolute;
    top: .2rem;
    right: .2rem;
    width: 1.5rem;
  }
  .selectoptions >>> input{
    background: transparent;
        color: #fff;
  }
  /* .left50{width: 10.35rem;} */
</style>
