<template>
  <div v-loading="loading" style="width: 100%;">
    <div>
      <div class="ex_box">
        <span>例子：</span>
        <el-button type="primary" size="mini" @click="checkExample('1')">选择题</el-button>
        <el-button type="primary" size="mini" @click="checkExample('2')">问答题</el-button>
      </div>
      <div class="ac_box">
        <!-- <el-input v-autoHeight="75" v-model="text" placeholder="请在这里输入要发送的消息" size="normal" type="textarea" resize="none"
          :rows="3"></el-input> -->
          <textarea v-autoHeight="75" rows="3" class="binfo_input binfo_textarea" cols v-model="text" placeholder="请在这里输入要发送的消息"></textarea>
          <el-button type="primary" size="mini" @click="generate" style="margin-left:10px">生成</el-button>
      </div>
      <div class="ac_content" v-if="aiCreate.length">
        <div class="title">生成内容：</div>
        <div class="box" v-if="aiType == 1">
          <div v-for="(item, index) in aiCreate" :key="index" class="choice">
            <div class="title">{{ `${index + 1}：${item.title}` }}</div>
            <div class="options">
              <span v-for="(option, oIndex) in item.options" :key="`${index}-${oIndex}`">{{ option }}</span>
            </div>
            <div class="answer">{{ `答案：${item.answer}` }}</div>
          </div>
        </div>
        <div class="box" v-if="aiType == 3">
          <div v-for="(item, index) in aiCreate" :key="index" class="choice">
            <div class="title">{{ `${index + 1}：${item.title}` }}</div>
            <div class="answer">{{ `答案：${item.answer}` }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-button type="primary" @click="exportT" size="mini">导入</el-button>
  </div>
</template>

<script>

export default {
  props: {
    aiJson: {
      type: Array,
    },
  },
  directives: {
    autoHeight: {
      update(el, binding) {
        const { value } = binding
        if (value && typeof value === 'number') {
          el.style.height = `${value}px`
        } else {
          el.style.height = 'auto'
        }
      },
      componentUpdated(el) {
        el.style.height = `${el.scrollHeight + 5}px`
      },
    },
  },
  data() {
    return {
      example: {
        '1': {
          'title': '请你以富文本的形式给我出三个关于小学数学单位换算的选择题，每个选择题选项不少于4个，需要答案，但不需要解释，符号请使用中文的'
        },
        '2': {
          'title': '请你以富文本的形式给我出三个关于三年级语文知识问答的问答题，需要答案，但不需要解释'
        }
      },
      text: "",
      aiCreate: [],
      aiType: "",
      loading: false
    }
  },
  methods: {
    checkExample(type) {
      this.text += this.example[type].title
    },
    guid() {
      var _num,
        i,
        _guid = "";
      for (i = 0; i < 32; i++) {
        _guid += Math.floor(Math.random() * 16).toString(16); //随机0  - 16 的数字 转变为16进制的字符串
        _num = Math.floor((i - 7) / 4); //计算 (i-7)除4
        if (_num > -1 && _num < 4 && i == 7 + 4 * _num) {
          //会使guid中间加 "-"   形式为xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
          _guid += "-";
        }
      }
      return _guid;
    },
    generate() {
      if (this.text == "") {
        this.$message.error("请输入要发送的消息")
        return
      }
      // else if (this.text.indexOf("添加文档") !== -1) {
      //   this.aiType = 4
      // }
      if (this.text.indexOf("选择题") !== -1) {
        this.aiType = 1
      } else if (this.text.indexOf("问答题") !== -1) {
        this.aiType = 3
      } else {
        this.$message.error("生成的文字中要包含选择题或者问答题才能生成题目哦，请重新编辑下吧")
        return
      }

      if(this.text.indexOf("选择题") !== -1 && this.text.indexOf("问答题") !== -1){
        this.$message.error("目前暂不支持问答题和选择题一起创建")
        return
      }
      this.loading = true
      let param = {
        model: "gpt-3.5-turbo",
        temperature: 0,
        max_tokens: 2048,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0,
        messages: [
          {
            role: "user",
            content: this.text,
          },
        ],
        uid: this.guid(),
        stream: false,
      };
      this.ajax.post("https://gpt.cocorobo.cn/chat", param).then(
        (res) => {
          if (
            res.data.FunctionResponse &&
            res.data.FunctionResponse.result &&
            res.data.FunctionResponse.result == "无效请求,请重新发起对话"
          ) {
            this.$message.error("你的内容太长，无法使用Ai创建!");
            this.loading = false
            return;
          }
          let aiReturn = res.data.FunctionResponse.choices[0].message.content;
          aiReturn = aiReturn.split("\n")
          aiReturn = aiReturn.filter(e => e != "")
          this.loading = false
          this.generate2(aiReturn)
        },
        (err) => {
          console.log(err);
          this.loading = false
        }
      );
    },
    generate2(aiReturn) {
      this.loading = true
      let content = ''
      if (this.aiType == 1) {
        content = `${JSON.stringify(aiReturn)},要求返回格式是Array [{"title":"",options:[],answer:[]}]`
      } else if (this.aiType == 3) {
        content = `${JSON.stringify(aiReturn)},要求返回格式是Array [{title: "",answer: ""}]`
      }
      let param = {
        model: "gpt-3.5-turbo",
        temperature: 0,
        max_tokens: 2048,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0,
        messages: [
          {
            role: "user",
            content: content
          },
        ],
        uid: this.guid(),
        stream: false,
      };
      this.ajax.post("https://gpt.cocorobo.cn/chat", param).then(
        (res) => {
          if (
            res.data.FunctionResponse &&
            res.data.FunctionResponse.result &&
            res.data.FunctionResponse.result == "无效请求,请重新发起对话"
          ) {
            this.$message.error("你的内容太长，无法使用Ai创建!");
            this.loading = false
            return;
          }
          let aiCreate = res.data.FunctionResponse.choices[0].message.content;
          try {
            aiCreate = JSON.parse(aiCreate)
          } catch (error) {
            this.generate2(aiReturn)
          }
          console.log(aiCreate)
          this.aiCreate = aiCreate;
          this.loading = false
        },
        (err) => {
          console.log(err);
          this.loading = false
        }
      );
    },
    exportT() {
      if (!this.aiCreate.length) {
        this.$message.error("请先创建Ai内容!");
        return;
      }
      if (this.aiType !== 1 && this.aiType !== 3) {
        this.$message.error("目前只支持选择题/问答题的创建！输入内容必须包含选择题/问答题！");
        return;
      }
      var json = JSON.parse(JSON.stringify(this.aiJson))
      let array = []
      let englishIndex = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
      if (this.aiType === 1) {
        for (var i = 0; i < this.aiCreate.length; i++) {
          let answer = []
          let type = 1
          if (this.aiCreate[i].answer) {
            if (this.aiCreate[i].answer.length > 1) {
              type = 2
              for (var j = 0; j < this.aiCreate[i].answer.length; j++) {
                answer.push(englishIndex.indexOf(this.aiCreate[i].answer[j].toLocaleUpperCase()))
              }
            } else {
              answer = [englishIndex.indexOf(this.aiCreate[i].answer[0].toLocaleUpperCase())]
            }
          }

          let options = []
          for (var j = 0; j < this.aiCreate[i].options.length; j++) {
            options.push({
              img: "",
              option: this.aiCreate[i].options[j]
            })
          }
          array.push(
            {
              json: {
                answer: answer,
                array: options,
                title: this.aiCreate[i].title,
                type: type
              },
              ttype: 1,
              type: 1
            }
          )
        }
      } else if (this.aiType === 3) {
        for (var i = 0; i < this.aiCreate.length; i++) {
          array.push(
            {
              json: {
                answer: this.aiCreate[i].answer,
                title: this.aiCreate[i].title,
                type: 1
              },
              ttype: 1,
              type: 3
            }
          )
        }
      }
      if (!json.length || json[0].ttype == 1) {
        json = [...json, ...array]
      } else if ((json[0].ttype == 2 || json[0].ttype == 3) && !json[0].array.length) {
        json[0].array = array
      } else if (json[0].ttype == 2 && json[0].array.length) {
        json[0].array = [...json[0].array, ...array]
      } else if (json[0].ttype == 3 && json[0].array.length) {
        if (json[0].array[0].ttype == 2) {
          json[0].array[0].array = [...json[0].array[0].array, ...array]
        } else {
          json[0].array = [...json[0].array, ...array]
        }
      }
      this.$emit("changeJson", json)
      this.aiCreate = []
    }
  },
}
</script>

<style scoped>
.ac_box {
  display: flex;
  width: 100%;
  align-items: flex-end;
  margin-bottom: 10px;
}

.ex_box {
  margin-bottom: 10px;
  color: #909090;
  font-size: 14px;
}

.ac_content {
  margin-bottom: 10px;
  font-size: 14px;
}

.ac_content>.title {
  margin-bottom: 10px;
}

.ac_content>.box {}

.ac_content>.box>.choice+.choice {
  margin-top: 10px;
}

.ac_content>.box>.choice>div+div {
  margin-top: 10px;
}

.ac_content>.box>.choice>.options {
  display: flex;
  flex-wrap: wrap;
}

.ac_content>.box>.choice>.options>span {
  margin-right: 10px;
  margin-bottom: 5px;
}

.binfo_input {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    display: block;
    min-width: 0;
    outline: none;
    box-sizing: border-box;
    background: none;
    border: none;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    resize: none;
    font-family: 'Microsoft YaHei';
    min-height: 48px;
    /* border: 1px solid #3682fc00; */
    border: 1px solid #CAD1DC;
}

.binfo_textarea {
    border: 1px solid #CAD1DC;
    font-size: 14px;
    resize: none;
    /* background: #f6f6f6; */
    font-family: 'Microsoft YaHei';
}

.binfo_input:focus-visible {
    border: 1px solid #3681FC !important;
}
</style>