<template>
    <div id="front">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body bg">
        <div class="d-flex jc-center">
          <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
          <div class="d-flex jc-center">
            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
            <div class="title">
              <span class="title-text">BCC 生产运行总览</span>
              <dv-decoration-6
                class="title-bototm"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
                style="width:3.125rem;height:.1rem;"
              />
            </div>
            <dv-decoration-8
              :reverse="true"
              :color="['#568aea', '#000000']"
              style="width:2.5rem;height:.625rem;"
            />
          </div>
          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex" style="width: 40%">
            <div
              class="react-right ml-4"
              style="width: 3.25rem; text-align: left;background-color: #0f1325;"
              @click="changeDashboard(1)"
            >
              <span class="react-before"></span>
              <span class="text"></span>
            </div>
            <div class="react-right ml-3" style="background-color: #0f1325;" @click="changeDashboard(2)">
              <span class="text colorBlue"></span>
            </div>
            <div class="react-right ml-3" style="background-color: #0f1325;" @click="changeDashboard(3)">
              <span class="text colorBlue"></span>
            </div>
          </div>
          <div style="width: 40%" class="d-flex">
            <div class="react-left bg-color-blue mr-3">
              <span class="text fw-b">北京时间：</span>
            </div>
            <div
              class="react-left mr-4"
              style="width: 6.25rem; background-color: #0f1325; text-align: right;"
            >
              <span class="react-after"></span>
              <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
            </div>
          </div>
        </div>

        <div class="body-box" v-if="dashboard === 1">
          <div class="three-content-box">
            <div>
              <material-balance />
            </div>
            <div>
              <chart-right />
            </div>
          </div>
          <div class="three-bototm-box">
            <dv-border-box-12>
              <nap-tank />
            </dv-border-box-12>
            <dv-border-box-12>
              <ethylene-tank />
            </dv-border-box-12>
            <dv-border-box-12>
              <acrylic-tank />
            </dv-border-box-12>
            <dv-border-box-12>
              <product-tank />
            </dv-border-box-12>
          </div>
        </div>
        </div>

        <div class="body-box" v-if="dashboard === 2">
          <!-- 第三行数据 -->
          <div>
            <front-two />
          </div>
        </div>

        <div class="body-box" v-if="dashboard === 3">
          <!-- 第三行数据 -->
          <div class="frist-content-box">
            <div>
              <dv-border-box-12>
                <center-right2 />
              </dv-border-box-12>
            </div>
            <div>
              <dv-border-box-12>
                <center-left2 />
              </dv-border-box-12>
            </div>
            <!-- 中间 -->
            <div>
              <center-left1 />
            </div>
            <div>
              <dv-border-box-13>
                <center-right1 />
              </dv-border-box-13>
            </div>
          </div>
          <!-- 第四行数据 -->
          <div class="bototm-box">
            <dv-border-box-13>
              <bottom-left />
            </dv-border-box-13>
            <dv-border-box-12>
              <bottom-right />
            </dv-border-box-12>
          </div>
      </div>
  </div>
</template>

<script>
  import centerLeft1 from "./front/centerLeft1";
  import centerLeft2 from "./front/centerLeft2";
  import centerRight1 from "./front/centerRight1";
  import centerRight2 from "./front/centerRight2";
  import center from "./front/center";
  import bottomLeft from "./front/bottomLeft";
  import bottomRight from "./front/bottomRight";
  import frontTwo from "./front/frontTwo";
  import materialBalance from "./front/materialBalance";
  import chartRight from "./front/ChartRight";
  import napTank from "./front/napTank";
  import ethyleneTank from "./front/ethyleneTank";
  import acrylicTank from "./front/acrylicTank";
  import productTank from "./front/productTank";
  import dayjs from "dayjs";
  import '@/common/flexible.js';

  export default {
    data() {
      return {
        loading: true,
        dashboard: 1,
        dateDay: null,
        dateYear: null,
        dateWeek: null,
        weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        timer:null
      };
    },
    components: {
      centerLeft1,
      centerLeft2,
      centerRight1,
      centerRight2,
      center,
      bottomLeft,
      bottomRight,
      frontTwo,
      materialBalance,
      chartRight,
      napTank,
      ethyleneTank,
      acrylicTank,
      productTank
    },
    mounted() {
      this.cancelLoading();
      this.timer = setInterval(()=>{
        const date= dayjs(new Date());
        this.dateDay = date.format('HH:mm:ss');
        this.dateYear = date.format('YYYY年MM月DD日');
        this.dateWeek = date.format(this.weekday[date.day()]);
      },1000);
    },
    beforeDestroy(){
      if(this.timer){
        clearInterval(this.timer);
      }
    },
    methods: {
      cancelLoading() {
        setTimeout(() => {
          this.loading = false;
        }, 500);
      },
      changeDashboard(val) {
        if (val === 1) {
          this.dashboard = 1
        }else if (val === 2) {
          this.dashboard = 2
        }else if (val === 3) {
          this.dashboard = 3
        }
      }
    }
  };
</script>

<style lang="scss" scoped>

</style>
