<!-- =============================================================================
// 企微IT智能服务台 — 设备异常详情子视图
// =============================================================================
// 说明：TaskDetailView 中 type=device 的子视图
// 功能：
//   1. 设备状态网格（2×3 grid: 设备名称/型号/在线状态/最后在线/IP/告警次数）
//   2. 处理记录卡片
//   3. 底部操作按钮（一键开单/派工/标记恢复/加入巡检）
// ============================================================================= -->

<template>
  <div class="device-detail">
    <!-- ================================================================== -->
    <!-- 设备状态网格 -->
    <!-- ================================================================== -->
    <div class="tic-card">
      <div class="tic-card-title">🖥 设备状态</div>
      <div class="dev-grid">
        <div class="dev-grid-row">
          <div class="dev-grid-cell">
            <span class="dev-grid-label">设备名称</span>
            <span class="dev-grid-value">{{ todoItem.description?.device_name || todoItem.title }}</span>
          </div>
          <div class="dev-grid-cell">
            <span class="dev-grid-label">型号</span>
            <span class="dev-grid-value">{{ todoItem.description?.device_model || '—' }}</span>
          </div>
        </div>
        <div class="dev-grid-row">
          <div class="dev-grid-cell">
            <span class="dev-grid-label">在线状态</span>
            <span class="dev-grid-value">
              <span class="dev-status-dot" :class="onlineStatusClass"></span>
              {{ onlineStatusText }}
            </span>
          </div>
          <div class="dev-grid-cell">
            <span class="dev-grid-label">最后在线</span>
            <span class="dev-grid-value">{{ todoItem.description?.last_online || '—' }}</span>
          </div>
        </div>
        <div class="dev-grid-row">
          <div class="dev-grid-cell">
            <span class="dev-grid-label">IP 地址</span>
            <span class="dev-grid-value">{{ todoItem.description?.ip_address || '—' }}</span>
          </div>
          <div class="dev-grid-cell">
            <span class="dev-grid-label">告警次数</span>
            <span class="dev-grid-value" :class="alarmCountClass">
              {{ todoItem.description?.alarm_count ?? 0 }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- ================================================================== -->
    <!-- 处理记录卡片 -->
    <!-- ================================================================== -->
    <div class="tic-card">
      <div class="tic-card-title">📋 处理记录</div>
      <div v-if="records.length > 0" class="dev-records">
        <div v-for="(rec, idx) in records" :key="idx" class="dev-record-item">
          <div class="dev-record-time">{{ rec.time }}</div>
          <div class="dev-record-content">{{ rec.content }}</div>
        </div>
      </div>
      <div v-else class="dev-records-empty">
        暂无处理记录
      </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-success" @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>()

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

/** 在线状态 CSS 类 */
const onlineStatusClass = computed<string>(() => {
  const status = props.todoItem.description?.online_status
  if (status === 'normal' || status === 'online') return 'status-normal'
  if (status === 'warning') return 'status-warning'
  if (status === 'offline' || status === 'error') return 'status-error'
  // 根据 priority 推断
  if (props.todoItem.priority === 'urgent') return 'status-error'
  if (props.todoItem.priority === 'high') return 'status-warning'
  return 'status-normal'
})

/** 在线状态文本 */
const onlineStatusText = computed<string>(() => {
  const status = props.todoItem.description?.online_status
  if (status === 'normal' || status === 'online') return '正常'
  if (status === 'warning') return '告警'
  if (status === 'offline' || status === 'error') return '异常'
  // 根据 priority 推断
  if (props.todoItem.priority === 'urgent') return '异常'
  if (props.todoItem.priority === 'high') return '告警'
  return '正常'
})

/** 告警次数 CSS 类 */
const alarmCountClass = computed<string>(() => {
  const count = props.todoItem.description?.alarm_count ?? 0
  if (count > 5) return 'alarm-critical'
  if (count > 0) return 'alarm-warning'
  return 'alarm-normal'
})

/** 处理记录列表 */
const records = computed<Array<{ time: string; content: string }>>(() => {
  const descRecords = props.todoItem.description?.records
  if (Array.isArray(descRecords)) {
    return descRecords.map((r: any) => ({
      time: r.time || r.created_at || '—',
      content: r.content || r.action || '—',
    }))
  }
  // Mock 数据
  if (props.todoItem.status === 'processing') {
    return [
      { time: '10:32', content: '坐席已接单，正在排查中' },
    ]
  }
  return []
})
</script>

<style scoped>
.device-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);
}

/* ---- 设备状态网格 ---- */
.dev-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dev-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.dev-grid-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
}

/* 去掉最后一行底部边框 */
.dev-grid-row:last-child .dev-grid-cell {
  border-bottom: none;
}

/* 每行第二个 cell 加左边框 */
.dev-grid-cell:nth-child(2) {
  border-left: 1px solid var(--border-light);
}

.dev-grid-label {
  font-size: 12px;
  color: var(--text-tertiary);
}

.dev-grid-value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ---- 在线状态指示点 ---- */
.dev-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dev-status-dot.status-normal { background-color: var(--color-success); }
.dev-status-dot.status-warning { background-color: var(--color-warning); }
.dev-status-dot.status-error { background-color: var(--color-danger); }

/* ---- 告警次数颜色 ---- */
.alarm-normal { color: var(--color-success); }
.alarm-warning { color: var(--color-warning); }
.alarm-critical { color: var(--color-danger); font-weight: 600; }

/* ---- 处理记录 ---- */
.dev-records {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dev-record-item {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}

.dev-record-item:last-child {
  border-bottom: none;
}

.dev-record-time {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  min-width: 48px;
}

.dev-record-content {
  font-size: 13px;
  color: var(--text-primary);
}

.dev-records-empty {
  text-align: center;
  padding: 12px;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* ---- 操作按钮 ---- */
.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-success {
  background-color: var(--color-success);
  color: var(--bg-secondary);
  border-color: var(--color-success);
}

.tic-action-success:hover {
  opacity: 0.9;
  color: var(--bg-secondary);
}
</style>
