<template>
  <div class="notification-center">
    <!-- 1. 触发按钮 -->
    <div class="notification-trigger">
      <a-button type="text" class="notification-btn" title="聊天信息" @click="openChat">
        <template #icon>
          <IconNotification />
        </template>
        <span class="notification-text">聊天信息</span>
      </a-button>
    </div>

    <!-- 2. 聊天平台弹窗 -->
    <a-modal v-model:visible="chatVisible" title="聊天平台(注册验证码666666)" width=80% :footer="false" :mask-closable="true"
      :destroy-on-close="false" @close="chatVisible = false">
      <!-- 3. 嵌入 React 聊天平台 -->
      <iframe ref="chatFrame" src="http://pms.dtyx.net:11001/" frameborder="0"
        style="width: 100%; height: 600px; border: none;" allow="camera; microphone"></iframe>
    </a-modal>
  </div>
</template>


<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import { IconNotification } from '@arco-design/web-vue/es/icon'

const chatVisible = ref(false)
const chatFrame = ref<HTMLIFrameElement>()
const url = ref(import.meta.env.VITE_API_BASE_URL + ":11001")
/* 打开聊天窗口 */
function openChat() {
  chatVisible.value = true

  // 如果 React 平台需要登录信息，可在 iframe 加载完成后 postMessage
  // nextTick(() => {
  //   // 确保 iframe 已挂载
  //   if (chatFrame.value) {
  //     chatFrame.value.onload = () => {
  //       // 把当前登录用户信息发给 React
  //       chatFrame.value?.contentWindow?.postMessage(
  //         {
  //           type: 'INIT_IM',
  //           payload: {
  //             userID: 'your-user-id',   // 换成真实 ID
  //             token:  'your-token',     // 换成真实 token
  //           },
  //         },
  //         '*'   // 生产环境可改成 React 平台的 origin
  //       )
  //     }
  //   }
  // })
}
</script>

<style scoped lang="scss">
.notification-center {
  position: relative;
  z-index: 1000;

  .notification-trigger {
    cursor: pointer;

    .notification-btn {
      color: var(--color-text-1);
      display: flex;
      align-items: center;
      gap: 4px;

      &:hover {
        color: var(--color-primary);
      }

      .notification-text {
        font-size: 14px;
        margin-left: 4px;
      }
    }
  }
}

// 消息中心弹窗样式
.notification-modal {
  :deep(.arco-modal) {
    z-index: 1000 !important;
  }

  :deep(.arco-modal-mask) {
    z-index: 999 !important;
  }

  :deep(.arco-modal-wrapper) {
    z-index: 1000 !important;
  }
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;

  .header-left {
    h3 {
      margin: 0 0 4px 0;
      font-size: 18px;
      font-weight: 600;
      color: var(--color-text-1);
    }

    .notification-count {
      font-size: 13px;
      color: var(--color-text-3);
    }
  }

  .header-right {
    display: flex;
    gap: 8px;
  }
}

.notification-tabs {
  margin-bottom: 16px;

  :deep(.arco-tabs-nav) {
    margin-bottom: 0;
  }
}

.notification-list {
  max-height: 400px;
  overflow-y: auto;

  .empty-state {
    text-align: center;
    padding: 40px 0;
    color: var(--color-text-3);
  }

  .notification-item {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid var(--color-border-2);
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      background-color: var(--color-fill-2);
      border-color: var(--color-primary-light-3);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    &.unread {
      background-color: var(--color-primary-light-1);
      border-color: var(--color-primary-light-3);

      &:hover {
        background-color: var(--color-primary-light-2);
      }
    }

    &.urgent {
      border-left: 4px solid var(--color-danger);
      background-color: var(--color-danger-light-1);
    }

    &.high {
      border-left: 4px solid var(--color-warning);
      background-color: var(--color-warning-light-1);
    }

    .notification-icon {
      margin-right: 16px;
      margin-top: 2px;
      color: var(--color-text-2);
      font-size: 18px;
    }

    .notification-content {
      flex: 1;
      min-width: 0;

      .notification-title {
        font-weight: 600;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--color-text-1);
        font-size: 15px;
      }

      .notification-message {
        font-size: 14px;
        color: var(--color-text-2);
        margin-bottom: 12px;
        line-height: 1.5;
      }

      .notification-meta {
        display: flex;
        gap: 16px;
        font-size: 12px;
        color: var(--color-text-3);

        .notification-time {
          color: var(--color-text-2);
          font-weight: 500;
        }
      }
    }

    .notification-actions {
      display: flex;
      gap: 8px;
      opacity: 0;
      transition: opacity 0.2s;
    }

    &:hover .notification-actions {
      opacity: 1;
    }
  }
}

.notification-footer {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
  margin-top: 16px;
  background-color: var(--color-fill-1);
  border-radius: 8px;
  padding: 16px;
}

// 确保弹窗在普通层级
:deep(.arco-modal) {
  z-index: 1000 !important;
}

:deep(.arco-modal-mask) {
  z-index: 999 !important;
}

:deep(.arco-modal-wrapper) {
  z-index: 1000 !important;
}

// 针对Arco Design v2的样式
:deep(.arco-overlay) {
  z-index: 1000 !important;
}

:deep(.arco-overlay-container) {
  z-index: 1000 !important;
}

// 确保消息中心弹窗在普通层级
:deep(.arco-modal) {
  z-index: 1000 !important;
  position: relative !important;
}

// 强制设置普通优先级
:deep(.arco-modal-wrapper) {
  z-index: 1000 !important;
  position: relative !important;
}
</style>
