<template>
  <!-- 首页 -->
  <div class="dashboard">
    <el-row :gutter="7.5">
      <el-col :lg="18">
        <el-col :lg="16" class="mb">
          <el-col :lg="24">
            <salesData ref='salesData' :height="height1" :nowDate="nowDate"/>
          </el-col>
        </el-col>
        <el-col :lg="8" class="mb">
          <totalTasks ref="totalTasks" :height="height1" :nowDate="nowDate"/>
        </el-col>
        <el-col :lg="16" class="mb">
          <mediaData ref="mediaData" :height='height3' />
        </el-col>
        <el-col :lg="8" class="mb">
          <personalRanking ref="personalRanking" :height="height3" />
        </el-col>
        <el-col :lg="8" class="mb">
          <workCenter ref="workCenter" :height='height4' />
        </el-col>
        <el-col :lg="16" class="mb">
          <traffic ref="traffic" :height="height4" />
        </el-col>
      </el-col>
      <el-col :lg="6" class="mb" >
        <leftContent ref="leftContent" :height="height2" :nowDate="nowDate"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import salesData from './components/salesData'
import totalTasks from './components/totalTasks'
import leftContent from './components/leftContent'
import mediaData from './components/mediaData'
import personalRanking from './components/personalRanking'
import workCenter from './components/workCenter'
import traffic from './components/traffic'
export default {
  name: 'Dashboard',
  components: {
    salesData,
    totalTasks,
    leftContent,
    personalRanking,
    workCenter,
    traffic,
    mediaData,
  },
  data() {
    return {
      height1:'150px',
      height2: '1000px',
      height3: '350px',
      height4: '470px',
      homeTimer: null, // 定时器
      isStartTimer: false, // 定会器是否开启
      nowDate: "",    // 当前日期
      nowTime: "",    // 当前时间
    }
  },
  computed: {
    ...mapGetters(['username', 'seatflag', 'extension'])
  },
  created() {
    // this.refreshDatas(process.env.homeRefreshInterval) // 刷新 首页数据
    // this.refreshDatas(Number(this.$store.getters.serverConfig.homeRefreshInterval)) // 刷新 首页数据
    this.isStartTimer = true
    this.getDate()
  },
  beforeDestroy() {
    clearInterval(this.homeTimer) // 停止刷新数据
    this.isStartTimer = false
     if (this.getDate) {
          console.log("销毁定时器")
          clearInterval(this.getDate); // 在Vue实例销毁前，清除时间定时器
      }
  },
  methods: {
    currentTime() {
            setInterval(this.getDate, 600000);
        },
        getDate: function() {
            var _this = this;
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth() + 1;
            let dd = new Date().getDate();
            let hh = new Date().getHours();
            let mf =
                new Date().getMinutes() < 10
                    ? "0" + new Date().getMinutes()
                    : new Date().getMinutes();
            let ss =
                new Date().getSeconds() < 10
                    ? "0" + new Date().getSeconds()
                    : new Date().getSeconds();
            mm = mm < 10 ? "0" + mm : mm;
            dd = dd < 10 ? "0" + dd : dd;
            hh = hh < 10 ? "0" + hh : hh;
            _this.nowTime = hh + ":" + mf+':'+ss;
            _this.nowDate = yy + "-" + mm + "-" + dd;
        }
  },
  mounted() {
     this.currentTime();
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.dashboard {
  padding: 15px 10px;
  background-color: #eaedf1;
  .mb {
    margin-bottom: 6px;
  }
}
@media only screen and (min-width: 992px) {
}
</style>
