<script setup>
import { onMounted, h, ref, watch, getCurrentInstance } from 'vue';
import { notification, Button } from 'ant-design-vue';
onMounted(() => {
const list = [{id: '11',warnLevel: '严重',...},...]
  showMessage(list);
});
function showMessage(){
for (const item of list) {
    const index = shownNotifications.findIndex((key) => key.id === item.id);
    if (index === -1) {
      const btn = () =>
          h(
              'div',
              {
                class: 'notification-btn-wrapper', // 使用类名
              },
              [
                h(
                    Button,
                    {
                      type: 'primary',
                      size: 'small',
                      onClick: () => handleConfirm(item),
                    },
                    { default: () => '确认' }
                ),
              ]
          );
      notification.open({
        message: '门架交易数据异常',
        description: h('div', {}, [
          h('div', { class: 'ct-div' }, [
              h('div',
                [
                h('div', { class: 'label' }, '发生时间'),
                h('div', { class: 'value' }, item.statisticalDate)
              ]),
              h('div',
                  [
                h('div', { class: 'label' }, '预警级别'),
                h('div', { class: `value ${item.warnLevel === '严重' ? 'warnLevel' : ''}` }, item.warnLevel)
              ]),
          ]),

          h('div', { class: 'label' }, '异常描述'),
          h('div', { class: 'value warnDesc' }, item.warnDesc)
        ]),
        btn,
        bottom: '10px',
        key: item.id,
        duration: null,
        placement: 'bottomRight',
        class: 'notification-custom-class',
        onClose: () => handleClose(item),
      });
      setShownNotifications(item.id);
    }
  }
}
  </script>

<style  lang="less">
.notification-custom-class {
  padding: 0;
  box-sizing: border-box;
  border-radius: 8px;
  .ant-notification-notice-content {
    .ant-notification-notice-message {
      height: 32px;
      border-bottom: 1px solid #0000000F;
      display: flex;
      align-items: center;
      padding-left: 10px;
      box-sizing: border-box;
      margin-bottom: 0;
      color: #262626;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 14px;
    }
    .ant-notification-notice-description {
      padding: 5px 10px;
      box-sizing: border-box;
    }

    .label {
      color: #00000072;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 12px;
      line-height: 22px;
      margin-bottom: 2px;
    }
    .value {
      opacity: 1;
      color: #262626;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 12px;
      line-height: 22px;
      margin-bottom: 2px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .ct-div {
      display: flex;
      align-items: center;
      > div {
        flex: 1;
        margin-right: 10px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .warnDesc {

      height: 60px;
      overflow-y: auto;
    }
    .warnLevel {
      color: #FF0000;
      font-weight: bold;
    }

  }
  .ant-notification-notice-btn {
    height: 32px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    margin-top: 0;
    border-top: 1px solid #0000000F;
    .notification-btn-wrapper {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .ant-notification-notice-close {
    top: 7px;
  }
}
</style>