<template>
  <div class="dashboard-container" style="background-color: white">
    <panel-group ref="panelgroup"/>
    <el-row>
      <el-col :span="12">
        <el-card shadow="never">
          <water-count-by-dept-bar/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never">
          <water-count-by-day/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never">
          <water-count-by-area-bar/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never">
          <water-count-by-depy/>
        </el-card>
      </el-col>
      <!--水表报警次数统计-->
      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
        <el-card shadow="never">
          <watch-alarm-bar/>
        </el-card>
      </el-col>
      <!--报警次数统计-->
      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
        <el-card shadow="never">
          <alarm-by-days/>
        </el-card>
      </el-col>
      <!--设备在线数量统计-->
      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
        <el-card shadow="never">
          <device-count-by-online/>
        </el-card>
      </el-col>

      <!--设备数量统计-->
      <el-col v-if="hasPerm('/statics/deviceStaticsByType')" :span="12">
        <el-card shadow="never">
          <device-count/>
        </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'
import WaterCountByDepy from './components/waterCountByDept'
import WaterCountByDeptBar from './components/waterCountByDeptBar'
import WaterCountByDay from './components/waterCountByDay'
import WaterCountByAreaBar from "./components/waterCountByAreaBar";
import WatchAlarmBar from "./components/watchAlarmBar";

export default {
  name: 'Dashboard',
  components: {
    WatchAlarmBar,
    WaterCountByAreaBar,
    WaterCountByDay,
    WaterCountByDeptBar,
    WaterCountByDepy,
    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 {
    padding: 10px 20px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>