<template>
  <BasicModal
    v-bind="$attrs"
    title="IM聊天"
    :width="980"
    :footer="null"
    :canFullscreen="true"
    :destroyOnClose="false"
    wrapClassName="im-chat-modal-wrap"
    @register="registerModal"
    @open-change="handleOpenChange"
  >
    <div class="im-chat-modal-body">
      <ImChat ref="imChatRef" embedded />
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import ImChat from './ImChat.vue';

  defineOptions({ name: 'ImChatModal' });

  const imChatRef = ref<InstanceType<typeof ImChat>>();

  function restoreChatSession() {
    nextTick(() => {
      imChatRef.value?.restoreSessionIfNeeded?.();
    });
  }

  const [registerModal] = useModalInner(() => {
    restoreChatSession();
  });

  function handleOpenChange(open: boolean) {
    if (open) {
      restoreChatSession();
    }
  }
</script>

<style lang="less">
  .im-chat-modal-wrap {
    .im-chat-modal-body {
      height: 70vh;
      min-height: 480px;
    }

    .im-chat-page--embedded {
      height: 100% !important;
      padding: 0 !important;
      background: transparent !important;
    }

    .im-chat-row {
      border-radius: 4px;
    }
  }
</style>
