<template>
  <div class="chat">
    <div class="scenarioBtn" @click="showScenario">
      <img
          src="../../assets/images/chat/scenarioImg.png"
          class="scenarioImg"
          alt=""
      />
      <span class="scenarioText">场景</span>
    </div>
    <ChatHistory
        ref="chatHistory"
        @showHistory="showHistory"
        v-show="historyStatus"
        :status="historyStatus"
        @newChat="newChat"
        @viewHistory="viewHistory"
        @updateHistoryTitle="updateHistoryTitle"
    ></ChatHistory>
    <div class="chatAll" ref="chatDiv">
      <div class="content" v-if="!chatStatus">
        <div class="title">
          <span class="titleHead">知</span>
          <span>海无涯</span>
          <span class="titleHead" style="margin-left: 40px">冶</span>
          <span>技卓越</span>
        </div>
        <div class="titleInfo">
          提升信息处理效率，促进科研创新，优化工艺流程，冶金行业AI助手！
        </div>
        <div class="operate">
          <div class="scenario">
            <div
                class="scenarioItem"
                v-for="(item, index) in fetchSmartPromptListBack"
                :key="index"
                @click="selectScenarioItem(item)"
            >
              <div class="scenarioItemContainer">
                <div class="scenarioItemTitle">{{ item.title }}</div>
                <div class="scenarioItemInfo" :title="item.desc">
                  {{ item.desc }}
                </div>
              </div>
              <img src="../../assets/images/chat/jump.png" alt=""/>
            </div>
          </div>
          <div class="carousel">
            <el-carousel arrow="never" pause-on-hover height="292px">
              <el-carousel-item>
                <router-link to="/writing">
                  <img
                      class="carouselImg"
                      src="../../assets/images/chat/carouselWriting.png"
                      alt=""
                  />
                </router-link>
              </el-carousel-item>
              <el-carousel-item>
                <router-link to="/knowledgeBase">
                  <img
                      class="carouselImg"
                      src="../../assets/images/chat/carouselStudy.png"
                      alt=""
                  />
                </router-link>
              </el-carousel-item>
<!--              <el-carousel-item>
                <img
                    class="carouselImg"
                    src="../../assets/images/chat/carouselTranslation.png"
                    alt=""
                />
              </el-carousel-item>-->
            </el-carousel>
          </div>
        </div>
      </div>

      <div
          class="dialogue"
          :style="{ width: `${widthChat}px` }"
          v-if="chatStatus"
      >
        <div class="fixedTop">
          <span class="chatTitle" :title="chatTitle" v-show="!changeTitleStatus">{{
              chatTitle
            }}</span>
          <el-input
              v-model="chatTitle"
              @blur="changeTtile"
              @keydown.enter="changeTtile"
              v-if="changeTitleStatus"
          />
          <el-dropdown v-show="!changeTitleStatus" trigger="click">
            <img
                src="../../assets/images/chat/select.png"
                class="selectImg"
                alt=""
            />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                    @click="
                    () => {
                      changeTitleStatus = true;
                    }
                  "
                >修改名称
                </el-dropdown-item
                >
                <el-dropdown-item @click="delChat"
                ><span style="color: red">删除</span></el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="blurryWrap" v-if="scrollTop != 0">
          <div class="blurry"></div>
        </div>
        <div class="dialogueView" ref="scrollableDiv" @scroll="onScroll">
          <div class="chatDialogue">
            <div class="chatContent">
              <Message
                  v-for="(item, index) in chatInfo"
                  :key="index"
                  :chatInfo="item"
                  @setTextarea="setTextarea"
                  @restSend="restSend"
                  @delChatInfo="delChatInfo(item, index)"
                  @send="send"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="blurryWrap">
        <div class="blurry" v-if="scrollBottom > 1 && scrollTop != 0"></div>
      </div>
      <div>
        <div class="interlocution">
          <div class="btns">
            <div class="btn" @click="newChat">
              <div class="btnImg newChatImg"/>
              <span>新建对话</span>
            </div>
            <div
                class="btn"
                :class="{ btned: historyStatus }"
                style="margin-left: 16px"
                @click="showHistory()"
            >
              <div class="btnImg historyImg" style="width: 24px;height: 24px"/>
              <span>历史对话</span>
            </div>
          </div>
          <div class="chatTextarea">
            <div class="chatScenario" v-show="scenaried != ''">
              <span class="chatScenarioText">{{ scenarioTitle }}</span>
              <span class="exitChatScenario" @click="exitChatScenario"
              >退出场景</span
              >
            </div>
            <el-input
                v-model="textarea"
                :rows="1"
                :class="{ noPlaceholder: noPlaceholder }"
                :autosize="{ maxRows: 6 }"
                type="textarea"
                :placeholder="
                placeholder != ''
                  ? placeholder
                  : '请输入你想提的问题，字数不能超过1000字'
              "
                @keydown.enter="keyDown"
            />
            <div class="chatOperates">
              <div class="chatOperatesLeft">
                <div :class="isDeepThink?'deep-think deep-think-active':'deep-think'" @click="changeDeepThinkStatus()">
                  <img src="@/assets/images/chat/deepThink.png" v-show="!isDeepThink" alt="">
                  <img src="@/assets/images/chat/deepThinkActive.png" v-show="isDeepThink" alt="">
                  <span>DeepSeek-R1</span>
                </div>
              </div>
              <div class="chatOperatesRight">
                <el-upload
                    v-model:file-list="fileList"
                    class="upload-demo"
                    :action="`${baseURL}/gpt/file/upload/temp_knowledgeBase`"
                    :before-upload="beforeAvatarUpload"
                    :headers= generateAuthInfo()
                    accept=".xlsx, .xls, .doc, .pdf, .md, .docx,.png,.jpg"
                    name="files"
                    :data="{ chatNumber }"
                    :on-success="handleAvatarSuccess"
                    :on-error="handleAvatarError"
                    :show-file-list="false"

                >
                  <img
                      src="../../assets/images/chat/file.png"
                      class="fileImg"
                      alt=""
                  />
                </el-upload>

                <div
                    class="sendBtn"
                    :class="{ notAllowed: !notAllowed }"
                    @click="debounce(() => { send(); })"
                    v-show="!sendStatus"

                >
                  <img
                      src="../../assets/images/chat/send.png"
                      class="sendImg"
                      alt=""
                      v-show="!notAllowed"
                  />
                  <img
                      src="../../assets/images/chat/sendWhite.png"
                      class="sendImg"
                      alt=""
                      v-show="notAllowed"
                  />
                  <span>发送</span>
                </div>
                <div class="stopBtn" @click="handleStop" v-show="sendStatus">
                  <img
                      src="../../assets/images/chat/stopChat.png"
                      class="stopImg"
                      alt=""
                  />
                  <span>停止响应</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          以上内容均由AI生成, 仅供参考和借鉴。©{{
            currentYear
          }}{{ PROJECT_PROPERTIES.projectName }}_浪潮软件科技有限公司
          <!--          <a
                      target="_blank"

                      style="color: #0969da; text-decoration: none"
                      >用户协议</a
                    >
                    |
                    <span class="clicked">隐私政策</span>-->
        </div>
      </div>
    </div>
    <Scenario
        @showScenario="showScenario"
        ref="scenarioRef"
        v-show="scenarioStatus"
        :fetchSmartPromptList="fetchSmartPromptList"
        :scenaried="scenaried"
        @selectScenarioItem="selectScenarioItem"
        @getFetchSmartPrompt="getFetchSmartPrompt"
        :chatType="chatType"
        :isDeepThink="isDeepThink"
        @changeDeepThinkStatus="changeDeepThinkStatus"
    />
  </div>
</template>

<script setup lang="ts">
import {nextTick, onMounted, onUnmounted, reactive, ref, watch,} from "vue";
import {
  deleteChatMessageById,
  delHistoryChatById,
  editHistoryChatTitleById,
  fetchChatAPI,
  fetchConversationId,
  fetchSmartPrompt,
  interrupt,
  getTitle
} from "@/api";
import Message from "@/components/Message.vue";
import ChatHistory from "@/components/ChatHistory.vue";
import Scenario from "./Scenario.vue";
import type {UploadProps, UploadUserFile} from "element-plus";
import {ElMessage} from "element-plus";
import {useAuthStore} from "@/store";
import {PROJECT_PROPERTIES} from "@/config/properties";
import {debounce, streamResultVerify} from "@/utils";
import {generateAuthInfo} from "@/utils/request/headerUtils";
import {useRoute} from "vue-router";

const route = useRoute();
// 对话输入框
const textarea = ref<string>("");

//是否在对话中
const chatStatus = ref<boolean>(false);

//历史记录展示
const historyStatus = ref<boolean>(false);

//场景模块展示
const scenarioStatus = ref<boolean>(false);

//当前对话是否为第一条消息
const firstChat = ref(true);

// 对话类型，0：普通对话  1：文件对话
const chatType = ref(0);

const chatNumber = ref("");
const conversationId = ref("");

// 对话内容
const chatInfo = ref([]);

// 上传文件时禁止发送
const notAllowed = ref(false);

const noPlaceholder = ref(false);

const changePlaceholder = (val) => {
  noPlaceholder.value = val;
};

// text提示语
const placeholder = ref("请输入你想提的问题，字数不能超过1000字");

// 发送,停止响应切换
const sendStatus = ref<boolean>(false);

const baseURL = import.meta.env.VITE_GLOB_API_CTX;

// 选择的场景key
const scenaried = ref("");

// 对话标题
const chatTitle = ref("未命名");

// 场景value
const scenarioTitle = ref("");

// 对话id
const chatId = ref(-1);

// 文件内容
const fileContext = ref("");

// 标题是否在修改中
const changeTitleStatus = ref(false);

const knowledgeId = ref("");

// 文件名
const fileName = ref("");

// 当前年份
const currentYear = ref("");

let controller = null;

// 历史记录
const chatHistory = ref(null);

// 删除某条对话
const delChatInfo = async (item, index) => {
  try {
    await deleteChatMessageById(item.user.conversationId);
    chatInfo.value.splice(index, 1);
  } catch (error: any) {
    ElMessage.error(error && error.message ? error.message : '未知错误');
  }
};

// 查看历史对话
const viewHistory = (data) => {
  chatInfo.value = [];
  firstChat.value = false;
  chatStatus.value = true;
  chatType.value = data.chatType;
  chatTitle.value = data.chatTitle;
  scenaried.value = data.scenaried;
  placeholder.value = data.placeholder;
  chatId.value = data.chatId;
  scenarioTitle.value = data.scenarioTitle;
  chatNumber.value = data.chatNumber;
  let chatInfoBack = [...data.chatInfo];
  let info = {};
  if (data.chatType === 1) {
    fileName.value = data.fileName;
    knowledgeId.value = data.knowledgeId;
    fileContext.value = data.fileContext;

    const suffix = data.fileName.match(/[^.]+$/)[0];
    info = {
      user: {content: data.fileName, suffix},
    };
    chatInfo.value.push(info);
    chatInfoBack.shift();
  }
  for (let i = 0; i < chatInfoBack.length;) {
    let index = chatInfoBack[i + 1].content.indexOf("**参考文献:**");
    let aiStrDoc = "";
    let aisStr = "";
    if (
        chatInfoBack[i + 1].content &&
        chatInfoBack[i + 1].content.indexOf("**参考文献:**") != -1
    ) {
      aiStrDoc = chatInfoBack[i + 1].content.substring(index + 9);
      aisStr =
          chatInfoBack[i + 1].content.substring(0, index + 9) +
          `<div class="docs">\n${aiStrDoc}</div>`;
    } else {
      aisStr = chatInfoBack[i + 1].content;
    }
    info = {
      user: {
        content: chatInfoBack[i].content,
        conversationId: chatInfoBack[i].messageId,
      },
      ai: { content: aisStr, thinkContent: chatInfoBack[i + 1].think},
    };
    chatInfo.value.push(info);
    i = i + 2;
  }
};

// 更新历史对话名称
const updateHistoryTitle = (data) => {
  if (chatId.value === data.id) {
    chatTitle.value = data.prompt;
  }
};

// 重新发送
const restSend = (text) => {
  textarea.value = text;
  send();
};

// 修改对话标题
const changeTtile = async () => {
  if (chatTitle.value.trim() === "") {
    ElMessage.warning("对话名称不可以为空！");
    return;
  }
  try {
    let res = await editHistoryChatTitleById({
      id: chatId.value,
      prompt: chatTitle.value,
    });
    if (res && res.code === 200) {
      ElMessage.success("修改成功");

      if (historyStatus.value) {
        chatHistory.value.getHistoryList();
      }
      changeTitleStatus.value = false;
      return;
    }

    ElMessage.error("修改失败");
  } catch (error: any) {
    ElMessage.error(error && error.message ? error.message : '未知错误');
  }
};

// 设置输入框的值
const setTextarea = (text) => {
  textarea.value = text;
};

// 删除对话
const delChat = async () => {
  try {
    let res = await delHistoryChatById(chatId.value);
    if (res && res.code === 200) {
      ElMessage.success("删除成功");

      if (historyStatus.value) {
        chatHistory.value.getHistoryList();
      }
      newChat();
      return;
    }

    ElMessage.error("删除失败");
  } catch (error: any) {
    ElMessage.error(error && error.message ? error.message : '未知错误');
  }
};

// 场景选择
const selectScenarioItem = (item) => {
  if (isDeepThink.value) {
    ElMessage.warning("您已选择智慧场景，已为您取消深度思考");
    changeDeepThinkStatus(false);
  }
  scenaried.value = item.name;
  scenarioTitle.value = item.title;
  placeholder.value = item.prompt;
};

// 停止响应
const handleStop = async () => {
  controller.abort();
  controller = null;
  const content = chatInfo.value[chatInfo.value.length - 1].ai.content;
  let messageData = {
    messageId: conversationId.value,
    content,
  };
  try {
    await interrupt(messageData);
  } catch (error: any) {
    ElMessage.warn('响应已停止');
  }
  if (
      chatInfo.value[chatInfo.value.length - 1].ai.content == "" ||
      chatInfo.value[chatInfo.value.length - 1].ai.content == "思考中..."
  ) {
    chatInfo.value[chatInfo.value.length - 1].ai.content = "已停止响应";
  }

  sendStatus.value = false;
};

// 退出场景
const exitChatScenario = () => {
  scenaried.value = "";
  scenarioTitle.value = "";
  placeholder.value = "请输入你想提的问题，字数不能超过1000字";
};

// 场景列表
let fetchSmartPromptList = ref([]);

//场景列表备份
let fetchSmartPromptListBack = ref([]);

//文件列表
const fileList = ref<UploadUserFile[]>([]);

// 上传文件
const beforeAvatarUpload: UploadProps["beforeUpload"] = async (rawFile) => {
  if (scenaried.value) {
    ElMessage.warning("您正在进行文件对话，已退出智慧场景。");
  }
  if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error("文件大小不能超过10M");
    return false;
  }
  notAllowed.value = true;
  const suffix = rawFile.name.match(/[^.]+$/)[0];

  newChat();

  // chatTitle.value = rawFile.name;

  chatType.value = 1;

  scenaried.value = "";
  scenarioTitle.value = "";
  placeholder.value = "请输入你想提的问题，字数不能超过1000字";

  if (firstChat.value) {
    await getFetchChatAPI(rawFile.name);
  }

  const info = reactive({
    user: {content: rawFile.name, suffix},
  });

  chatInfo.value.push(info);

  return true;
};

// 文件上传成功
const handleAvatarSuccess: UploadProps["onSuccess"] = (
    response,
    uploadFile
) => {
  response.data.data.context.length > 30000
      ? (fileContext.value = response.data.data.summary)
      : (fileContext.value = response.data.data.context);
  knowledgeId.value = response.data.data.id;
  fileName.value = response.fileName;
  firstChat.value ? (firstChat.value = false) : "";
  notAllowed.value = false;
};

// 上传失败
const handleAvatarError: UploadProps["onError"] = (error) => {
  chatType.value = 0;
  ElMessage.error(error);
};

// 新建对话
const newChat = () => {
  firstChat.value = true;
  chatStatus.value = true;
  chatTitle.value = "未命名";
  chatType.value = 0;
  sendStatus.value = false;
  chatInfo.value = [];
};

onUnmounted(() => {
  if (controller) {
    controller.abort();
  }

  // 销毁全局的回车事件
  //window.removeEventListener("keydown", keyDown, false);
});

// 获取场景
const getFetchSmartPrompt = async () => {
  try {
    const res = await fetchSmartPrompt();
    fetchSmartPromptList.value = [];
    fetchSmartPromptListBack.value = [];
    let k = 0;
    for (let i in res.data.llm_chat) {
      for (let m in res.data.llm_chat[i].prompt) {
        fetchSmartPromptList.value.push(res.data.llm_chat[i].prompt[m]);
        if (k < 3) {
          fetchSmartPromptListBack.value.push(res.data.llm_chat[i].prompt[m]);
        }
        k++;
      }
    }
  } catch (error: any) {
    ElMessage.error(error && error.message ? error.message : '未知错误');
  }
};

watch(() => route.path, async (newValue, oldValue) => {
  if (newValue !== oldValue && newValue === '/index') {
    window.location.reload();
  }
  if (newValue !== oldValue && newValue === '/chat') {
    newChat();
  }
})

// 获取对话 chatNumber  chatId，promt是对话
const getFetchChatAPI = async (prompt) => {
  const chatData = {
    prompt,
    type: chatType.value,
  };
  try {
    const fetchChatAPIData = await fetchChatAPI(chatData);
    chatNumber.value = fetchChatAPIData.data.chatNumber;
    chatId.value = fetchChatAPIData.data.id;
  } catch (error: any) {
    ElMessage.error(error && error.message ? error.message : '未知错误');
  }
};
const autoScroll = ref(true);

//根据所写的问题获取conversationId
const getFetchConversationId = async (prompt) => {
  let model = isDeepThink.value ? 'R1-70B' : 'QIANWEN'
  const messageData = {
    chatNumber: chatNumber.value,
    prompt,
    model: model,
    promptName: scenaried.value != "" ? scenaried.value : "default",
    promptTitle: scenarioTitle.value != "" ? scenarioTitle.value : "default",
    promptPrompt: placeholder.value,
    chatId: chatId.value,
  };
  try {
    const fetchConversationIdData = await fetchConversationId(messageData);
    conversationId.value = fetchConversationIdData.data;
  } catch (error: any) {
    ElMessage.error(error && error.message ? error.message : '未知错误');
  }
};
// 对话，流式对话
const getFetchChatAPIProcess = async () => {
  const info = reactive({
    user: { content: textarea.value.trim(), conversationId: "" },
    ai: { content: "", question: [], contentStatus: false, thinkContent: '' },
  });
  chatInfo.value.push(info);
  textarea.value = "";
  let aiQuestion = ``;
  if (!controller) {
    controller = new AbortController();
  }
  if (chatType.value === 0) {
    const response = await fetch(
        `${baseURL}/app/chat/stream?conversationId=${
            conversationId.value
        }&promptName=${scenaried.value != "" ? scenaried.value : "default"}`,
        {
          method: "GET",
          headers: {
            Accept: "text/plain",
            Authorization: `Bearer ${useAuthStore().token}`
          },
          signal: controller.signal,
        }
    );

    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    let done = false;
    let result = "";
    let picTemp = false;
    // 逐块读取流数据
    while (!done) {
      const {value, done: doneReading} = await reader.read();
      done = doneReading;
      result += decoder.decode(value, {stream: true});
      // 校验token是否失效
      streamResultVerify(result);
      // 分割数据并逐条展示
      const lines = result.split("\n");
      for (let i = 0; i < lines.length - 1; i++) {
        let lineObj = JSON.parse(lines[i]);
        if (
            !info.user.conversationId ||
            info.user.conversationId != lineObj.conversationId
        ) {
          info.user.conversationId = lineObj.conversationId;
        }
        if (lineObj.question) {
          aiQuestion = lineObj.question;
        } else if (lineObj.think) {
          info.ai.thinkContent += lineObj.think;
        } else if (lineObj.text) {
          let index = info.ai.content.indexOf("思考中...");
          if (index != -1) {
            let text = info.ai.content.substring(0, index);
            info.ai.content = text;
          }
          if (info.ai.content.indexOf(".png)") != -1 && info.ai.content.indexOf("http") != -1) {
            info.ai.content = info.ai.content.replace("(http", "http");
            info.ai.content = info.ai.content.replace(".png)", ".png");

            picTemp = true;
          }
          info.ai.content += lineObj.text;
        } else if (lineObj.docs) {
          info.ai.content += `\n**参考文献:**`;
          info.ai.content += `<div class="docs">\n${lineObj.docs}</div>`;
        }
      }
      // 保留最后一块数据，等待下一次读取
      result = lines[lines.length - 1];
      // 自动滚动到最新位置
    }
    if (picTemp) {
      info.ai.content = info.ai.content.replace("http", "(http");
      info.ai.content = info.ai.content.replace(".png", ".png)");
    }
    aiQuestion=aiQuestion.replace(/\n\n/g, "<strip>");
     let questionArr = aiQuestion.split('<strip>');
    for (let i = 0; i < questionArr.length; i++) {
      if(questionArr[i].trim()){
        let start = questionArr[i].indexOf(":");
        info.ai.question.push(questionArr[i].slice(start + 1).trim());
      }
    }
  } else {
    // 文件对话
    const response = await fetch(`${baseURL}/gpt/file/fileTalk`, {
      method: "POST",
      headers: {
        Accept: "text/plain",
        Authorization: `Bearer ${useAuthStore().token}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        conversationId: conversationId.value,
        knowledgeId: knowledgeId.value,
        fileName: fileName.value,
        context: fileContext.value,
      }),
      signal: controller.signal,
    });

    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    let done = false;
    let result = "";

    // 逐块读取流数据
    while (!done) {
      const {value, done: doneReading} = await reader.read();
      done = doneReading;
      result += decoder.decode(value, {stream: true});
      // 校验token是否失效
      streamResultVerify(result);
      // 分割数据并逐条展示
      const lines = result.split("\n");
      for (let i = 0; i < lines.length - 1; i++) {
        let lineObj = JSON.parse(lines[i]);
        if (
            !info.user.conversationId ||
            info.user.conversationId != lineObj.conversationId
        ) {
          info.user.conversationId = lineObj.conversationId;
        }
        if (lineObj.question) {
          aiQuestion = lineObj.question;
        } else if (lineObj.answer) {
          let index = info.ai.content.indexOf("思考中...");
          if (index != -1) {
            let text = info.ai.content.substring(0, index);
            info.ai.content = text;
          }
          info.ai.content += lineObj.answer;
        } else if (lineObj.docs) {
          info.ai.content += `\n**参考文献:**`;
          info.ai.content += `<div class="docs">\n${lineObj.docs}</div>`;
        }
      }
      // 保留最后一块数据，等待下一次读取
      result = lines[lines.length - 1];
    }
    aiQuestion=aiQuestion.replace(/\n\n/g, "<strip>");
    let questionArr = aiQuestion.split(`<strip>`);
    for (let i = 0; i < questionArr.length; i++) {
      if(questionArr[i].trim()){
        let start = questionArr[i].indexOf(":");
        info.ai.question.push(questionArr[i].slice(start + 1).trim());
      }
    }
  }
};
// 发送消息
let send = async () => {
  if (textarea.value.trim() === "" || sendStatus.value) {
    return;
  }
  autoScroll.value = true;
  sendStatus.value = true;

  if (chatInfo.value.length > 0 && chatType.value === 0) {
    chatInfo.value[chatInfo.value.length - 1].ai.question = [];
  }
  //如果是第一次创建对话，先获取对话的id，chatNumber，并且刷新历史记录
  if (firstChat.value) {
    await getFetchChatAPI(textarea.value.trim());
    if (historyStatus.value) {
      chatHistory.value.getHistoryList(false);
    }
  }
  //获取conversationId
  await getFetchConversationId(textarea.value.trim());

  if (!chatStatus.value) {
    chatStatus.value = true;
  }

  //流式会话
  await getFetchChatAPIProcess();
  firstChat.value ? (firstChat.value = false) : "";
  sendStatus.value = false;

  // 获取对话名称
  await createTitle();
  // 刷新历史记录
  if (historyStatus.value) {
    chatHistory.value.getHistoryList(false);
  }
};

/**
 * 根据对话获取对话名称
 */
const createTitle = async () => {
  if (chatTitle.value !== "未命名" ) return;

  let firstChat;
  if (chatType.value === 0 ) {
    if (chatInfo.value.length !== 1) return;
    firstChat = chatInfo.value[0];
  } else {
    if (chatInfo.value.length !== 2) return;
    firstChat = chatInfo.value[1];
  }

  let params = {
    conversation_id: chatNumber.value,
    history: [
      {
        role: 'user',
        content: firstChat.user.content,
      }, {
        role: "assistant",
        content: firstChat.ai.content
      }
    ]
  }

  try {
    let res = await getTitle(params);
    if (res && res.code === 200) {
      chatTitle.value = res.data.title;
    }
  } catch (error: any) {
    ElMessage.error(error && error.message ? error.message : '未知错误');
  }
}

/**
 * 发送按钮的回车事件
 */
let keyDown = (e) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    if (!sendStatus.value) {
      debounce(() => {
        send();
      });
    }
  }
};

/**
 * 控制历史对话框的显隐
 */
function showHistory() {
  if (historyStatus.value) {
    historyStatus.value = false;
  } else {
    historyStatus.value = true;
  }
}

// 展示场景
function showScenario(status) {
  scenarioStatus.value = status;
}

const widthChat = ref(0);

// 使用 ref 定义响应式变量
const chatDiv = ref<HTMLElement | null>(null);
// 计算右边距函数
const calculateRightMargin = () => {
  if (chatDiv.value) {
    const rect = chatDiv.value.getBoundingClientRect();
    const viewportWidth = window.innerWidth;
    widthChat.value = viewportWidth - rect.left - 1;
  } else {
    console.warn("元素未挂载或未找到");
  }
};

const scrollableDiv = ref<HTMLDivElement | null>(null);
const scrollTop = ref<number>(0);
const scrollBottom = ref<number>(0);

const onScroll = () => {
  if (scrollableDiv.value) {
    if (scrollBottom.value > 1 && scrollTop.value != 0) {
      autoScroll.value = false;
    }

    scrollTop.value = scrollableDiv.value.scrollTop;
    scrollBottom.value =
        scrollableDiv.value.scrollHeight -
        scrollableDiv.value.scrollTop -
        scrollableDiv.value.clientHeight;
  }
};
const scrollToBottom = () => {
  if (scrollableDiv.value) {
    scrollableDiv.value.scrollTop = scrollableDiv.value.scrollHeight;
  }
};

/**
 * 深度思考
 */
const isDeepThink = ref<boolean>(false);
const changeDeepThinkStatus = (status: boolean = !isDeepThink.value) => {
  if (scenaried.value && status) {
    ElMessage.warning("您已选择深度思考，为您自动退出智慧场景。");
    scenaried.value = "";
    scenarioTitle.value = "";
    placeholder.value = "请输入你想提的问题，字数不能超过1000字";
  }
  isDeepThink.value = status;
}

watch(
    chatInfo,
    () => {
      if (autoScroll.value) {
        nextTick(() => {
          scrollToBottom();
        });
      }
    },
    {deep: true}
);

watch(
    [historyStatus, scenarioStatus],
    () => {
      nextTick(() => {
        calculateRightMargin();
      });
    },
    {immediate: true}
);

watch(textarea, (newValue) => {
  if (newValue.trim() === "") {
    notAllowed.value = false;
  } else {
    notAllowed.value = true;
  }
});

onMounted(() => {
  getFetchSmartPrompt();
  nextTick(() => {
    onScroll(); // 初始化时调用一次以设置初始值
  });
  window.addEventListener("resize", calculateRightMargin);
  // 获取当前年份
  currentYear.value = new Date().getFullYear();

  // 添加全局回车事件
  // window.addEventListener("keydown", keyDown);
});
</script>

<style lang="scss" scoped>
.chat {
  display: flex;
  flex: 1;
  height: 100vh;

  .scenarioBtn {
    width: 96px;
    height: 42px;
    background: #fafbff;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #d5ddff;
    position: absolute;
    right: 32px;
    top: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .scenarioImg {
      width: 24px;
      height: 20px;
    }

    .scenarioText {
      margin-left: 8px;
      font-weight: 400;
      font-size: 16px;
      color: #004ea0;
      line-height: 30px;
    }
  }

  .chatAll {
    margin: 0 auto;
    width: 49.479vw;
    max-width: 950px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    // .contentWrap {
    //   // z-index: 9999;
    //   margin-top: 19.46vh;
    //   overflow-y: auto;
    // }
    .content {
      // width: 100%;
      // width: 49.479vw;
      overflow-y: auto;
      margin-top: 19.46vh;
      position: relative;

      .title {
        font-weight: bold;
        font-family: "PingFangSC-Bold";
        font-size: 52px;
        color: #000000;
        line-height: 58px;

        .titleHead {
          color: #004ea0;
        }
      }

      .titleInfo {
        margin-top: 16px;
        font-weight: 400;
        font-size: 20px;
        color: #000000;
        line-height: 30px;
        text-align: left;
      }

      .operate {
        display: flex;
        margin-top: 40px;
        width: 100%;

        .scenario {
          display: flex;
          flex-direction: column;
          height: 292px;
          width: calc(100% - 262px);
          flex: 1;
          justify-content: space-between;

          .scenarioItem {
            img {
              width: 7px;
              height: 14px;
            }

            cursor: pointer;
            width: 100%;
            height: 84px;
            background: #e6edff;
            border-radius: 8px 8px 8px 8px;
            border: 1px solid #fafbff;
            padding-left: 20px;
            padding-right: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .scenarioItemContainer {
              width: calc(100% - 10px);

              .scenarioItemTitle {
                font-weight: bold;
                font-family: "PingFangSC-Bold";
                font-size: 18px;
                color: #000000;
                line-height: 30px;
              }

              .scenarioItemInfo {
                font-weight: 400;
                font-size: 16px;
                color: #858a94;
                line-height: 30px;
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }

        .carousel {
          width: 262px;
          height: 292px;
          margin-left: 20px;

          .carouselImg {
            cursor: pointer;
            width: 100%;
            height: 100%;
          }

          ::v-deep .el-carousel__button {
            width: 10px;
          }

          ::v-deep .el-carousel__indicators .el-carousel__indicator.is-active {
            .el-carousel__button {
              background-color: #004ea0;
            }
          }
        }
      }
    }

    .content::-webkit-scrollbar {
      width: 0; /* 隐藏滚动条 */
      background: transparent; /* 保持背景透明 */
    }

    /* 针对Firefox */
    .content {
      scrollbar-width: none; /* 隐藏滚动条 */
    }

    .blurryWrap {
      height: 30px;
      width: 49.479vw;
      max-width: 950px;
      position: relative;

      .blurry {
        height: 20px;
        width: 100%;
        position: absolute;
        top: -20px;
        // background-color: #edf2ffcc; /* 半透明背景 */
        background: linear-gradient(
                to top,
                #edf2ff 0%,
                rgba(255, 255, 255, 0) 100%
        );
        z-index: 10;
        pointer-events: none;
        // border-top-left-radius: 5px;
        // border-top-right-radius: 5px;
      }
    }

    .dialogue {
      display: flex;
      flex-direction: column;
      flex: 1;
      // margin-bottom: 41px;
      overflow-y: auto;

      .blurryWrap {
        height: 1px;
        width: 49.479vw;
        max-width: 950px;
        position: relative;

        .blurry {
          height: 20px;
          width: 100%;
          position: absolute;
          top: 40px;
          // background-color: #edf2ffcc; /* 半透明背景 */
          background: linear-gradient(
                  to top,
                  rgba(255, 255, 255, 0) 0%,
                  #edf2ff 100%
          );
          z-index: 10;
          pointer-events: none;
          // border-top-left-radius: 5px;
          // border-top-right-radius: 5px;
        }
      }

      .fixedTop {
        width: 49.479vw;
        max-width: 950px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 23px;
        height: 25px;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        line-height: 30px;

        .el-input {
          margin-right: 12px;
          width: 200px;
        }

        .chatTitle {
          margin-right: 12px;
          max-width: 250px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: center;
        }

        .selectImg {
          width: 8px;
          height: 4px;
          cursor: pointer;
        }

        :focus-visible {
          outline: none !important;
        }
      }

      .dialogueView {
        margin-top: 42px;
        height: calc(100% - 48px);
        width: 100%;
        overflow-y: auto;

        .chatDialogue {
          height: 100%;
          width: 49.479vw;
          max-width: 950px;

          .chatContent {
            width: 100%;
          }
        }
      }
    }

    .interlocution {
      width: 100%;
      margin-bottom: 16px;

      // z-index: 99999;
      .btns {
        display: flex;

        .btn {
          width: 124px;
          height: 42px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          background: #ffffff;
          border-radius: 8px;
          border: 1px solid #d5ddff;
          font-weight: 400;
          font-size: 16px;
          color: #858a94;
          line-height: 30px;

          .btnImg {
            width: 20px;
            height: 20px;
            margin-right: 8px;
          }

          .newChatImg {
            background: url("../../assets/images/chat/newChat.png") no-repeat center;
            background-size: 100%;
          }

          .historyImg {
            background: url("../../assets/images/chat/history.png") no-repeat center;
            background-size: 100%;
          }
        }

        .btn:hover {
          border: 1px solid #004ea0;
          color: #004ea0;

          .newChatImg {
            background: url("../../assets/images/chat/newChated.png") no-repeat center;
            background-size: 100%;
          }

          .historyImg {
            background: url("../../assets/images/chat/historyed.png") no-repeat center;
            background-size: 100%;
          }
        }

        .btned {
          border: 1px solid #004ea0;
          color: #004ea0;

          .newChatImg {
            background: url("../../assets/images/chat/newChated.png") no-repeat center;
            background-size: 100%;
          }

          .historyImg {
            background: url("../../assets/images/chat/historyed.png") no-repeat center;
            background-size: 100%;
          }
        }
      }

      .chatTextarea {
        width: 100%;
        // height: 104px;
        margin-top: 16px;
        padding-bottom: 16px;
        background: #ffffff;
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #d5ddff;

        .el-textarea {
          font-weight: 400;
          font-size: 18px;
          color: #858a94;
          line-height: 30px;
        }

        .chatScenario {
          width: 100%;
          height: 49px;
          background: #d5ddff;
          padding-left: 16px;
          padding-right: 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .chatScenarioText {
            font-weight: bold;
            font-family: "PingFangSC-Bold";
            font-size: 18px;
            color: #004ea0;
            line-height: 30px;
          }

          .exitChatScenario {
            cursor: pointer;
            font-weight: 400;
            font-size: 16px;
            color: #858a94;
            line-height: 30px;
          }

          .exitChatScenario:hover {
            color: #004ea0;
          }
        }

        ::v-deep .el-textarea__inner {
          width: 100%;
          /* height: 53px !important;*/
          min-height: 53px !important;
          outline: none;
          border: none;
          resize: none;
          box-shadow: none;
          background: #ffffff;
          color: #000000;
          padding-left: 16px;
          padding-right: 16px;
          padding-top: 16px;
          padding-bottom: 10px;
        }

        .chatOperates {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .chatOperatesLeft {
            padding-left: 16px;
            .deep-think {
              width: 108px;
              height: 28px;
              background: #E6EDFF;
              border-radius: 14px 14px 14px 14px;
              border: 1px solid #D5DDFF;
              font-size: 12px;
              color: #858A94;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              img {
                width: 12px;
                margin-right: 3px;
              }
            }
            .deep-think-active {
              background: #E6EDFF;
              border: 1px solid #004ea0;
              color: #004ea0;
            }
          }
          .chatOperatesRight {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-left: 16px;
            padding-right: 16px;

            .fileImg {
              height: 28px;
              margin-right: 16px;
            }

            .sendBtn {
              width: 92px;
              height: 38px;
              cursor: pointer;
              background: #004ea0;
              border-radius: 22px 22px 22px 22px;
              border: 1px solid #004ea0;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 400;
              font-size: 16px;
              color: #fafbff;
              line-height: 30px;

              .sendImg {
                margin-right: 8px;
                width: 20px;
                height: 18.53px;
              }
            }

            .notAllowed {
              cursor: default !important;
              background: #ffffff !important;
              color: #858a94 !important;
              border: 1px solid #858a94 !important;
            }

            .stopBtn {
              width: 120px;
              height: 38px;
              cursor: pointer;
              background: #ffffff;
              border-radius: 22px 22px 22px 22px;
              border: 1px solid #004ea0;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 400;
              font-size: 16px;
              color: #004ea0;
              line-height: 30px;

              .stopImg {
                margin-right: 8px;
                width: 20px;
                height: 18.53px;
              }
            }
          }
        }
      }
    }

    .footer {
      width: 100%;
      text-align: right;
      margin-bottom: 16px;
      font-weight: 400;
      font-size: 14px;
      color: #b9b9b9;
      line-height: 30px;

      .clicked {
        color: #004ea0;
      }
    }
  }

  .noPlaceholder {
    ::v-deep .el-textarea__inner::placeholder {
      color: transparent !important;
      /* 或者 rgba(0, 0, 0, 0) */
    }
  }
}
</style>