<script lang="ts" setup>
import type { CommentApi } from '#/api/license/comment';
import type { ProjectApi } from '#/api/license/project';

import { ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import { getCommentTree } from '#/api/license/comment';
import { getProject } from '#/api/license/project';

import Comment from '../comment/index.vue';

const projectData = ref<ProjectApi.Project>();

const comments = ref<CommentApi.Comment[]>([]);

const [Drawer, drawerApi] = useVbenDrawer({
  async onConfirm() {},
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      return;
    }
    // 加载数据
    let data = drawerApi.getData<ProjectApi.Project>();
    if (!data) {
      return;
    }
    if (data.id) {
      drawerApi.lock();
      try {
        data = await getProject(data.id);
        // comments.value = await getCommentTree(data.id);
        getCommentByProjectId(data.id, false);
      } finally {
        drawerApi.unlock();
      }
    }
    // 设置到 values
    projectData.value = data;
  },
});

const getCommentByProjectId = async (projectId: number, sort: boolean) => {
  comments.value = await getCommentTree(projectId, sort);
};
</script>
<template>
  <Drawer :title="projectData?.name" class="w-[800px]" :footer="false">
    <Comment
      :comments="comments"
      :project-id="projectData?.id"
      @get-comment-by-project-id="getCommentByProjectId"
    />
  </Drawer>
</template>
