<template>
  <Block title="告警总数">
    <template v-slot:main>
      <div class="device-waring-container">
        <el-row type="flex" style="height: 50%">
          <el-col class="flex-col" :span="12">
            <div class="index-content">
              <div class="index-icon index-emergent"></div>
              <div class="index-info">
                <div class="index-label">
                  <dict-tag :options="dict.type.alarm_type" value="3"></dict-tag>
                </div>
                <div class="index">
                  <span class="index-num">{{ alarmIndex['3'] || 0 }}</span>
                  次
                </div>
              </div>
            </div>
          </el-col>
          <el-col class="flex-col" :span="12">
            <div class="index-content">
              <div class="index-icon index-important"></div>
              <div class="index-info">
                <div class="index-label">
                  <dict-tag :options="dict.type.alarm_type" value="2"></dict-tag>
                </div>
                <div class="index">
                  <span class="index-num">{{ alarmIndex['2'] || 0 }}</span>
                  次
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" style="height: 50%">
          <el-col class="flex-col" :span="12">
            <div class="index-content">
              <div class="index-icon index-minor"></div>
              <div class="index-info">
                <div class="index-label">
                  <dict-tag :options="dict.type.alarm_type" value="1"></dict-tag>
                </div>
                <div class="index">
                  <span class="index-num">{{ alarmIndex['1'] || 0 }}</span>
                  次
                </div>
              </div>
            </div>
          </el-col>
          <el-col class="flex-col" :span="12">
            <div class="index-content">
              <div class="index-icon index-warning"></div>
              <div class="index-info">
                <div class="index-label">
                  <dict-tag :options="dict.type.alarm_type" value="5"></dict-tag>
                </div>
                <div class="index">
                  <span class="index-num">{{ alarmIndex['5'] || 0 }}</span>
                  次
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </template>
  </Block>
</template>

<script>
import { fetchAlarmIndex } from '@/api/alarm/alarm-info';
import { ApiCode } from '@/api/apiEmums';
import Block from '@/components/Block/block.vue';
import { mapGetters } from 'vuex';

export default {
  components: { Block },
  name: 'DeviceWaring',
  dicts: ['alarm_type'],
  data() {
    return {
      alarmIndex: {},
    };
  },
  computed: {
    // 监听选中的区域，以更新数据
    selectedServiceArea() {
      return this.$store.state.userState.selectedServiceArea;
    },
    ...mapGetters('userState', ['getSelectedArea']),
  },
  watch: {
    selectedServiceArea(val) {
      this.initData();
    },
  },
  mounted() {
    this.initData();
  },
  created() {
  },
  methods: {
    async initData() {
      if (!this.selectedServiceArea) {
        return;
      }
      const {
        code,
        data,
      } = await fetchAlarmIndex({
        areaCode: this.selectedServiceArea.val,
      });
      let result = {};
      if (ApiCode.SUCCESS === code && data && data.length > 0) {
        data.forEach(item => {
          result[item.alarmType] = item.cnt;
        });
      }
      this.alarmIndex = result;
    },
  },
};
</script>
<style src="./index.scss" lang="scss" />
