<!-- =============================================================================
// 企微IT智能服务台 — 操作步骤组件
// =============================================================================
// 说明：展示按问题分类的解决步骤
// 第一步使用硬编码的步骤数据
// 后续步骤从后端配置获取
// ============================================================================= -->

<template>
  <div class="operation-steps">
    <!-- 问题分类选择 -->
    <el-select
      v-model="selectedCategory"
      placeholder="选择问题分类"
      class="category-select"
    >
      <el-option
        v-for="cat in categories"
        :key="cat.name"
        :label="cat.label"
        :value="cat.name"
      />
    </el-select>

    <!-- 操作步骤列表 -->
    <div v-if="currentSteps.length > 0" class="step-list">
      <div
        v-for="(step, index) in currentSteps"
        :key="index"
        class="step-card"
      >
        <div class="step-card-inner">
          <!-- 步骤序号 -->
          <span class="step-number">
            {{ index + 1 }}
          </span>
          <!-- 步骤内容 -->
          <div class="step-content">
            <div class="step-title">{{ step.title }}</div>
            <div class="step-desc">{{ step.description }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="steps-empty">
      请选择问题分类查看操作步骤
    </div>
  </div>
</template>

<script setup lang="ts">
// ============================================================================
// 导入
// ============================================================================
import { ref, computed } from 'vue'

// ============================================================================
// 类型定义
// ============================================================================

/** 操作步骤 */
interface Step {
  /** 步骤标题 */
  title: string
  /** 步骤详细说明 */
  description: string
}

/** 问题分类 */
interface Category {
  /** 分类名称（英文key） */
  name: string
  /** 分类显示名称 */
  label: string
  /** 该分类下的操作步骤 */
  steps: Step[]
}

// ============================================================================
// 硬编码的操作步骤数据（第一步）
// ============================================================================
const categories: Category[] = [
  {
    name: 'vpn',
    label: '🌐 VPN连接问题',
    steps: [
      {
        title: '确认VPN账号状态',
        description: '在IT管理后台检查该员工的VPN账号是否已开通、是否过期、是否被锁定。',
      },
      {
        title: '检查客户端版本',
        description: '确认员工使用的是最新版VPN客户端，旧版本可能存在兼容性问题。',
      },
      {
        title: '检查网络环境',
        description: '确认员工当前网络可以访问公司VPN网关（可用 ping 测试），排除防火墙拦截。',
      },
      {
        title: '重置VPN密码',
        description: '如密码错误，在管理后台重置VPN密码，通知员工通过自助门户重新设置。',
      },
      {
        title: '查看VPN日志',
        description: '如以上步骤未能解决，要求员工发送VPN客户端日志，转交网络组排查。',
      },
    ],
  },
  {
    name: 'account',
    label: '🔑 账号登录问题',
    steps: [
      {
        title: '确认账号状态',
        description: '检查该员工的AD/统一认证账号是否正常（未锁定、未过期）。',
      },
      {
        title: '检查密码是否过期',
        description: '确认密码是否超过90天未修改，提醒员工通过SSO门户修改密码。',
      },
      {
        title: '检查多因素认证',
        description: '确认MFA设备是否正常绑定，如更换手机需重新绑定。',
      },
      {
        title: '检查账号权限',
        description: '确认员工是否有所需系统的访问权限，如无权限需要走审批流程。',
      },
      {
        title: '清除浏览器缓存',
        description: '部分登录问题由浏览器缓存引起，指导员工清除缓存或使用无痕模式。',
      },
    ],
  },
  {
    name: 'permission',
    label: '🔐 权限申请问题',
    steps: [
      {
        title: '确认权限类型',
        description: '了解员工需要申请哪类权限（系统权限/文件权限/网络权限）。',
      },
      {
        title: '检查现有权限',
        description: '在对应系统中检查员工当前已有的权限，避免重复申请。',
      },
      {
        title: '引导走审批流程',
        description: '提供对应的审批链接，指导员工提交权限申请。审批链接可在"审批流程"面板查看。',
      },
      {
        title: '紧急权限加急',
        description: '如为紧急情况，联系对应系统管理员临时开通，后续补审批。',
      },
    ],
  },
  {
    name: 'device',
    label: '💻 设备故障问题',
    steps: [
      {
        title: '远程诊断',
        description: '通过远程工具连接员工电脑，检查设备状态、系统日志、硬件状态。',
      },
      {
        title: '常见问题排查',
        description: '蓝屏：检查最近驱动更新；慢：检查磁盘空间和内存；无法开机：检查电源。',
      },
      {
        title: '重启相关服务',
        description: '尝试重启相关系统服务或进程，很多问题可通过重启解决。',
      },
      {
        title: '创建维修工单',
        description: '如无法远程解决，创建硬件维修工单，安排现场支持或设备更换。',
      },
    ],
  },
  {
    name: 'software',
    label: '📦 软件安装问题',
    steps: [
      {
        title: '确认软件在允许列表中',
        description: '检查该软件是否在公司允许安装的软件清单中，不在清单的需要走审批。',
      },
      {
        title: '检查系统要求',
        description: '确认员工电脑满足软件的最低系统要求（操作系统版本、内存、磁盘空间）。',
      },
      {
        title: '提供下载链接',
        description: '从公司软件库提供正版安装包和授权码，下载链接可在"软件下载"面板查看。',
      },
      {
        title: '远程协助安装',
        description: '如员工不会安装，通过远程工具协助安装和配置。',
      },
    ],
  },
]

// ============================================================================
// 状态
// ============================================================================

/** 当前选中的分类 */
const selectedCategory = ref('')

// ============================================================================
// 计算属性
// ============================================================================

/** 当前分类的操作步骤 */
const currentSteps = computed(() => {
  const cat = categories.find(c => c.name === selectedCategory.value)
  return cat?.steps || []
})
</script>

<style scoped>
.operation-steps {
  padding: 12px;
}

.category-select {
  width: 100%;
  margin-bottom: 12px;
}

.step-list {

}

.step-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.step-number {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.step-content {

}

.step-title {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 13px;
}

.step-desc {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 2px;
  line-height: 1.6;
}

.steps-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-tertiary);
}
</style>
