<template>
  <!-- 首页 -->
  <div class="dashboard">
    <el-row :gutter="7.5">
      <el-col :lg="18" class="mb">
        <!-- 数据统计 -->
        <el-col :lg="24" class="mb">
          <!-- <dataStatistics ref="dataStatic" :height="height1"/> -->
        </el-col>
        <!-- 工单数据分析 -->
        <el-col :lg="8" class="mb">
          <!-- <pieChart ref="pieChart" :height="height2"/> -->
        </el-col>
        <!-- 工单类型分析 -->
        <el-col :lg="8" class="mb">
          <!-- <circularChart ref="circularChart" :height="height2"/> -->
        </el-col>
        <!-- 通话数据分析 -->
        <el-col :lg="8" class="mb">
          <!-- <sectorChart :height="height2"/> -->
        </el-col>
        <!-- 在线数据 -->
        <el-col :lg="24" class="mb">
          <!-- <lineChart ref="lineChart" :height="height3"/> -->
        </el-col>
      </el-col>
      <el-col :lg="6" class="mb">
        <!-- 全部公告 -->
        <el-col :lg="24" class="mb">
          <!-- <allNotice :height="height1"/> -->
        </el-col>
        <!-- app -->
        <el-col :lg="24" class="mb">
          <!-- <appAds/> -->
        </el-col>
        <!-- 话务 工单 排行榜 -->
        <el-col :lg="24" class="mb">
          <!-- <ranking ref="ranking"/> -->
        </el-col>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import dataStatistics from './components/dataStatistics'
import pieChart from './components/pieChart'
import circularChart from './components/circularChart'
import sectorChart from './components/sectorChart'
import lineChart from './components/lineChart'
import allNotice from './components/allNotice'
import ranking from './components/ranking'
import appAds from './components/appAds'

export default {
  name: 'Dashboard',
  components: {
    dataStatistics,
    pieChart,
    circularChart,
    sectorChart,
    // lineChart,
    allNotice,
    ranking,
    appAds
  },
  data() {
    return {
      height1: '170px',
      height2: '300px',
      height3: '350px',
      homeTimer: null, // 定时器
      isStartTimer: false // 定会器是否开启
    }
  },
  computed: {
    ...mapGetters(['username', 'seatflag', 'extension'])
  },
  created() {
    // this.refreshDatas(process.env.homeRefreshInterval) // 刷新 首页数据
    // this.refreshDatas(Number(this.$store.getters.serverConfig.homeRefreshInterval)) // 刷新 首页数据
    this.isStartTimer = true
  },
  beforeDestroy() {
    clearInterval(this.homeTimer) // 停止刷新数据
    this.isStartTimer = false
  },
  methods: {
    /**
     * 刷新 数据
     * @mTime 刷新间隔
     * */
    refreshDatas(mTime) {
      const _self = this
      const objTime = {
        init: 0,
        time: function() {
          objTime.init += 1000
          // 当页面没有click、keydown、mousewheel 时；每间隔  mTime 刷新数据；
          if (objTime.init === mTime) {
            // console.count();
            _self.$refs.dataStatic.getDatas()
            _self.$refs.pieChart.getDatas(
              Number(_self.$refs.pieChart.search_date)
            )
            _self.$refs.circularChart.getDatas(
              Number(_self.$refs.circularChart.search_date)
            )
            _self.$refs.lineChart.getDatas(
              Number(_self.$refs.lineChart.search_date)
            )
            _self.$refs.ranking.refreshData(_self.$refs.ranking.activeName)

            objTime.init = 0
          }
        },
        eventFun: function() {
          clearInterval(_self.homeTimer)
          objTime.init = 0
          if (_self.isStartTimer) {
            _self.homeTimer = setInterval(objTime.time, 1000)
          }
        }
      }
      this.homeTimer = setInterval(objTime.time, 1000)
      const body = document.querySelector('html')
      body.addEventListener('click', objTime.eventFun)
      body.addEventListener('keydown', objTime.eventFun)
      body.addEventListener('mousewheel', objTime.eventFun)
    
    
    }
  
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  padding: 15px 10px;
  .mb {
    margin-bottom: 6px;
  }
}

@media only screen and (min-width: 992px) {
}
</style>
