<template>
  <div class="qa-container">
    <div class="qa-header">
      <h1>问答对</h1>
      <div class="header-info">
        <el-tag>文档ID: {{ documentId }}</el-tag>
        <el-tag type="success" v-if="qaList.length">
          共 {{ qaList.length }} 个问答对
        </el-tag>
      </div>
    </div>

    <div class="qa-content" v-loading="loading">
      <div v-if="qaList.length === 0 && !loading" class="empty-state">
        <i class="el-icon-document"></i>
        <p>暂无问答对数据</p>
      </div>

      <div v-else class="qa-list">
        <div 
          v-for="(item, index) in qaList" 
          :key="index" 
          class="qa-item"
        >
          <div class="qa-question">
            <div class="qa-label">问：</div>
            <div class="qa-text">{{ item.question }}</div>
          </div>
          <div class="qa-answer">
            <div class="qa-label">答：</div>
            <div class="qa-text">{{ item.answer }}</div>
          </div>
          <div class="qa-meta" v-if="item.confidence || item.source">
            <el-tag size="mini" v-if="item.confidence">
              置信度: {{ item.confidence }}
            </el-tag>
            <el-tag size="mini" type="info" v-if="item.source">
              来源: {{ item.source }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>

    <!-- 刷新按钮 -->
    <div class="qa-actions">
      <el-button 
        type="primary" 
        icon="el-icon-refresh" 
        @click="fetchQAData"
        :loading="loading"
      >
        刷新数据
      </el-button>
    </div>
  </div>
</template>

<script>
import { queryDocumentContent } from '@/api/document'

export default {
  name: "Qa",
  data() {
    return {
      documentId: 8559, // 文档ID
      qaList: [], // 问答对列表
      loading: false // 加载状态
    }
  },
  mounted() {
    this.fetchQAData()
  },
  methods: {
    // 获取问答对数据
    async fetchQAData() {
      this.loading = true
      try {
        const response = await queryDocumentContent({
          document_id: this.documentId
        })
        
        if (response.code === 20000 || response.success) {
          // 根据接口返回的数据结构调整
          this.qaList = response.data || response.result || []
          
          // 如果接口返回的不是数组格式，进行处理
          if (!Array.isArray(this.qaList)) {
            if (this.qaList.items) {
              this.qaList = this.qaList.items
            } else if (this.qaList.qa_pairs) {
              this.qaList = this.qaList.qa_pairs
            } else {
              this.qaList = []
            }
          }
        } else {
          this.$message.error(response.message || '获取问答对数据失败')
        }
      } catch (error) {
        console.error('获取问答对数据失败:', error)
        this.$message.error('获取问答对数据失败，请稍后重试')
        this.qaList = []
      } finally {
        this.loading = false
      }
    }
  }
};
</script>

<style scoped>
.qa-container {
  padding: 20px;
  background: #fff;
  min-height: 100vh;
}

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

.qa-header h1 {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 24px;
  font-weight: 500;
}

.header-info {
  display: flex;
  gap: 8px;
  align-items: center;
}

.qa-content {
  min-height: 300px;
}

.empty-state {
  text-align: center;
  padding: 60px 0;
  color: #999;
}

.empty-state i {
  font-size: 48px;
  color: #ddd;
  margin-bottom: 16px;
}

.empty-state p {
  margin: 0;
  font-size: 16px;
}

.qa-list {
  space-y: 20px;
}

.qa-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  border-left: 4px solid #409eff;
  transition: all 0.3s ease;
}

.qa-item:hover {
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.1);
}

.qa-question, .qa-answer {
  display: flex;
  margin-bottom: 12px;
  align-items: flex-start;
}

.qa-answer {
  margin-bottom: 16px;
}

.qa-label {
  flex-shrink: 0;
  width: 40px;
  font-weight: bold;
  color: #409eff;
  margin-right: 8px;
}

.qa-question .qa-label {
  color: #e6a23c;
}

.qa-text {
  flex: 1;
  line-height: 1.6;
  color: #333;
  word-break: break-word;
}

.qa-meta {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #eee;
}

.qa-actions {
  margin-top: 24px;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #e8e8e8;
}
</style>