<!-- 环境看板- 主体-统计内容 -->
<script name="electricityTrend" lang="ts" setup>
import debounce from 'lodash/throttle'
import deviceType from './deviceType.vue'
import deviceOnline from './deviceOnline.vue'
import { getAlarmToday, getDeviceList } from '@/api/dataManagement/environmentBoard'
const $props = defineProps({
  // 实验室
  lab: {
    type: String,
    default: '',
  },
})
const loading = ref(true)
// 设备总数
const deviceAll = ref(0)
// 离线设备
const deviceOff = ref(0)
// 报警总数
const alarmAll = ref(0)
// 消警数
const alarmCancel = ref(0)

// 获取数据
const fetchData = debounce(async () => {
  if (!$props.lab) {
    return
  }
  loading.value = true
  try {
    // 获取设备
    const res1 = await getDeviceList({ labName: $props.lab })
    deviceAll.value = res1.data.rows.length
    deviceOff.value = res1.data.rows.filter((item: any) => item.deviceStatus === 0).length
    // 获取报警
    const res2 = await getAlarmToday({ labName: $props.lab })
    alarmAll.value = res2.data.alarmTotal
    alarmCancel.value = res2.data.canceledCount
    loading.value = false
  }
  catch (_) {
    loading.value = false
  }
}, 1000)

watch(() => $props, (newVal) => {
  if (newVal.lab) {
    fetchData()
  }
}, {
  deep: true,
})
</script>

<template>
  <div class="board-item">
    <div v-loading="loading" class="board-header">
      <div class="header-item">
        <div class="header-icon">
          <svg-icon name="icon-env-device-online" class="icon-button-icon" />
        </div>
        <div class="header-content">
          <div class="content-title">
            设备总数
          </div>
          <div class="content-count">
            {{ deviceAll }}
          </div>
        </div>
      </div>
      <div class="header-item">
        <div class="header-icon">
          <svg-icon name="icon-env-device-off" class="icon-button-icon" />
        </div>
        <div class="header-content">
          <div class="content-title">
            离线设备总量
          </div>
          <div class="content-count">
            {{ deviceOff }}
          </div>
        </div>
      </div>
      <div class="header-item">
        <div class="header-icon">
          <svg-icon name="icon-env-alarm-count" class="icon-button-icon" />
        </div>
        <div class="header-content">
          <div class="content-title">
            今日告警数
          </div>
          <div class="content-count">
            {{ alarmAll }}
          </div>
        </div>
      </div>
      <div class="header-item">
        <div class="header-icon">
          <svg-icon name="icon-env-alarm-cancel" class="icon-button-icon" />
        </div>
        <div class="header-content">
          <div class="content-title">
            今日消警数
          </div>
          <div class="content-count">
            {{ alarmCancel }}
          </div>
        </div>
      </div>
    </div>
    <div class="board-content">
      <!-- 设备类型分析 -->
      <device-type class="content-item" :lab="$props.lab" />
      <!-- 设备在线状态分析 -->
      <device-online class="content-item" :lab="$props.lab" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.board-item {
  margin: 5px 0;
  padding: 2px 10px;
  border: 2px solid #cedaf6;
  box-sizing: content-box;
  border-radius: 6px;

  .board-header {
    height: 75px;
    display: flex;

    .header-item {
      width: 25%;
      height: 75px;
      display: flex;
      padding: 0 10px;

      .header-icon {
        width: 40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .header-content {
        width: 60%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .content-title {
          font-weight: 700;
        }

        .content-count {
          font-weight: 700;
          font-size: 24px;
          color: #1aaf8b;
        }
      }
    }
  }

  .board-content {
    height: 350px;
    display: flex;
    justify-content: space-between;

    .content-item {
      // height: 340px;
      width: 49%;
    }
  }
}

.icon-button-icon {
  width: 50px;
  height: 50px;
}
</style>