<!--
 * @Author: Mm
 * @Date: 2025-05-28 15:00:40
 * @LastEditors: hcc
 * @LastEditTime: 2025-06-09 09:33:16
 * 不写bug的程序员不是一个好程序员!
-->
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';

// import { useNotifyStore } from '#/store';

// 使用 v-model 控制显示/隐藏
const props = defineProps<{
  modelValue: boolean;
}>();
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
  (e: 'asynChatCount', value: number): void;
}>();
const im_refresh_token = localStorage.getItem('im_refresh_token');
const im_access_token = localStorage.getItem('im_access_token');
const srcValue = ref('');
const chatUrl = computed(() => {
  return import.meta.env.VITE_APP_CHAT_SERVER_URL;
});
srcValue.value =
  im_refresh_token && im_access_token
    ? `${chatUrl.value}/#/login?refresh_token=${im_refresh_token}&access_token=${im_access_token}`
    : `${chatUrl.value}/#/login`;

const handleClose = () => {
  emit('update:modelValue', false);
};
// const notifyStore = useNotifyStore();

function handleMessage(event: any) {
  const unreadCount = event.data.count;
  console.log('未读：', unreadCount);
  if ('count' in event.data) {
    emit('asynChatCount', unreadCount);
  }
  // notifyStore.chatUnreadCount = unreadCount;
}

onMounted(() => {
  window.addEventListener('message', handleMessage);
});
</script>

<template>
  <div class="mask" @click.self="handleClose">
    <div class="boxWrap" @click.stop>
      <!-- <CloseOutlined class="close" @click="handleClose" /> -->
      <iframe class="chat" :src="srcValue" frameborder="0"></iframe>
    </div>
  </div>
</template>

<style scoped lang="scss">
.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; // 可选遮罩层
  background-color: rgb(0 0 0 / 50%); // 可选遮罩层
}

.boxWrap {
  top: auto;
  left: auto;
  z-index: 9999999999999999999;
  width: 75%;
  height: 80%;
  background-color: white;
  border-radius: 5px;

  .chat {
    width: 100%;
    height: 100%;
  }
}

.close {
  position: absolute;
  top: 15px;
  right: 15px;
}
</style>
