<!-- 消息组件 -->
<script setup lang="ts" name="MessageScrolling">
import { ref } from 'vue'
import { getOverviewAlarmDetail } from '@/api/laboratory/overView'
const form = ref({
  confirmedCount: 0, // 已确认报警数量
  unconfirmedCount: 0, // 未确认报警数量
  alarmTotal: 0, // 报警总数
  canceledCount: 0, // 已消警数量
  currentAlarmCount: 0, // 当前报警数量
})
const fetchData = () => {
  getOverviewAlarmDetail().then((res) => {
    form.value.confirmedCount = res.data.confirmedCount// 已确认报警数量
    form.value.unconfirmedCount = res.data.unconfirmedCount// 未确认报警数量
    form.value.alarmTotal = res.data.alarmTotal// 报警总数
    form.value.canceledCount = res.data.canceledCount// 已消警数量
    form.value.currentAlarmCount = res.data.confirmedCount + res.data.unconfirmedCount // 当前报警数 =已确认 + 未确认
  })
}
onMounted(() => {
  fetchData()
})
onBeforeUnmount(() => {
})
</script>

<template>
  <!-- 我这个需求是有消息时才会让这个功能显示，所以使用了v-if -->
  <div class="bs-sysMsg">
    <div>
      <el-icon style="margin-right: 10px;">
        <svg-icon name="icon-radio" />
      </el-icon>
      <span style="color: #444c59;margin-left: 20px;">报警总数<span style="margin-left: 16px;color: red;font-weight: 600;">{{ form.alarmTotal }}</span></span>
      <!-- 未确认  -->
      <el-button size="small" type="primary" style="margin-left: 32px;padding: 0 20px;background-color: #ec808d;border: none;">
        {{ form.confirmedCount }}
      </el-button>
      <!-- 已确认  -->
      <el-button size="small" type="success" style="margin-left: 32px;padding: 0 20px;">
        {{ form.confirmedCount }}
      </el-button>
      <!-- 已消警  -->
      <el-button size="small" type="success" style="margin-left: 32px;padding: 0 20px;background-color: #d9001b;border: none;">
        {{ form.canceledCount }}
      </el-button>
    </div>
    <!-- 当前报警  -->
    <div style="padding-right: 60px;">
      <el-badge :value="form.currentAlarmCount" class="item">
        <el-icon style="margin-right: 10px;">
          <svg-icon name="icon-overView-message" />
        </el-icon>
      </el-badge>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bs-sysMsg {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  border-radius: 2px;
  color: #e6a23c;
  background-color: #fdf6ec;
  overflow: hidden;
  opacity: 1;
  align-items: center;
  transition: opacity 0.2s;
}

.carousel-item {
  display: flex;
  // justify-content: center;
  align-items: center;
}

.bs-sysMsg .msg__content {
  display: table-cell;
  padding: 0 8px;
  width: 100%;
}

.bs-sysMsg .msg__content a.item {
  color: #e6a23c;
  font-size: 14px;
  opacity: 0.75;
}
.bs-sysMsg .msg__content a.item:hover { text-decoration: underline; }
</style>