<!--
  Description: 报警统计-总体报警
  Author: 李亚光
  Date: 2023-07-08
 -->
<script lang="ts" setup name="AlarmCount">
import layout from './layout.vue'
import { getOverallAlarm } from '@/api/home/alarm/count'
const alarmData = ref<any[]>([
  {
    name: '正在报警',
    value: '0',
    unit: '个',
    type: '1',
  },
  {
    name: '今日报警',
    value: '0',
    unit: '个',
    type: '2',
  },
  {
    name: '本周报警',
    value: '0',
    unit: '个',
    type: '3',
  },
  {
    name: '本月报警',
    value: '0',
    unit: '个',
    type: '4',
  },
  {
    name: '全年报警',
    value: '0',
    unit: '个',
    type: '5',
  },
])
const loading = ref(true)
const fetchData = () => {
  loading.value = true
  getOverallAlarm().then((res) => {
    const data = res.data
    data.forEach((item: any) => {
      const cindex = alarmData.value.findIndex((citem: any) => citem.type === item.type)
      if (cindex !== -1) {
        alarmData.value[cindex].value = item.sum
      }
    })
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}
onMounted(() => {
  fetchData()
})
</script>

<template>
  <layout title="报警总体情况">
    <template #content>
      <div v-loading="loading" class="alarm-container">
        <div v-for="item in alarmData" :key="item.name" class="alarm-item">
          <div class="top">
            {{ item.name }}
          </div>
          <div class="bottom">
            <span class="value"> {{ item.value }}</span>
            <span class="unit"> {{ item.unit }}</span>
          </div>
        </div>
      </div>
    </template>
  </layout>
</template>

<style lang="scss" scoped>
.alarm-container {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;

  .alarm-item {
    border: 2px solid #ccc;
    border-left: 4px solid #f24d4d;
    width: 18%;
    padding: 10px;
    padding-top: 15px;
    padding-bottom: 15px;

    .top {
      padding-left: 10px;
      font-size: 22px;
      font-weight: 700;
    }

    .bottom {
      text-align: center;

      .value {
        font-size: 22px;
        font-weight: 700;
      }

      .unit {
        font-size: 20px;
      }
    }
  }
}
</style>