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

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

import { ElButton, ElInput } from 'element-plus';

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="flex w-80 flex-col rounded-lg bg-card p-5">
    <h3 class="h-7 w-full text-center text-xl leading-7 text-primary">
      思维导图创作中心
    </h3>
    <div class="mt-4 flex-grow overflow-y-auto">
      <div>
        <b>您的需求？</b>
        <ElInput
          v-model="formData.prompt"
          type="textarea"
          :maxlength="1024"
          :rows="8"
          class="mt-4 w-full"
          placeholder="请输入提示词，让AI帮你完善"
          show-word-limit
        />
        <ElButton
          class="mt-4 !w-full"
          type="primary"
          :loading="isGenerating"
          @click="emits('submit', formData)"
        >
          智能生成思维导图
        </ElButton>
      </div>
      <div class="mt-7">
        <b>使用已有内容生成？</b>
        <ElInput
          v-model="generatedContent"
          type="textarea"
          :maxlength="1024"
          :rows="8"
          class="mt-4 w-full"
          placeholder="例如：童话里的小屋应该是什么样子？"
          show-word-limit
        />
        <ElButton
          class="mt-4 !w-full"
          type="primary"
          @click="emits('directGenerate', generatedContent)"
          :disabled="isGenerating"
        >
          直接生成
        </ElButton>
      </div>
    </div>
  </div>
</template>
