<template>
  <div class="custom-notification">
    <div class="titleWrapper">
      <img class="alarmIcon" :src="alarmIcon" />
      <div class="title"> 告警提醒 </div>
      <div class="close">
        <img :src="closeIcon" alt="close" @click.stop="item.clear" />
      </div>
    </div>

    <div class="contentWrapper">
      <div
        :style="{ 'background-image': `url('${item.props?.thumbnail}')` }"
        class="thumbnail"
        v-if="item.props?.thumbnail"
      ></div>
      <div class="info">
        <div class="info-text"> {{ '类型：' + item.props.type }} </div>
        <div class="info-text"> {{ '设备：' + item.props.device }} </div>
        <div class="info-text"> {{ '场所：' + item.props.place }} </div>
        <div class="info-text"> {{ '时间：' + item.props.time }} </div>
      </div>
    </div>
    <div class="footerWrapper">
      <el-button type="primary" @click="handleClick(item)">查看详情</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import type { NotivueItem } from 'notivue';
  import closeIcon from '@/assets/icons/close-icon.png';
  import alarmIcon from '@/assets/icons/alarm-icon.png';

  export interface FollowerNotificationProps {
    thumbnail: string;
    type: string;
    device: string;
    place: string;
    time: string;
    onClick: () => unknown;
  }

  const props = defineProps<{
    item: NotivueItem<FollowerNotificationProps>;
  }>();

  const handleClick = (item) => {
    item.props.onClick();
    item.clear();
  };
</script>
<style scoped lang="scss">
  .custom-notification {
    background: url('@/assets/images/institute-safety/gd-hbimg.png') 100% 100%;
    top: 150px;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 20px 24px;
    width: 490px;
    height: 260px;
    border-radius: 8px;

    .contentWrapper {
      margin-top: 20px;
      display: flex;
      gap: 20px;
    }

    .titleWrapper {
      display: flex;
      align-items: center;
    }
    .title {
      text-align: left;
      font-weight: 500;
      font-size: 20px;
      color: #333333;
      margin-left: 8px;
    }
    .thumbnail {
      width: 199px;
      height: 112px;
      border-radius: 4px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: inline-block;
      flex-grow: 0;
      flex-shrink: 0;
      margin-top: 5px;
    }
    .info {
      width: calc(100% - 20px - 199px);
      display: flex;
      flex-direction: column;
      gap: 8px;

      font-weight: 400;
      font-size: 16px;
      color: #000000;
    }
    .info-text {
      width: 100%;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的文本 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
    .close {
      flex-grow: 1;
      text-align: end;
      height: 24px;

      img {
        cursor: pointer;
        width: 24px;
        height: 100%;
      }
    }

    .footerWrapper {
      width: 100%;
      margin-top: 20px;
      text-align: end;
    }

    .alarmIcon {
      width: 23px;
      height: 23px;
    }
  }
</style>
