<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue';

import { ingestionSteps } from '@/data/studioMock';
</script>

<template>
  <section class="studio-page ingestion-page">
    <header class="page-title-row">
      <div>
        <p class="studio-kicker">IngestionPipelineView</p>
        <h1>文件解析管道</h1>
      </div>
      <el-button type="primary">启动索引任务</el-button>
    </header>

    <div class="ingestion-layout">
      <section class="studio-panel upload-panel">
        <div class="upload-dropzone">
          <el-icon><UploadFilled /></el-icon>
          <strong>拖拽文件到这里</strong>
          <span>支持 PDF / Word / Excel / Markdown / TXT，上传后自动创建 ingestion run。</span>
          <el-button type="primary">选择文件</el-button>
        </div>
        <div class="pipeline-timeline">
          <article v-for="step in ingestionSteps" :key="step.name" :class="`is-${step.status}`">
            <div class="timeline-dot" />
            <div class="timeline-content">
              <strong>{{ step.name }}</strong>
              <span>{{ step.description }}</span>
            </div>
          </article>
        </div>
      </section>

      <section class="studio-panel preview-panel">
        <div class="panel-heading">
          <h2>解析与切片预览</h2>
          <span>GET /api/knowledge/ingestion-runs/run-20260531</span>
        </div>
        <div class="preview-split">
          <article>
            <h3>解析文本</h3>
            <p>私有化部署章节应覆盖基础设施、网络、安全与运维边界。平台需说明模型服务商、知识库索引策略与日志留存周期...</p>
          </article>
          <article>
            <h3>切片 #24</h3>
            <p>chunk_size=800, overlap=120, strategy=FIXED_LENGTH。该切片将进入 rag_chunk 并在向量化后写入 rag_chunk_embedding。</p>
          </article>
        </div>
        <div class="pipeline-controls">
          <label>切片策略 <strong>固定长度</strong></label>
          <label>Chunk Size <strong>800</strong></label>
          <label>Overlap <strong>120</strong></label>
          <label>Embedding <strong>Qwen3 1024d</strong></label>
        </div>
      </section>

      <aside class="studio-panel task-log-panel">
        <div class="panel-heading compact">
          <h2>任务日志</h2>
          <span>run-20260531</span>
        </div>
        <ol class="log-list">
          <li><time>23:08:12</time><span>上传 4 个文件并创建 rag_document</span></li>
          <li><time>23:08:24</time><span>Tika 解析完成 3 个文件</span></li>
          <li class="warn"><time>23:08:31</time><span>服务条款更新.md 编码检测失败，等待重试</span></li>
          <li><time>23:08:40</time><span>切片任务进行中 68 / 119</span></li>
        </ol>
      </aside>
    </div>
  </section>
</template>
