<template>
  <el-alert style="margin-bottom: 20px;"
    title="上传文档，自动提取文本，自动抽取知识，自动构建图谱 支持多种文档格式，如PDF、DOCX等 支持多种知识抽取模型，如LLM、RAG等 支持多种图谱构建模型，如Neo4j、Postgres等"
    type="success" :closable="false" />
  <!-- 主要内容区域 -->
  <el-steps style="margin-bottom: 20px;padding: 33px 8%;" :space="200" simple>
    <el-step>
      <template #icon>
        <el-icon size="30" color="#40a1ff"><upload-filled /></el-icon>
      </template>
      <template #title>
        <div>第一步</div>
        <div>上传文档</div>
        <!-- <span>上传文档</span> -->
      </template>
    </el-step>
    <el-step status="process">
      <template #icon>
        <el-icon size="30" color="#40a1ff">
          <TrendCharts />
        </el-icon>
      </template>
      <template #title>
        <div>第二步</div>
        <div>文本切片</div>
      </template>
    </el-step>
    <el-step status="process">
      <template #icon>
        <el-icon size="30" color="#40a1ff">
          <ChromeFilled />
        </el-icon>
      </template>
      <template #title>
        <div>第三步</div>
        <div>知识抽取</div>
        <!-- <span>上传文档</span> -->
      </template>
    </el-step>
    <el-step status="process">
      <template #icon>
        <el-icon size="30" color="#40a1ff">
          <HelpFilled />
        </el-icon>
      </template>
      <template #title>
        <div>第四步</div>
        <div>图谱构建</div>
        <!-- <span>上传文档</span> -->
      </template>
    </el-step>
    <el-step status="process">
      <template #icon>
        <el-icon size="30" color="#40a1ff">
          <Grid />
        </el-icon>
      </template>
      <template #title>
        <div>第五步</div>
        <div>查看图谱</div>
        <!-- <span>上传文档</span> -->
      </template>
    </el-step>


    <!-- <el-step title="文本切片"  />
    <el-step title="知识抽取" />
    <el-step title="图谱构建"  />
    <el-step title="查看图谱"/> -->
  </el-steps>
  <!-- <el-row style="display: flex; justify-content: center; padding-top:50px;">

    <svg width="1000" height="150">
      <g fill="none" stroke="black" stroke-width="1">
        <circle cx="70" cy="70" r="50">
        </circle>
        <text x="70" y="70" style="font-size:12pt;font-weight:100;" text-anchor="middle">第一步</text>
        <text x="70" y="90" style="font-size:12pt;font-weight:100;" text-anchor="middle">上传文档</text>
        <line x1="120" y1="70" x2="200" y2="70" />
        <line x1="200" y1="70" x2="180" y2="65" />
        <line x1="200" y1="70" x2="180" y2="75" />
      </g>

      <g fill="none" stroke="black" stroke-width="1">
        <circle cx="250" cy="70" r="50">
        </circle>
        <text x="250" y="70" style="font-size:12pt;font-weight:100;" text-anchor="middle">第二步</text>
        <text x="250" y="90" style="font-size:12pt;font-weight:100;" text-anchor="middle">文本切片</text>
        <line x1="300" y1="70" x2="380" y2="70" />
        <line x1="380" y1="70" x2="360" y2="65" />
        <line x1="380" y1="70" x2="360" y2="75" />
      </g>

      <g fill="none" stroke="black" stroke-width="1">
        <circle cx="430" cy="70" r="50">
        </circle>
        <text x="430" y="70" style="font-size:12pt;font-weight:100;" text-anchor="middle">第三步</text>
        <text x="430" y="90" style="font-size:12pt;font-weight:100;" text-anchor="middle">知识抽取</text>
        <line x1="480" y1="70" x2="560" y2="70" />
        <line x1="560" y1="70" x2="540" y2="65" />
        <line x1="560" y1="70" x2="540" y2="75" />
      </g>

      <g fill="none" stroke="black" stroke-width="1">
        <circle cx="610" cy="70" r="50">
        </circle>
        <text x="610" y="70" style="font-size:12pt;font-weight:100;" text-anchor="middle">第四步</text>
        <text x="610" y="90" style="font-size:12pt;font-weight:100;" text-anchor="middle">图谱构建</text>
        <line x1="660" y1="70" x2="740" y2="70" />
        <line x1="740" y1="70" x2="720" y2="65" />
        <line x1="740" y1="70" x2="720" y2="75" />
      </g>
      <g fill="none" stroke="black" stroke-width="1">
        <circle cx="790" cy="70" r="50">
        </circle>
        <text x="790" y="70" style="font-size:12pt;font-weight:100;" text-anchor="middle">第五步</text>
        <text x="790" y="90" style="font-size:12pt;font-weight:100;" text-anchor="middle">查看图谱</text>
        、
      </g>
    </svg>
  </el-row> -->
  <el-row style="display: flex;justify-content: space-between;padding: 0 50px;">
    <template v-for="(queue, index) in queuesSummary" :key="index">
      <el-card shadow="hover"
        style="width: 40%; margin: 10px; padding: 30px; text-align: center;background: linear-gradient( #eef6ff 0%, #F6F6F9 100%);">
        <div class="card-header" style="margin-bottom: 10px;">
          <span>{{ formatQueueName(queue.queue_category, queue.queue_name) }}</span>
          <span class="card-status" :class="queue.status === 'running' ? 'status-running' : 'status-idle'">
            {{ queue.status }}
          </span>
        </div>
        <div class="card-content">
          <p style="margin-bottom: 5px;">总任务数：{{ queue.job_count }}</p>
          <p>完成的任务数：{{ queue.job_finished_count }}</p>
        </div>
      </el-card>
    </template>
  </el-row>
  <!-- <el-row style="display: flex; justify-content: center; padding-top:100px;">
    <div style="text-align: left; font-size:12pt;">
      <el-row>
        <el-text>上传文档，自动提取文本，自动抽取知识，自动构建图谱</el-text></el-row>
      <el-row><el-text>支持多种文档格式，如PDF、DOCX等</el-text></el-row>
      <el-row><el-text>支持多种知识抽取模型，如LLM、RAG等</el-text></el-row>
      <el-row><el-text>支持多种图谱构建模型，如Neo4j、Postgres等</el-text></el-row>

    </div>
  </el-row> -->
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getQueueSummary } from '@/api/AgentApi';
const queuesSummary = ref<any>([]);
const queueIdNameDict = ref([
  { id: "0", name: "DEFAULT", category: 'SYSTEM', title: "全部工作", },
  { id: "1", name: "OCR", category: 'SYSTEM', title: "PDF文件抽取", },
  { id: "2", name: "OCR_RESULTS", title: "OCR结果校对", category: 'SYSTEM', },
  { id: "3", name: "CHUNKS", title: "文本切片队列", category: 'SYSTEM', },
  { id: "4", name: "KB_EXTRACT", title: "知识抽取", category: 'SYSTEM', },
  { id: "5", name: "KB_BUILD", title: "图谱数据构建", category: 'SYSTEM', },
  { id: "6", name: "WORD", title: "WORD文档抽取", category: 'SYSTEM', },
])

function formatQueueName(queue_cateogry: string, queue_name: string) {

  for (const queue of queueIdNameDict.value) {
    if (queue.category == queue_cateogry && queue.name == queue_name) {
      return queue.title
    }
  }
  return queue_name
}
function loadQueuesSummary() {
  // 模拟从后端获取数据
  getQueueSummary({}).then((res: any) => {
    queuesSummary.value = res.records;
  })
}
onMounted(() => {
  // 模拟从后端获取数据
  setTimeout(() => {
    queuesSummary.value.length = 0
    loadQueuesSummary()

  })
})

</script>

<style scoped lang="less">
.workspace-container {
  display: flex;
  height: 100vh;
}

.left-nav {
  width: 280px;
  border-right: 1px solid #e4e7ed;
  padding: 20px;
  overflow-y: auto;

  .nav-section {
    margin-bottom: 30px;

    h3 {
      margin-bottom: 15px;
      color: #666;
    }
  }
}

.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .task-list {
    display: grid;
    gap: 15px;

    .task-card {
      margin-bottom: 10px;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .task-content {
        p {
          margin: 5px 0;
          color: #666;
        }

        .attachments {
          margin-top: 10px;
          display: flex;
          gap: 10px;
        }
      }
    }
  }
}
</style>
