<!-- =============================================================================
// 企微IT智能服务台 — H5用户端排查步骤进度组件
// =============================================================================
// 说明：展示坐席端的排查步骤进度，通过 WebSocket 实时同步
// 功能：
//   1. 横向步骤进度条（完成/当前/待处理 三态）
//   2. 当前步骤脉冲动画提示
//   3. 坐席更新步骤时实时推送到用户端
// 数据源：conversation store 中的 troubleshootingSteps
// ============================================================================= -->

<template>
  <div v-if="steps.length > 0" class="h5-ts-progress">
    <!-- 标题栏 -->
    <div class="h5-ts-progress__header">
      <span class="h5-ts-progress__title">🔧 排查进度 · {{ templateName }}</span>
      <span class="h5-ts-progress__time">{{ currentTime }}</span>
    </div>

    <!-- 横向步骤进度条 -->
    <div class="h5-ts-progress__bar">
      <template v-for="(step, index) in steps" :key="index">
        <div
          class="h5-ts-step"
          :class="`h5-ts-step--${step.status}`"
        >
          <!-- 步骤圆点 -->
          <span
            class="h5-ts-dot"
            :class="`h5-ts-dot--${step.status}`"
          >
            <template v-if="step.status === 'done'">✓</template>
            <template v-else>{{ index + 1 }}</template>
          </span>
          <!-- 步骤标签 -->
          <span class="h5-ts-label">{{ step.label }}</span>
        </div>
        <!-- 步骤间箭头 -->
        <span v-if="index < steps.length - 1" class="h5-ts-arrow">→</span>
      </template>
    </div>

    <!-- 当前步骤说明 -->
    <div v-if="currentStepLabel" class="h5-ts-progress__current-hint">
      <span class="h5-ts-progress__current-icon">▶</span>
      正在进行：<strong>{{ currentStepLabel }}</strong>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * TroubleshootProgress 排查步骤进度组件
 *
 * 数据结构：
 * - steps: PathStep[] — 排查步骤列表
 *   - label: 步骤名称
 *   - status: 'done' | 'current' | 'pending'
 * - templateName: 排查模板名称（如"VPN连接故障"）
 *
 * 数据来源：conversation store 中的 troubleshootingSteps
 * 坐席端更新步骤时 → WebSocket 推送 → store 更新 → 本组件自动响应
 */
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { useConversationStore } from '@/stores/conversation'

const store = useConversationStore()

/** 当前时间（用于显示） */
const currentTime = ref('')

/** 更新时间的定时器 */
let timer: ReturnType<typeof setInterval> | null = null

/** 排查步骤列表 — 从 store 获取 */
const steps = computed(() => {
  return store.troubleshootingSteps || []
})

/** 排查模板名称 — 从 store 获取 */
const templateName = computed(() => {
  return store.troubleshootingTemplateName || '排查中'
})

/** 当前步骤的标签 */
const currentStepLabel = computed(() => {
  const current = steps.value.find(s => s.status === 'current')
  return current?.label || ''
})

/**
 * 更新当前时间显示
 */
function updateTime(): void {
  const now = new Date()
  const h = now.getHours().toString().padStart(2, '0')
  const m = now.getMinutes().toString().padStart(2, '0')
  currentTime.value = `${h}:${m}`
}

onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 60000) // 每分钟更新
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<style scoped>
/* 进度卡片容器 */
.h5-ts-progress {
  margin: 8px 12px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* 标题栏 */
.h5-ts-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.h5-ts-progress__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.h5-ts-progress__time {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* 横向步骤进度条 */
.h5-ts-progress__bar {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.h5-ts-progress__bar::-webkit-scrollbar {
  height: 2px;
}

.h5-ts-progress__bar::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 1px;
}

/* 单个步骤 */
.h5-ts-step {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 步骤圆点 */
.h5-ts-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

/* 已完成步骤 */
.h5-ts-dot--done {
  background: #22c55e;
  color: #fff;
}

.h5-ts-step--done .h5-ts-label {
  color: var(--text-tertiary);
  text-decoration: line-through;
}

/* 当前步骤 — 脉冲动画 */
.h5-ts-dot--current {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: dot-pulse 2s ease-in-out infinite;
}

.h5-ts-step--current .h5-ts-label {
  color: var(--accent);
  font-weight: 600;
}

/* 待处理步骤 */
.h5-ts-dot--pending {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  border: 1px solid var(--border-color);
}

.h5-ts-step--pending .h5-ts-label {
  color: var(--text-tertiary);
}

/* 步骤标签 */
.h5-ts-label {
  font-size: 11px;
  color: var(--text-secondary);
}

/* 步骤间箭头 */
.h5-ts-arrow {
  color: var(--text-tertiary);
  font-size: 10px;
  flex-shrink: 0;
  padding: 0 2px;
}

/* 当前步骤说明 */
.h5-ts-progress__current-hint {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.h5-ts-progress__current-icon {
  color: var(--accent);
  font-size: 10px;
}

/* 脉冲动画 */
@keyframes dot-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  50% {
    box-shadow: 0 0 0 6px var(--accent-soft);
  }
}
</style>
