<script setup lang="ts">
import { reactive, ref } from 'vue';

import { MindMapContentExample } from '@vben/utils';

import { Button, Textarea } from 'ant-design-vue';

defineProps<{
  isGenerating: boolean;
}>();
const emits = defineEmits(['submit', 'directGenerate']);
const formData = reactive({
  prompt: '',
});

const generatedContent = ref(MindMapContentExample); // 已有的内容

defineExpose({
  setGeneratedContent(newContent: string) {
    // 设置已有的内容，在生成结束的时候将结果赋值给该值
    generatedContent.value = newContent;
  },
});
</script>
<template>
  <div class="bg-card flex w-80 flex-col rounded-lg p-5">
    <h3 class="text-primary h-7 w-full text-center text-xl leading-7">
      思维导图创作中心
    </h3>
    <div class="flex-grow overflow-y-auto">
      <div>
        <b>您的需求？</b>
        <Textarea
          v-model:value="formData.prompt"
          :maxlength="1024"
          :rows="8"
          class="mt-4 w-full"
          placeholder="请输入提示词，让AI帮你完善"
          show-count
        />
        <Button
          class="mt-4 !w-full"
          type="primary"
          :loading="isGenerating"
          @click="emits('submit', formData)"
        >
          智能生成思维导图
        </Button>
      </div>
      <div class="mt-7">
        <b>使用已有内容生成？</b>
        <Textarea
          v-model:value="generatedContent"
          :maxlength="1024"
          :rows="8"
          class="mt-4 w-full"
          placeholder="例如：童话里的小屋应该是什么样子？"
          show-count
        />
        <Button
          class="mt-4 !w-full"
          type="primary"
          @click="emits('directGenerate', generatedContent)"
          :disabled="isGenerating"
        >
          直接生成
        </Button>
      </div>
    </div>
  </div>
</template>
