<template>
  <div style="display: flex;
  height: 100vh;">
    <Menu
        :initial-active="1"
    />
    <div class="qwen-chat">
      <!-- 聊天消息区域 -->
      <div ref="messagesContainer" class="chat-messages">
        <div
            v-for="(msg, index) in messages"
            :key="index"
            :class="['message', msg.role]"
        >
          <div>2025</div>
          <div v-if="msg.role === 'user'" class="bubble">
            {{ msg.content }}
          </div>
          <div v-else-if="msg.role === 'assistant'">
            <div v-if="msg.isKG" class="kg-card">
              <div v-if="msg.content.entities?.length" class="kg-section">
                <h5 style="text-align: left">识别出的实体</h5>
                <div class="entity-list">
                  <span
              v-for="(ent, i) in msg.content.entities"
              :key="i"
              class="entity-tag"
              :class="'tag-' + ent.t"
          >
            {{ ent.n }}<small>({{ ent.t }})</small>
          </span>
                </div>
              </div>

              <div v-if="msg.content.relations?.length" class="kg-section">
                <h5 style="text-align: left">识别出的关系</h5>
                <ul class="relation-list">
                  <li v-for="(rel, i) in msg.content.relations" :key="i">
                    <span class="rel-subject">{{ rel.e1 }}</span>
                    <span class="rel-predicate">— {{ rel.r }} →</span>
                    <span class="rel-object">{{ rel.e2 }}</span>
                  </li>
                </ul>
              </div>

              <div v-if="!msg.content.entities?.length && !msg.content.relations?.length" class="empty-state">
                未提取到有效医学实体或关系。
              </div>
            </div>
            <div v-else class="bubble assistant-text">
              {{ msg.content }}
            </div>
          </div>
        </div>
      </div>
      <!-- 输入区域（Qwen 风格） -->
      <div class="input-area">
      <textarea
          v-model="inputText"
          placeholder="有什么可以帮助您？"
          class="input-box"
          @keyup.enter.exact.prevent="sendMessage"
          rows="1"
      ></textarea>



        <div class="icon-group">
          <img

              src="../assets/upload.png"
              alt="用户头像"
              class="avatar"
              style="margin-left: 10px;cursor:pointer;border-radius: 50%;width: 30px;box-shadow: rgb(0 0 0 / 18%) 0px 2px 8px; "
          >
          <div style="display: flex;align-items: center;">
            <img

                src="../assets/放大.png"
                alt="用户头像"
                class="avatar"
                style="margin-left: 10px;cursor:pointer;width: 15px;margin-right: 26px "
            >
            <button class="send-btn" @click="sendMessage" title="发送">
              发送
            </button>
          </div>

        </div>
      </div>
    </div>
  </div>

</template>

<script>
import Menu from "@/components/Menu.vue";
import axios from "axios";
import {analyze, getAIStatus} from "@/api/builder";
import {qaAnalyze} from "@/api/qa";

export default {
  name: 'QwenChat',
  components: {Menu},
  data() {
    return {
      inputText: '',
      messages: [
        { role: 'assistant', content: '你好！我是图谱构建助手，有什么可以帮你的吗？',isKG:false }
      ],
      status:"wait"
    };
  },
  methods: {
    pollAIStatus() {
      if (this.status !== "wait") return; // 如果已结束，不再继续
      try {
        const data = getAIStatus();
        if (data.status === "ok") {
          this.status = "ok";
        } else if (data.status === "error") {
          this.status = "error";
        } else {
          setTimeout(() => this.pollAIStatus(), 3000);
        }
      } catch (error) {
        console.error("轮询出错:", error);
        this.status = "error";
        alert("查询状态失败，请重试");
      }
    },
    sendMessage() {
      const text = this.inputText.trim();
      if (!text) return;
      let data={
        "text":text
      }
      // this.pollAIStatus()
      // 添加用户消息
      let message={ role: 'user', content: text }
      this.messages.push(message);
      this.inputText = '';
      analyze(data).then(res=>{
        console.log(res)
        let message={ role: 'assistant',
          content: res,entities:res.entities,relations:res.relations,isKG:true }
        this.messages.push(message);
      })
      // qaAnalyze(data).then(res=>{
      //
      // })
    },
    insertPrefix(prefix) {
      this.inputText += prefix;
      this.$nextTick(() => {
        // 自动聚焦到 textarea 末尾（简单处理）
        const el = this.$el.querySelector('.input-box');
        el.focus();
      });
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$refs.messagesContainer;
        if (container) {
          container.scrollTop = container.scrollHeight;
        }
      });
    },
    saveMessage(message) {
      const messages = JSON.parse(localStorage.getItem('messages')) || [];
      messages.push(message); // 将新消息添加到消息数组中
      localStorage.setItem('messages', JSON.stringify(messages));
    },
    loadMessages() {
      const savedMessages = JSON.parse(localStorage.getItem('messages')) || [];
      this.messages = savedMessages; // 加载之前存储的消息
    },
    handleBeforeUnload() {
      localStorage.removeItem('messages');
      // 页面刷新或关闭前，保存所有消息
      console.log("页面刷新或关闭前，保存消息...");
      this.messages.forEach((message) => {
        this.saveMessage(message);
      });
    }
  },
  watch: {
    messages() {
      this.scrollToBottom();
    }
  },

  mounted() {
    this.loadMessages();
    this.scrollToBottom();
      window.addEventListener('beforeunload', this.handleBeforeUnload);
  },

};
</script>

<style scoped>
.qwen-chat {
  flex: 1; overflow: auto;
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0 auto;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #F3F3F3;
}

/* === 消息区域 === */
.chat-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

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

.message.user {
  justify-content: flex-end;
}

.message.assistant {
  justify-content: flex-start;
}

.bubble {
  padding: 10px 14px;
  border-radius: 18px;
  max-width: 75%;
  word-break: break-word;
  line-height: 1.5;
  font-size: 12px;
  text-align: left;
}

.message.user .bubble {
  background-color: #155DFF;
  color: white;
}

.message.assistant .bubble {
  background-color: #fff;
  color: #333;
}

/* === 输入区域 === */
.input-area {
  padding: 16px;
  background: white;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 2px -1px 14px 0px rgb(159 160 161 / 22%);
}
.input-box::placeholder {
  color: #AFAFAF; /* 设置字体颜色为红色 */
  font-weight: 500;
}
.input-box {
  height: 75px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.input-box:focus {
  border-color: #007bff;
}

.action-buttons {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  white-space: nowrap;
  padding: 0 4px;
}

.btn {
  display: flex;              /* 使用flex布局 */
  justify-content: center;    /* 水平居中 */
  align-items: center;        /* 垂直居中 */
  width: 20px;                /* 设置按钮的宽度为20px */
  height: 20px;               /* 设置按钮的高度为20px */
  border-radius: 50%;         /* 圆形按钮 */
  background-color: white;    /* 背景色为白色 */
  font-size: 18px;            /* 设置加号的字体大小 */
  line-height: 20px;          /* 设置行高，确保加号垂直居中 */
  color: #333;                /* 加号的颜色 */
  font-weight: bold;          /* 加号字体加粗 */
  cursor: pointer;            /* 鼠标悬停时显示为点击效果 */
}

.btn:hover {
  background: #e9e9e9;
}

.btn span {
  font-size: 12px;
}

.more-btn {
  background: transparent;
  border: 1px dashed #ccc;
  color: #666;
}

.icon-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.icon,
.send-btn span {
  font-size: 16px;
  cursor: pointer;
  color: #999;
}

.icon:hover,
.send-btn:hover span {
  color: #333;
}

.send-btn {
  background: #B9CDFF;
  border: none;
  width: 60px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 11px;
}

.send-btn:hover {
  background: #155DFF;
}
/* === 自定义助手 KG 卡片 === */
.kg-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 16px;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  font-size: 14px;
  color: #333;
}

.kg-card h4 {
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
  color: #1a73e8;
  font-weight: 600;
}

.kg-section {
  margin-bottom: 16px;
}

.kg-section h5 {
  margin: 0 0 8px 0;
  color: #555;
  font-size: 14px;
  font-weight: 600;
}

/* 实体标签 */
.entity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.entity-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 13px;
  background: #f0f8ff;
  color: #1e88e5;
  border: 1px solid #bbdefb;
}

.entity-tag small {
  margin-left: 6px;
  opacity: 0.8;
  font-weight: normal;
}

/* 按类型着色（可扩展） */
.tag-疾病 { background: #ffebee; color: #c62828; border-color: #ffcdd2; }
.tag-症状 { background: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }
.tag-检查 { background: #fff8e1; color: #ff8f00; border-color: #ffecb3; }
.tag-药物 { background: #f3e5f5; color: #7b1fa2; border-color: #ce93d8; }

/* 关系列表 */
.relation-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.relation-list li {
  padding: 6px 0;
  border-bottom: 1px dashed #eee;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.relation-list li:last-child {
  border-bottom: none;
}

.rel-subject { font-weight: 600; color: #1a237e; }
.rel-predicate { color: #d32f2f; font-weight: 500; }
.rel-object { font-weight: 600; color: #1b5e20; }

/* 空状态 */
.empty-state {
  color: #999;
  font-style: italic;
  padding: 12px 0;
}

/* 普通助手文本（非 KG） */
.assistant-text {
  background-color: #e9ecef;
  color: #333;
}
</style>