<!-- 报警列表 -->
<template>
  <div class="alarm-list">
    <div
      class="card"
      v-for="item in list"
      :key="item.id"
    >
      <div class="time-area">
        <span>{{ item.recorddateStr }}</span>
        <NotificationFilledIcon style="margin-right: 8px;color: #d54941;" />
      </div>
      <div class="disc">
        {{ item.alarmMsg }}
      </div>
    </div>

  </div>
</template>
<script lang="ts" setup name="AlarmList">
import { ref, PropType, watch } from "vue";
import { NotificationFilledIcon } from "tdesign-icons-vue-next";
import { IAlarmList } from "../alarm-interface";
const props = defineProps({
  alarmList: {
    type: Array as PropType<IAlarmList[]>,
  },
 
});
const list = ref<IAlarmList[]>([]); // 报警列表

watch(
  () => props.alarmList,
  (newVal: any) => {
    list.value = newVal!;
  }
);
</script>
<style lang="scss" scoped>
@import "../../../../assets/style/mixin.scss";
.alarm-list {
  padding: 0 10px;
  .card {
    background-color: #fff;
    margin: 16px 0;
    border-radius: 10px;
    padding: 20px 10px 32px 10px;
    box-shadow: 5px 5px 5px #cdcfcf;
    .time-area {
      display: flex;
      justify-content: space-between;
      font-size: 22px;
      color: #978888;
    }
    .disc {
      line-height: 26px;
      margin-top: 20px;
      font-size: 18px;
      font-weight: 600;
      word-break: break-all;
      // @include textoverflow(3)
    }
  }
}
</style>