<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>