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

import { ref } from 'vue';

import { message } from 'ant-design-vue';

import { createComment } from '#/api/license/comment';
import { Tinymce as RichTextarea } from '#/components/tinymce';
import { $t } from '#/locales';

const props = defineProps<{
  comments?: CommentApi.Comment[];
  parentId?: number;
  projectId?: number;
}>();

const emit = defineEmits(['getCommentByProjectId', 'showReply']);

const submitting = ref<boolean>(false);
const value = ref<string>('');

const handleSubmit = async () => {
  if (!value.value) {
    return;
  }

  // 提交表单
  const data = {
    parentId: props.parentId,
    projectId: props.projectId,
    content: value.value,
  } as CommentApi.Comment;
  try {
    submitting.value = true;
    await createComment(data);
    submitting.value = false;
    emit('showReply', false);
    message.success($t('ui.actionMessage.operationSuccess'));
    emit('getCommentByProjectId', props.projectId);
  } finally {
    value.value = '';
  }
};
</script>

<template>
  <div>
    <RichTextarea v-model="value" />
    <a-button
      html-type="submit"
      :loading="submitting"
      type="primary"
      class="mt-2"
      @click="handleSubmit"
    >
      {{
        (props.parentId ?? 0) === 0
          ? $t('comment.postComment')
          : $t('comment.replyComment')
      }}
    </a-button>
  </div>
</template>
