<script setup lang="ts">
import text2videoService from "@/api/service/text2videoService";
import utils from "@/utils/utils";
import {
  ElMessage, genFileId,
  type UploadInstance,
  type UploadProps,
  type UploadRawFile
} from "element-plus";
import { nextTick, onMounted, reactive, ref } from "vue";

const debug = ref(import.meta.env.MODE === 'production' ? false : true);
// const debug = ref(false);
const loading = ref(false);
const form = reactive({
  task_id: "",
  task_content: "开发一款坦克大战的小游戏",
  prompt: `你是一名高级的程序员。现在需要根据产品需求，设计一份完整的程序编写的思路，比如第一步写什么模块，第二步写什么模块，整个思路应逻辑清晰、流畅。以json格式输出：\n[{"序号": 序号, "描述": 描述, "详细说明": 详细说明}, ...]\n`,
  answer: "",
  answer_json: [],
});
const llms = {
  tyqw_online: {'api': 'tyqw', 'name':'线上通义千问'},
  baichuan: {'api': 'langchain', 'name':'本地baichuan2-7b'},
  qwen_local: {'api': 'langchain', 'name':'本地Qwen-7B-Chat'},
  chatgpt: {'api': 'gpt', 'name':'chatgpt'},
  kimi: {'api': 'kimi', 'name':'kimi'},
};

onMounted(() => {
  // 初始化task_id
  form.task_id = utils.genDateTimeStr();
  console.log('页面加载，task_id=', form.task_id)
});

const onSubmitGpt = () => {
  const my_prompt = ref(`${form.prompt}。产品需求如下：${form.task_content}`);
  text2videoService
    .submitLLM(utils.aesEncrypt(my_prompt.value), utils.aesEncrypt(llms.tyqw_online.api), [], form.task_id, "true")
    .then((result: string) => {
      console.log(result);
      form.answer = result;
      const jsonText = utils.extractJSON(result);
      console.log(jsonText);
      form.answer_json = utils.formatJsonObj(jsonText!);
    })
    .catch((error: any) => {
      console.error(error);
      ElMessage({
        message: error,
        type: "error",
      });
    });
};
</script>

<!-- ============================================================================================================ -->
<!-- ============================================================================================================ -->
<!-- ============================================================================================================ -->

<template>
  <main class="home-container">
    <!-- 标题 -->
    <el-divider content-position="left">将产品需求拆解为开发步骤</el-divider>
    <el-form :model="form" label-width="114px" v-loading="loading">
      <!-- 产品需求 -->
      <el-form-item label="产品需求">
        <el-input v-model="form.task_content" :autosize="true" type="textarea" />
      </el-form-item>
      <!-- Prompt -->
      <el-form-item label="Prompt">
        <el-text class="mx-1" type="danger">{{ form.prompt }}</el-text>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmitGpt"
          >生成步骤（{{ llms.tyqw_online.name }}）</el-button
        >
      </el-form-item>
      <!-- 结果 -->
      <el-form-item label="步骤">
        <!-- <el-text class="mx-1">{{ form.answer }}</el-text> -->
        <el-table
          :data="form.answer_json"
          border
          style="width: 100%; z-index: calc(var(--el-table-index) -1)"
        >
          <el-table-column prop="序号" label="序号" width="55" />
          <el-table-column prop="描述" label="描述" width="300">
            <template v-slot="scope">
              <el-text class="mx-1">{{ scope.row.描述 }}</el-text>
            </template>
          </el-table-column>
          <el-table-column prop="详细说明" label="详细说明">
            <template v-slot="scope">
              <el-text class="mx-1">{{ scope.row.详细说明 }}</el-text>
            </template>
          </el-table-column>

          <el-table-column width="200" label="操作" align="center">
            <template v-slot="scope">
              <div style="margin: 5px 0">
                <el-button type="primary" size="small" @click=""
                  >与大模型继续沟通</el-button
                >
              </div>

              <!-- <div style="margin: 10px 0">
                <el-button type="danger" size="small" @click="">删除本步骤</el-button>
              </div> -->
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <!-- <el-form-item>
        <el-button type="primary" @click="">保存所有记录</el-button>
      </el-form-item> -->
    </el-form>
  </main>
</template>

<style lang="scss" scoped>
.home-container {
  width: 100%;
}
</style>

<style lang="scss">
.home-container {
  .el-table .el-table__cell {
    z-index: calc(var(--el-table-index) -1);
  }
}
.dashed-div {
  border: 1px dashed #999;
  margin: 5px 0;
  padding: 2px;
}
</style>