<template>
  <div class="dashboard-container" style="background-color: white">
    <panel-group ref="panelgroup"/>
    <el-row>
      <!-- 用气统计图 -->
      <el-col :span="18">
        <el-card shadow="never">
          <gas-count-by-area-bar @change="changeWaterQuery"/>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <gas-note />
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <!-- 分区用气占比图 -->
      <el-col :span="12">
        <el-card shadow="never">
          <gas-count-by-dept :query="listQuery1" />
        </el-card>
      </el-col>
      <!-- 用气走势图 -->
      <el-col :span="12">
        <el-card shadow="never">
          <gas-count-by-day :query="listQuery1" />
        </el-card>
      </el-col>
      <!--设备在线数量统计-->
      <el-col :span="12">
        <el-card shadow="never">
          <gas-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-col :span="12">
        <el-card shadow="never">
          <watch-gas-alarm-bar @change="changeAlarmGasQuery"/>
        </el-card>
      </el-col>
      <!--报警饼图统计-->
      <el-col :span="12">
        <el-card shadow="never">
          <alarm-gas-count-by-dept :query="listQuery3"/>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <!-- 腐蚀速率走势图 -->
      <el-col>
        <el-card shadow="never">
          <corrode-count-by-day :query="listQuery1" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import PanelGroup from './components/PanelGroup'
import DeviceCount from './components/DeviceCount'
import gasCountByDept from './components/gasCountByDept'
import gasCountByDay from './components/gasCountByDay'
import gasCountByAreaBar from './components/gasCountByAreaBar'
import WatchAlarmBar from './components/watchAlarmBar'
import gasNote from './components/gasNote'
import AlarmCountByDept from './components/AlarmCountByDept'
import gasCompare from './components/gasCompare'
import watchGasAlarmBar from './components/watchGasAlarmBar'
import alarmGasCountByDept from './components/alarmGasCountByDept'
import corrodeCountByDay from './components/corrodeCountByDay'

export default {
  name: 'Dashboard',
  components: {
    gasCountByAreaBar,
    gasCountByDept,
    gasCountByDay,
    gasNote,
    PanelGroup,
    gasCompare,
    DeviceCount,
    WatchAlarmBar,
    AlarmCountByDept,
    watchGasAlarmBar,
    alarmGasCountByDept,
    corrodeCountByDay
  },
  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')
      }, // 分区报警查询条件
      listQuery3: {
        areaId: '110000',
        startTime: new Date().Format('yyyy-MM-dd'),
        endTime: new Date().Format('yyyy-MM-dd')
      } // 分区报警查询条件
    }
  },
  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')
        this.$refs.panelgroup.refresh()
      }
    }
  },
  mounted() {
    // this.webSocket()
  },
  methods: {
    webSocket() {
      this.$store.dispatch('initWebSocket')
    },
    // 切换分区查询条件
    changeWaterQuery(listQuery1) {
      this.listQuery1 = listQuery1
    },
    // 切换报警查询条件
    changeAlarmQuery(listQuery2) {
      this.listQuery2 = listQuery2
    },
    // 切换报警查询条件
    changeAlarmGasQuery(listQuery3) {
      this.listQuery3 = listQuery3
    }
  }
}
</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>