<template>
  <div class="chat-container">
    <!-- 聊天区域 -->
    <div class="chat-main">
      <!-- 聊天记录 -->
      <div class="chat-messages" ref="messageContainer">
        <div
          v-for="(message, index) in chatHistory"
          :key="index"
          :class="['message', message.role]"
        >
          <div class="message-avatar">
            <a-avatar :src="message.role === 'user' ? userAvatar : aiAvatar" />
          </div>
          <div class="message-content">
            <v-md-preview :text="message.content" />
            <div class="message-time">{{ message.time }}</div>
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="chat-input-area">
        <v-md-editor v-model="inputContent" height="150px" @save="handleSend" />
        <div class="input-actions">
          <a-button type="primary" :loading="loading" @click="handleSend"
            >发送</a-button
          >
          <a-button @click="clearChat">清空对话</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, nextTick } from "vue";
import VMdEditor from "@kangc/v-md-editor";
import VMdPreview from "@kangc/v-md-editor/lib/preview";
import "@kangc/v-md-editor/lib/style/base-editor.css";
import "@kangc/v-md-editor/lib/theme/style/github.css";
import githubTheme from "@kangc/v-md-editor/lib/theme/github.js";
import { searchKnowledgeBase, getAIResponse } from "@/api";

VMdEditor.use(githubTheme);
VMdPreview.use(githubTheme);

export default {
  name: "CompetitionAssistant",
  components: {
    VMdEditor,
    VMdPreview,
  },
  setup() {
    const inputContent = ref("");
    const loading = ref(false);
    const chatHistory = ref([]);
    const messageContainer = ref(null);
    const searchQuery = ref("");
    const knowledgeList = ref([]);

    const userAvatar = "path/to/user-avatar.png";
    const aiAvatar = "path/to/ai-avatar.png";

    // 搜索知识库
    const searchKnowledge = async (query) => {
      try {
        const result = await searchKnowledgeBase(query);
        knowledgeList.value = result.data;
      } catch (error) {
        console.error("搜索知识库失败:", error);
      }
    };

    // 选择知识库条目
    const selectKnowledge = (item) => {
      inputContent.value = `参考知识：${item.title}\n\n${inputContent.value}`;
    };

    // 发送消息
    const handleSend = async () => {
      if (!inputContent.value.trim()) return;

      const userMessage = {
        role: "user",
        content: inputContent.value,
        time: new Date().toLocaleTimeString(),
      };

      chatHistory.value.push(userMessage);
      loading.value = true;

      try {
        const response = await getAIResponse({
          message: inputContent.value,
          history: chatHistory.value,
        });

        chatHistory.value.push({
          role: "assistant",
          content: response.data,
          time: new Date().toLocaleTimeString(),
        });

        inputContent.value = "";
        scrollToBottom();
      } catch (error) {
        console.error("获取AI响应失败:", error);
      } finally {
        loading.value = false;
      }
    };

    // 滚动到底部
    const scrollToBottom = async () => {
      await nextTick();
      if (messageContainer.value) {
        messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
      }
    };

    // 清空对话
    const clearChat = () => {
      chatHistory.value = [];
    };

    onMounted(() => {
      searchKnowledge("");
    });

    return {
      inputContent,
      loading,
      chatHistory,
      messageContainer,
      searchQuery,
      knowledgeList,
      userAvatar,
      aiAvatar,
      handleSend,
      clearChat,
      searchKnowledge,
      selectKnowledge,
    };
  },
};
</script>

<style scoped>
.chat-container {
  display: flex;
  height: calc(100vh - 64px);
  background: #fff;
}

.knowledge-panel {
  width: 300px;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.knowledge-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.message {
  display: flex;
  margin-bottom: 24px;
  gap: 12px;
}

.message.assistant {
  background: #f7f7f8;
  border-radius: 8px;
  padding: 16px;
}

.message-content {
  flex: 1;
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.chat-input-area {
  border-top: 1px solid #e8e8e8;
  padding: 16px;
}

.input-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
</style>
