<!--
=============================================================================
企微IT智能服务台 — 排查流程图管理页
=============================================================================
说明：JSON 导入导出 + 预览 + 版本管理
  阶段三开始实现，当前为占位功能
  显示模板列表 + 灰化的导入/导出/新建按钮
  底部展示实现路径
-->
<template>
  <div class="flowcharts-page">
    <!-- 页面标题 -->
    <div class="page-title">排查流程图管理</div>
    <div class="page-desc">JSON 导入导出 + 预览 + 版本管理。阶段三开始实现，后续升级为可视化拖拽编辑。</div>

    <!-- 操作按钮（灰化占位） -->
    <div class="flowchart-actions">
      <el-button type="primary" disabled>
        <el-icon><Upload /></el-icon>
        导入 JSON
      </el-button>
      <el-button disabled>
        <el-icon><Download /></el-icon>
        导出全部
      </el-button>
      <el-button disabled>
        <el-icon><Plus /></el-icon>
        新建流程图
      </el-button>
    </div>

    <!-- 流程图模板表格 -->
    <div class="table-wrapper">
      <el-table
        :data="flowcharts"
        style="width: 100%"
        :header-cell-style="{ background: 'var(--bg-tertiary)', color: 'var(--text-secondary)', fontSize: '12px' }"
        :cell-style="{ color: 'var(--text-primary)', fontSize: '13px' }"
        row-class-name="flowchart-table-row"
      >
        <el-table-column label="流程图名称" min-width="200">
          <template #default="{ row }">
            <div class="flowchart-name">
              <el-icon :size="16" style="color: var(--accent); margin-right: 6px">
                <Share />
              </el-icon>
              {{ row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="分类" width="80">
          <template #default="{ row }">
            <el-tag size="small" effect="plain">{{ row.category }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="节点数" width="80" align="center" prop="nodeCount" />
        <el-table-column label="版本" width="70" align="center" prop="version" />
        <el-table-column label="最后更新" width="110" prop="updatedAt" />
        <el-table-column label="状态" width="90">
          <template #default="{ row }">
            <el-tag :type="row.statusType" size="small">
              {{ row.statusText }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140" align="center">
          <template #default>
            <el-button size="small" text type="primary" disabled>预览</el-button>
            <el-button size="small" text disabled>编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 实现路径 -->
    <div class="roadmap-section">
      <div class="roadmap-title">
        <el-icon :size="16" style="color: var(--accent); margin-right: 6px"><Flag /></el-icon>
        实现路径
      </div>
      <div class="roadmap-steps">
        <div class="roadmap-step active">
          <div class="step-number">Step 1</div>
          <div class="step-title">JSON 导入导出 + 预览</div>
          <div class="step-phase">阶段三 3B</div>
        </div>
        <el-icon :size="16" class="roadmap-arrow"><ArrowRight /></el-icon>
        <div class="roadmap-step">
          <div class="step-number">Step 2</div>
          <div class="step-title">导出为 Dify 变量</div>
          <div class="step-phase">阶段四 4A</div>
        </div>
        <el-icon :size="16" class="roadmap-arrow"><ArrowRight /></el-icon>
        <div class="roadmap-step">
          <div class="step-number">Step 3</div>
          <div class="step-title">Dify HTTP 回调</div>
          <div class="step-phase">阶段四</div>
        </div>
        <el-icon :size="16" class="roadmap-arrow"><ArrowRight /></el-icon>
        <div class="roadmap-step">
          <div class="step-number">Step 4</div>
          <div class="step-title">可视化拖拽编辑</div>
          <div class="step-phase">远景</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// ==========================================================================
// Demo 数据
// ==========================================================================
const flowcharts = [
  {
    name: 'VPN连接故障排查',
    category: '网络',
    nodeCount: 12,
    version: 'v2.1',
    updatedAt: '2026-06-10',
    statusType: 'success',
    statusText: '已发布',
  },
  {
    name: '打印机脱机排查',
    category: '外设',
    nodeCount: 8,
    version: 'v1.3',
    updatedAt: '2026-06-08',
    statusType: 'success',
    statusText: '已发布',
  },
  {
    name: '邮箱登录失败排查',
    category: '软件',
    nodeCount: 10,
    version: 'v1.0',
    updatedAt: '2026-06-06',
    statusType: 'warning',
    statusText: '草稿',
  },
]
</script>

<style scoped>
/* 操作按钮 */
.flowchart-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

/* 流程图名称 */
.flowchart-name {
  display: flex;
  align-items: center;
}

/* 实现路径区域 */
.roadmap-section {
  margin-top: 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.roadmap-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  color: var(--text-primary);
}

.roadmap-steps {
  display: flex;
  gap: 0;
  align-items: center;
}

.roadmap-step {
  border-radius: var(--radius);
  padding: 12px 16px;
  flex: 1;
  text-align: center;
  background: var(--bg-primary);
  border: 1px solid var(--border);
}
.roadmap-step.active {
  background: var(--accent-light);
  border-color: var(--accent);
}

.step-number {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.roadmap-step.active .step-number {
  color: var(--accent);
}

.step-title {
  font-size: 13px;
  margin-top: 4px;
  color: var(--text-secondary);
}
.roadmap-step.active .step-title {
  color: var(--text-primary);
}

.step-phase {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.roadmap-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
  margin: 0 4px;
}
</style>

<style>
/* 流程图表格行悬停 */
.flowchart-table-row:hover td {
  background-color: var(--bg-tertiary) !important;
}
</style>
