<!-- =============================================================================
// 企微IT智能服务台 — 运维工单详情子视图
// =============================================================================
// 说明：TaskDetailView 中 type=ticket 的子视图
// 功能：
//   1. 工单描述卡片（标题/类型/优先级/上报人/上报时间/描述）
//   2. 处理进度卡片（状态/接单人/SLA倒计时）
//   3. 底部操作按钮（接单/开始处理/结单/转派）
// ============================================================================= -->

<template>
  <div class="ticket-detail">
    <!-- ================================================================== -->
    <!-- 工单描述卡片 -->
    <!-- ================================================================== -->
    <div class="tic-card">
      <div class="tic-card-title">📋 工单描述</div>
      <div class="tic-row">
        <span class="tic-label">标题</span>
        <span class="tic-value">{{ todoItem.title }}</span>
      </div>
      <div class="tic-row">
        <span class="tic-label">类型</span>
        <span class="tic-value">{{ todoItem.description?.ticket_type || '运维' }}</span>
      </div>
      <div class="tic-row">
        <span class="tic-label">优先级</span>
        <span class="tic-value">
          <span v-if="todoItem.priority === 'urgent'" class="tic-priority urgent">🔴 紧急</span>
          <span v-else-if="todoItem.priority === 'high'" class="tic-priority high">🟡 高</span>
          <span v-else class="tic-priority normal">🟢 普通</span>
        </span>
      </div>
      <div class="tic-row">
        <span class="tic-label">上报人</span>
        <span class="tic-value">{{ todoItem.description?.reporter || '—' }}</span>
      </div>
      <div class="tic-row">
        <span class="tic-label">上报时间</span>
        <span class="tic-value">{{ formatTime(todoItem.created_at) }}</span>
      </div>
      <div class="tic-row">
        <span class="tic-label">描述</span>
        <span class="tic-value tic-desc">{{ todoItem.description?.detail || todoItem.description?.description || '—' }}</span>
      </div>
    </div>

    <!-- ================================================================== -->
    <!-- 处理进度卡片 -->
    <!-- ================================================================== -->
    <div class="tic-card">
      <div class="tic-card-title">📊 处理进度</div>
      <div class="tic-row">
        <span class="tic-label">状态</span>
        <span class="tic-value">
          <span class="tic-status-badge" :class="`tic-status-${todoItem.status}`">
            {{ statusLabelMap[todoItem.status] || todoItem.status }}
          </span>
        </span>
      </div>
      <div class="tic-row">
        <span class="tic-label">接单人</span>
        <span class="tic-value">{{ todoItem.assigned_agent_id ? `坐席 ${todoItem.assigned_agent_id.slice(0, 8)}` : '未接单' }}</span>
      </div>
      <div class="tic-row">
        <span class="tic-label">SLA</span>
        <span class="tic-value">
          <span class="tic-sla" :class="slaLevel">{{ slaText }}</span>
        </span>
      </div>
    </div>

    <!-- ================================================================== -->
    <!-- 底部操作按钮 -->
    <!-- ================================================================== -->
    <div class="tic-actions">
      <button class="tic-action-btn" @click="$emit('action', '接单')">📥 接单</button>
      <button class="tic-action-btn" @click="$emit('action', '开始处理')">🔧 开始处理</button>
      <button class="tic-action-btn tic-action-primary" @click="$emit('action', '结单')">✅ 结单</button>
      <button class="tic-action-btn" @click="$emit('action', '转派')">🔄 转派</button>
    </div>
  </div>
</template>

<script setup lang="ts">
// ============================================================================
// 导入
// ============================================================================
import { computed } from 'vue'
import type { TodoItemData } from '@/api/todo'

// ============================================================================
// Props
// ============================================================================

interface Props {
  /** 当前选中的待办事项 */
  todoItem: TodoItemData
}

const props = defineProps<Props>()

// ============================================================================
// Emits
// ============================================================================

interface Emits {
  /** 操作按钮事件 */
  (e: 'action', action: string): void
}

defineEmits<Emits>()

// ============================================================================
// 映射
// ============================================================================

/** 状态标签映射 */
const statusLabelMap: Record<string, string> = {
  pending: '待处理',
  processing: '处理中',
  resolved: '已解决',
}

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

/** SLA 倒计时（Mock） */
const slaText = computed<string>(() => {
  const desc = props.todoItem.description
  if (desc?.sla_remaining) return desc.sla_remaining
  // Mock: 根据 priority 生成 SLA
  if (props.todoItem.priority === 'urgent') return '0h 32m'
  if (props.todoItem.priority === 'high') return '2h 15m'
  return '23h 45m'
})

/** SLA 等级（颜色指示） */
const slaLevel = computed<string>(() => {
  const text = slaText.value
  if (text.startsWith('0h') || text.includes('超时')) return 'sla-overdue'
  // 提取小时数判断
  const hourMatch = text.match(/(\d+)h/)
  if (hourMatch) {
    const hours = parseInt(hourMatch[1], 10)
    if (hours <= 1) return 'sla-warning'
  }
  return 'sla-normal'
})

// ============================================================================
// 方法
// ============================================================================

/**
 * 格式化时间
 *
 * @param isoString - ISO 时间字符串
 * @returns 格式化后的时间字符串
 */
function formatTime(isoString: string): string {
  if (!isoString) return '—'
  try {
    const date = new Date(isoString)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
    })
  } catch {
    return isoString
  }
}
</script>

<style scoped>
.ticket-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- 通用卡片 ---- */
.tic-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.tic-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.tic-row {
  display: flex;
  align-items: flex-start;
  padding: 5px 0;
}

.tic-label {
  width: 70px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-tertiary);
}

.tic-value {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-word;
}

.tic-desc {
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ---- 优先级 ---- */
.tic-priority.urgent { color: var(--color-danger); font-weight: 600; }
.tic-priority.high { color: var(--color-warning); font-weight: 600; }
.tic-priority.normal { color: var(--color-success); }

/* ---- 状态徽标 ---- */
.tic-status-badge {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.tic-status-pending {
  background-color: rgba(230, 162, 60, 0.1);
  color: var(--color-warning);
}

.tic-status-processing {
  background-color: rgba(64, 158, 255, 0.1);
  color: var(--accent);
}

.tic-status-resolved {
  background-color: rgba(103, 194, 58, 0.1);
  color: var(--color-success);
}

/* ---- SLA ---- */
.tic-sla {
  font-weight: 600;
  font-size: 13px;
}

.tic-sla.sla-normal { color: var(--color-success); }
.tic-sla.sla-warning { color: var(--color-warning); }
.tic-sla.sla-overdue { color: var(--color-danger); }

/* ---- 操作按钮 ---- */
.tic-actions {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  flex-wrap: wrap;
}

.tic-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.tic-action-btn:hover {
  background-color: var(--bg-hover);
  border-color: var(--accent);
  color: var(--accent);
}

.tic-action-primary {
  background-color: var(--accent);
  color: var(--bg-secondary);
  border-color: var(--accent);
}

.tic-action-primary:hover {
  background-color: var(--accent-hover);
  color: var(--bg-secondary);
}
</style>
