<!-- 关注对象 -->
<script lang="ts" setup name="FocusObject">
import type { Ref } from 'vue'
import { getAlarmInfo, getConfig } from '@/api/bs'
const loading = ref(false)
const list = ref ([]) as any
const fetchData = () => {
  loading.value = true
  getConfig().then((res) => {
    if (res.data) {
      const configData = JSON.parse(res.data)
      if (configData && configData.length) {
        const params = configData.map((item: { cameraIndexCode: string }) => item.cameraIndexCode)
        // const params = ['101', '34020000001320000007'] // 测试数据
        const tempList: any = []
        getAlarmInfo({ videoNos: params }).then((res) => {
          res.data.forEach((item: any) => {
            if (item.riskDTOList.length) {
              item.riskDTOList.forEach((i: any) => {
                let pictureUrl = ''
                const findIndex = configData.findIndex((e: any) => item.cameraIndexCode === e.cameraIndexCode)
                if (findIndex !== -1) {
                  pictureUrl = `${window.localStorage.getItem('baseURL')}/picture/download/${configData[findIndex].url}?token=${window.localStorage.getItem('token')}`
                }
                tempList.push({
                  ...i,
                  alarmNum: item.alarmNum,
                  cameraIndexCode: item.cameraIndexCode,
                  monitorId: item.monitorId,
                  monitorName: item.monitorName,
                  pictureUrl,
                })
              })
            }
            else {
              tempList.push({
                ...item,
              })
            }
          })
          console.log('tempList', tempList)
          list.value = tempList
          loading.value = false
        }).catch(() => {
          loading.value = false
        })
      }
    }
  })
}
onMounted(() => {
  fetchData()
})
</script>

<template>
  <el-carousel v-if="list.length" v-loading="loading" class="alarm-info-bs" style="width: 100%;height: 100%;" :interval="5000" indicator-position="outside">
    <el-carousel-item v-for="(item, index) in list" :key="index" class="main">
      <div class="alarm-top">
        <img src="../../../assets/bigScreen/historyAlarm.png" class="alarm-img">
        <div class="top-content">
          <div>
            <span class="title">历史报警：</span>
            <span class="text">{{ item.alarmNum}} </span>
          </div>
          <div style="word-break: break-all;">
            <span class="title">点位名称：</span>
            <span class="text">{{ item.monitorName }}</span>
          </div>
        </div>
      </div>
      <div class="alarm-bottom">
        <img v-if="item.pictureUrl" :src="item.pictureUrl" class="alarm-img">
        <img v-if="!item.pictureUrl" src="../../../assets/bigScreen/alarm.png">
        <div class="bottom-content">
          <div style="word-break: break-all;">
            <span class="title">危险点：</span>
            <span class="text">{{item.riskName || '--'}}</span>
          </div>
          <div style="word-break: break-all;">
            <span class="title">伤害种类：</span>
            <span class="text">{{item.nature || '--'}}</span>
          </div>
          <div style="word-break: break-all;">
            <span class="title">关注对象：</span>
            <span class="text">{{item.attention || '--'}}</span>
          </div>
        </div>
      </div>
    </el-carousel-item>
  </el-carousel>
  <el-empty v-else description="暂无关注对象" :image-size="50" />
</template>

<style lang="scss" scoped>
.alarm-top {
  color: #abdfe0;
  display: flex;
  align-items: center;
  background-image: url('../../../assets/bigScreen/alarm-bg.png'); /* 设置图片路径 */
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  background-position: center; /* 背景图片居中 */
  width: 100%; /* 元素宽度 */
  height: 6rem; /* 元素高度 */
  padding: 0.6rem 2rem;
  .alarm-img {
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
  }
  .top-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .title {
      margin-right: 0.2rem;
      letter-spacing: 0.1rem;
    }
    .text {
      font-weight: 600;
    }
  }
}
.alarm-bottom {
  display: flex;
  color: #abdfe0;
  background: none;
  padding: 0;
  height: 8rem; /* 元素高度 */
  margin-top: 2rem;
  .alarm-img {
    width: 8rem;
    height: 8rem;
    margin-right: 1rem;
  }
  .bottom-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .title {
      margin-right: 0.2rem;
      letter-spacing: 0.1rem;
    }
    .text {
      font-weight: 600;
    }
  }
}
</style>

<style lang="scss">
.alarm-info-bs {
  .el-loading-mask {
    background-color: rgba(30, 90, 142, 0.7); /* 更改为你想要的颜色 */
  }
}
</style>