<template>
  <div class="dashboard-container">
    <panel-group ref="panelgroup"/>
    <el-row>
      <!--井盖布防撤防统计-->
      <el-col v-if="hasPerm('/well/countByBfzt')" :span="10">
        <el-card shadow="never">
          <well-count-by-bfzt/>
        </el-card>
      </el-col>
      <!--井类型统计-->
      <el-col v-if="hasPerm('/statics/wellStaticsByType')" :span="14">
        <el-card shadow="never">
          <well-count-by-type/>
        </el-card>
      </el-col>
      <!--设备数量统计-->
      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="14">
        <el-card shadow="never">
          <device-count/>
        </el-card>
      </el-col>
      <!--设备在线情况统计-->
      <el-col v-if="hasPerm('/statics/deviceStaticsByStatus')" :span="10">
        <el-card shadow="never">
          <device-count-by-online/>
        </el-card>
      </el-col>
      <!--7日报警次数统计-->
      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="10">
        <el-card shadow="never">
          <alarm-by-days/>
        </el-card>
      </el-col>
      <!--工单数量统计-->
      <el-col v-if="hasPerm('/statics/jobsByDept')" :span="14">
        <el-card shadow="never">
          <job-by-status/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PanelGroup from './components/PanelGroup'
import WellCountByBfzt from './components/WellCountByBfzt'
import WellCountByType from './components/WellCountByType'
import DeviceCount from './components/DeviceCount'
import DeviceCountByOnline from './components/DeviceCountByOnline'
import AlarmByDays from './components/AlarmByDays'
import JobByStatus from './components/JobByStatus'

export default {
  name: 'Dashboard',
  components: {
    JobByStatus,
    AlarmByDays,
    PanelGroup,
    WellCountByBfzt,
    WellCountByType,
    DeviceCount,
    DeviceCountByOnline
  },
  computed: {
    ...mapGetters([
      'name',
      'roleNames',
      'roleTips',
      'wellTypes',
      'deviceTypes',
      'communications',
      'area'
    ])
  },
  mutations: {
    SET_WEBSOCKET: (state, websocket) => {
      state.websocket = websocket
    },
    SET_WS_STATUS: (state, wsStatus) => {
      state.wsStatus = wsStatus
    },
    SET_NEED_REFRESH: (state, needRefresh) => {
      state.needRefresh = needRefresh
    }
  },
  watch: {
    needRefresh(val) {
      // 需要刷新
      if (val) {
        console.log('refresh dashboard')
        debugger
        this.$refs.panelgroup.refresh()
      }
    }
  },
  mounted() {
    // this.webSocket()
  },
  methods: {
    webSocket() {
      this.$store.dispatch('initWebSocket')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>