<!--
  Description: 写作界面左下角，字典组件
  Author: BaiQi
  Created Date: 2024-6-21
  6718dffaee5b2137080707f5
-->
<template>
  <div :class="$style.dictionaries">
    <div :class="$style['dic-box-title']">字典</div>
    <div :class="$style['box-dialog']">
      <el-input
          v-model="content"
          placeholder="请输入搜索内容"
      >
<!--        <template #prefix>-->
<!--          <LanguageIcon :currentLanguage="currentLanguage"></LanguageIcon>-->
<!--        </template>-->
        <template #suffix>
          <el-button @click="search" style="width: 40px; border: none" v-loading="loading">
            <el-icon v-if="!loading" >
              <Search />
            </el-icon>
          </el-button>
        </template>
      </el-input>
      <div :class="$style['dic-result']">{{ res }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import useApis from "@/apis";
  import {useStore} from "@/store";
  import {ref} from "vue";
  import LanguageIcon from "@/components/languageIcon/languageIcon.vue";
  import {Search} from '@element-plus/icons-vue';
  import type {IDialogue} from "@/types/dialogue";
  import {ElMessage} from "element-plus";

  const apis = useApis()
  const store = useStore()
  const currentLanguage = ref('zh')
  const content = ref('')
  const res = ref('')
  const loading = ref(false)
  const promptTemplate = "【角色设定】：您是一个专业词典助手，具备中文/英文互译能力和单词多义解释能力。\n" +
      "【任务说明】：请严格根据以下规则处理用户提供的输入：\n" +
      "1.如果用户提供中文句子，请将该句子翻译为英文。\n" +
      "2.如果用户提供英文句子，请将该句子翻译为中文。\n" +
      "3.如果用户提供中文或英文单词，请提供该单词的所有可能翻译，并给出相关的例句。\n" +
      "\n" +
      "【示例1】将中文句子翻译为英文：\n" +
      "用户：我今天去学校了。\n" +
      "模型：I went to school today.\n" +
      "\n" +
      "【示例2】将英文句子翻译为中文：\n" +
      "用户：She is studying at the library.\n" +
      "模型：她正在图书馆学习。\n" +
      "\n" +
      "【示例3】用户提供中文单词，将该中文单词翻译为所有可能的英文，并给出相关的例句\n" +
      "用户：书\n" +
      "模型：\n" +
      "翻译： book, paper (某些上下文中可指书面材料)\n" +
      "例句：\n" +
      "I bought a new book yesterday. (我昨天买了一本新书。)\n" +
      "He wrote a letter on a piece of paper. (他在一张纸上写了封信。)\n" +
      "\n" +
      "【示例4】用户提供英文单词，将该英文单词翻译为所有可能的中文，并给出相关的例句\n" +
      "用户：apple\n" +
      "模型：\n" +
      "翻译： 苹果 (名词), 苹果公司 (名词)\n" +
      "例句：\n" +
      "I ate an apple this morning. (我今天早上吃了一个苹果。)\n" +
      "Apple is a well-known technology company. (苹果公司是一个知名的科技公司。)\n" +
      "\n" +
      "【注意事项】\n" +
      "1.请确保根据用户输入的语言（中文或英文）进行适当的翻译或解释。\n" +
      "2.必须直接给出翻译结果，不要交互，不要任何其他信息。\n" +
      "3.当一个单词有多个含义的时候，按使用频率降序排列（高频在前）。\n" +
      "4.当用户输入的内容为英文时，翻译结果一定为中文，不要重复用户的输入内容。\n" +
      "5.用户输入的简单的英文也要翻译为中文，例如：happy 翻译为：快乐的(形容词)；幸福的(形容词)。例如：out、by、on等等\n" +
      "6.当用户输入的英语单词是名词的复数形式，可以化为单数再解释。例如：words，按照word解释即可。\n" +
      "7.当用户输入的英语单词是动词的第三人称单数形式，可以化为一般形式再解释。例如：translates，按照translate解释即可。\n" +
      "\n" +
      "\n" +
      "以下是用户输入：\n\n";


  const chinesePattern = new RegExp("[\u4E00-\u9FA5]+");
  const englishPattern = new RegExp("[A-Za-z]+");

  const search = () => {
    // loading.value = true
    // apis.requestDictionary({
    //   q: content.value,
    //   from: 'auto',
    //   to: chinesePattern.test(content.value) ? 'zh-cn' : 'en'
    // }, 1, store.user.id)
    //     .then((response:any) => {
    //       // console.log('requestDictionary', response)
    //       res.value = response.data.data
    //       loading.value = false
    //     })
    loading.value = true;

    let requestBody:IDialogue[] = []
    requestBody.push({
      role: 'user',
      content: promptTemplate + content.value
    })

    apis.requestAI("6718dffaee5b2137080707f5", "ChatGLM4", requestBody)
        .then((_res:any) => {
          if(_res.data.code == 500){
            ElMessage.error("翻译请求超时")
          } else {
            let translation = _res.data.data.content;
            console.log(translation)
            res.value = translation
          }
        })
        .catch((_err:any) => {
          console.log(_err);
        })
        .finally(() => {
          loading.value = false;
        });
  }


</script>

<script lang="ts">
export default {
  name: "Dictionaries"
}
</script>

<style module>
@import "index.scss";
</style>
