<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/wellStaticsByDept')" :span="14">
        <el-card shadow="never">
          <well-count-by-dept />
        </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-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="14">
        <el-card shadow="never">
          <device-count-by-type-bar chart-title="设备数量统计" />
        </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>
      <!--道路设备数量情况统计-->
      <el-col v-if="hasPerm('/statics/deviceStaticsByRoad')" :span="10">
        <el-card shadow="never">
          <device-count-by-road />
        </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 DeviceCountByOnline from './components/DeviceCountByOnline'
import AlarmByDays from './components/AlarmByDays'
import JobByStatus from './components/JobByStatus'
import DeviceCountByTypeBar from '@/views/staticCharts/DeviceCountByTypeBar'
import WellCountByDept from '@/views/dashboard/components/WellCountByDept'
import DeviceCountByRoad from '@/views/dashboard/components/DeviceCountByRoad'

export default {
  name: 'Dashboard',
  components: {
    DeviceCountByRoad,
    WellCountByDept,
    DeviceCountByTypeBar,
    JobByStatus,
    AlarmByDays,
    PanelGroup,
    WellCountByBfzt,
    WellCountByType,
    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() {
    if (this.baseConfig.refreshType === 'websocket') {
      this.webSocket()
    }
  },
  methods: {
    webSocket() {
      this.$store.dispatch('initWebSocket')
    }
  }
}
</script>

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