import LoginModal from "@/components/LoginModal";
import MarkdownIt from "markdown-it";
import { pcInnerAi } from "@/api/api";
const md = new MarkdownIt();

export default {
  components: {
    LoginModal,
  },
  data() {
    return {
      isThinking: false,
      thinkingDots: '',
      messages: [
        {
          user: "bot",
          messageType: "TEXT",
          message: "欢迎使用轻良智能AI助理",
          html: "",
          time: "",
          done: true,
        },
      ],
      generating: false,
      userInput: "",
      websocket: null,
      wsUrl:'http://58.246.234.210:7860/api/v1/run/2f1faff2-99df-4821-87d6-43d693084c4b?stream=false',
      tweaks:{},
      showLoginModal: false,
      isLoggedIn: false, // 添加登录状态标志
    };
  },
  created() {
   // this.connectWebSocket();
  },
  mounted() {
    if(this.$route.name=='ai'){
      /* 外部知识库 */
      const AIData=JSON.parse(localStorage.getItem("AIData"))
      this.wsUrl=AIData.data.url
      this.tweaks=AIData.data.tweaks
    }else{
      /* 内部知识库 */
      pcInnerAi().then(res=>{
        if(res.status!==200) return
        this.wsUrl=res.data.url
        this.tweaks=res.data.tweaks
        
      })
      
    }
  },
  methods: {
    handleLoginSuccess() {
      this.showLoginModal = false;
      this.isLoggedIn = true;
      // 登录成功后，可以继续发送消息
      this.sendMessage();
    },
    getUuid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );
    },
    connectWebSocket() {
      const wsUrl = 'http://58.246.234.210:7860/api/v1/run/2f1faff2-99df-4821-87d6-43d693084c4b?stream=false'
      // 这里做一个简单的鉴权，只有符合条件的鉴权才能握手成功
      // 移除这里的fetch调用，改用WebSocket
      this.websocket = new WebSocket(wsUrl);
    
     /*  this.websocket.onerror = (event) => {
        console.error("WebSocket 连接错误:", event);
      };
     */
      this.websocket.onclose = (event) => {
        console.log("WebSocket 连接关闭:", event);
      };
    
      this.websocket.onopen = (event) => {
        console.log("WebSocket 连接已建立:", event);
      };
      this.websocket.onmessage = (event) => {
        // 解析收到的消息
        const result = JSON.parse(event.data);

       

        // 检查消息是否完结
        if (result.done) {
          this.messages[this.messages.length - 1].done = true;
          return;
        }

        if (this.messages[this.messages.length - 1].done) {
          // 添加新的消息
          this.messages.push({
            time: Date.now(),
            message: result.content,
            messageType: "TEXT",
            user: "bot",
            done: false,
          });
        } else {
          // 更新最后一条消息
          let lastMessage = this.messages[this.messages.length - 1];
          lastMessage.message += result.content;
          this.messages[this.messages.length - 1] = lastMessage;
        }
      };
    },
    async sendMessage() {
      if(this.$route.name=='ai'){
        if(!localStorage.getItem('AIData')){
          this.showLoginModal=true
          return
        }
      }
      const chatId = this.getUuid();
      const wsUrl =this.wsUrl//'http://58.246.234.210:7860/api/v1/run/2f1faff2-99df-4821-87d6-43d693084c4b?stream=false'
      let message = this.userInput.trim();
      if (message) {
        // Markdown换行：在每个换行符之前添加两个空格
        message = message.replace(/(\r\n|\r|\n)/g, "  \n");

        this.messages.push({
          time: Date.now(),
          message: message,
          messageType: "TEXT",
          user: "user",
          done: true,
        });
        this.userInput = "";
       // 添加机器人的响应消息（初始为空）
       const botMessage = {
        user: "bot",
        messageType: "TEXT",
        message: "",
        html: "",
        time: Date.now(),
        done: false,
      };
      this.messages.push(botMessage);

      // 开始模拟思考
      const thinkingPromise = this.simulateThinking(botMessage);
        // 通过 HTTP 发送消息
        try {
          ///send-message
          const response = await fetch(`${wsUrl}`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              chatId: chatId,
              input_value: message,
              output_type: "chat",
              input_type: "chat",
              tweaks:this.tweaks/*  {
                "ChatInput-dDbhW": {},
              "Prompt-1stgH": {},
              "ChatOutput-b1zWw": {},
              "OllamaModel-5n7vc": {},
              "Milvus-1X7fT": {},
              "OllamaEmbeddings-V29wK": {},
              "Memory-GrHZr": {},
              "ParseData-0dk9n": {}
              } */,
            }),
          });

          if (!response.ok) {
            const errorText = await response.text(); // 获取错误文本
            throw new Error(
              `HTTP error! status: ${response.status}, message: ${errorText}`
            );
          }

          const result = await response.json();
         // 等待思考动画完成
         await thinkingPromise;
          
         this.handleResponse(result, botMessage);
       } catch (error) {
         console.error("Error sending message:", error);
         // 如果发生错误，停止思考动画
         botMessage.done = true;
         botMessage.message = "抱歉，发生了错误，请稍后再试。";
       }
      }
    },
    async simulateThinking(message) {
      this.isThinking = true;
      const thinkingTime = Math.random() * 1000 + 500; // 思考时间为 0.5-1.5 秒
      const dotInterval = 200; // 每 200ms 更新一次点
      
      const updateDots = () => {
        this.thinkingDots += '.';
        if (this.thinkingDots.length > 3) {
          this.thinkingDots = '';
        }
        message.message =  this.thinkingDots;
      };
  
      const intervalId = setInterval(updateDots, dotInterval);
  
      await new Promise(resolve => setTimeout(resolve, thinkingTime));
      
      clearInterval(intervalId);
      this.isThinking = false;
      this.thinkingDots = '';
      message.message = '';
    },
  
    async handleResponse(value, existingMessage) {
      const data = value.outputs[0].outputs[0].results.message;
      
      // 更新现有的消息对象
      existingMessage.messageType = data.text_key;
      existingMessage.time = data.timestamp;
      
      // 移除思考动画
      existingMessage.message = '';
      
      // 开始打字效果
      await this.typeMessage(existingMessage, data.text);
    },
  
    typeMessage(message, fullText) {
      return new Promise(resolve => {
        const delay = 30; // 每个字符之间的延迟时间（毫秒）
        let i = 0;
        
        const typeChar = () => {
          if (i < fullText.length) {
            message.message += fullText[i];
            i++;
            setTimeout(typeChar, delay);
          } else {
            message.done = true;
            resolve();
          }
        };
        
        typeChar();
      });
    },
    renderMarkdown(rawMarkdown) {
      return md.render(rawMarkdown);
    },
    handleKeydown(event) {
      // Check if 'Enter' is pressed without the 'Alt' key
      if (event.key === "Enter" && !(event.shiftKey || event.altKey)) {
        event.preventDefault(); // Prevent the default action to avoid line break in textarea
        this.sendMessage();
      } else if (event.key === "Enter" && event.altKey) {
        // Allow 'Alt + Enter' to insert a newline
        const cursorPosition = event.target.selectionStart;
        const textBeforeCursor = this.userInput.slice(0, cursorPosition);
        const textAfterCursor = this.userInput.slice(cursorPosition);

        // Insert the newline character at the cursor position
        this.userInput = textBeforeCursor + "\n" + textAfterCursor;

        // Move the cursor to the right after the inserted newline
        this.$nextTick(() => {
          event.target.selectionStart = cursorPosition + 1;
          event.target.selectionEnd = cursorPosition + 1;
        });
      }
    },
    beforeDestroy() {
      if (this.websocket) {
        this.websocket.close();
      }
    },
  },
  updated() {
    const messagesContainer = this.$el.querySelector(".messages");
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  },
};
