<template>
  <div class="dashboard-container" style="background-color: white">
    <panel-group ref="panelgroup"/>
    <el-row>
      <!-- 用水统计图 -->
      <el-col :span="18">
        <el-card shadow="never">
          <water-count-by-area-bar @change="changeWaterQuery"/>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <water-note/>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <!-- 分区用水占比图 -->
      <el-col :span="12">
        <el-card shadow="never">
          <water-count-by-dept :query="listQuery1" ref="waterCountPie"/>
        </el-card>
      </el-col>
      <!-- 用水走势图 -->
      <el-col :span="12">
        <el-card shadow="never">
          <water-count-by-day :query="listQuery1" ref="waterCountDay"/>
        </el-card>
      </el-col>
      <!--设备在线数量统计-->
      <el-col :span="12">
        <el-card shadow="never">
          <water-compare/>
        </el-card>
      </el-col>
      <!--设备数量统计-->
      <el-col :span="12">
        <el-card shadow="never">
          <device-count/>
        </el-card>
      </el-col>
      <!--水表报警次数统计，柱状图-->
      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
        <el-card shadow="never">
          <watch-alarm-bar @change="changeAlarmQuery"/>
        </el-card>
      </el-col>
      <!--报警饼图统计-->
      <el-col v-if="hasPerm('/statics/alarmsByDay')" :span="12">
        <el-card shadow="never">
          <alarm-count-by-dept :query="listQuery2"/>
        </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 WaterCountByDept from './components/waterCountByDept'
import WaterCountByDeptBar from './components/waterCountByDeptBar'
import WaterCountByDay from './components/waterCountByDay'
import WaterCountByAreaBar from "./components/waterCountByAreaBar";
import WatchAlarmBar from "./components/watchAlarmBar";
import WaterNote from "./components/waterNote";
import AlarmCountByDept from "./components/AlarmCountByDept";
import WaterCompare from "./components/waterCompare";

export default {
  name: 'Dashboard',
  components: {
    WaterCompare,
    AlarmCountByDept,
    WaterNote,
    WatchAlarmBar,
    WaterCountByAreaBar,
    WaterCountByDay,
    WaterCountByDeptBar,
    WaterCountByDept,
    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
    }
  },
  data(){
    return {
      listQuery1:{
        areaId:'110000',
        startTime:new Date().Format('yyyy-MM-dd'),
        endTime:new Date().Format('yyyy-MM-dd')
      },// 分区用水量查询条件
      listQuery2:{
        areaId:'110000',
        startTime:new Date().Format('yyyy-MM-dd'),
        endTime:new Date().Format('yyyy-MM-dd')
      } // 分区报警查询条件
    }
  },
  watch: {
    needRefresh(val) {
      // 需要刷新
      if (val) {
        console.log('refresh dashboard')
        this.$refs.panelgroup.refresh()
      }
    }
  },
  mounted() {
    // this.webSocket()
  },
  methods: {
    webSocket() {
      this.$store.dispatch('initWebSocket')
    },
    // 切换分区查询条件
    changeWaterQuery(listQuery1){
      this.listQuery1 = listQuery1
    },
    // 切换报警查询条件
    changeAlarmQuery(listQuery2){
      this.listQuery2 = listQuery2
    }
  }
}
</script>

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