<!-- =============================================================================
// 企微IT智能服务台 — 任务详情视图组件
// =============================================================================
// 说明：点击左侧待办事项时，中间栏从聊天视图切换为任务类型专属页面
// 功能：根据 todoItem.type 渲染三种子视图：
//   1. 📋 运维工单页 (ticket)
//   2. 📝 审批单页 (approval)
//   3. 🖥 设备异常页 (device)
// ============================================================================= -->

<template>
  <div class="task-detail-view">
    <!-- ================================================================== -->
    <!-- 顶部：返回按钮 + 任务标题 + 类型标签 -->
    <!-- ================================================================== -->
    <div class="tdv-header">
      <button class="tdv-back-btn" @click="handleGoBack">
        <span class="tdv-back-arrow">←</span>
        <span>返回会话</span>
      </button>

      <div class="tdv-header-center">
        <h2 class="tdv-title">{{ todoItem.title }}</h2>
        <span class="tdv-type-tag" :class="`tdv-type-${todoItem.type}`">
          {{ typeLabelMap[todoItem.type] || todoItem.type }}
        </span>
      </div>

      <div class="tdv-header-right">
        <span class="tdv-priority" :class="`tdv-priority-${todoItem.priority}`">
          {{ priorityLabelMap[todoItem.priority] || todoItem.priority }}
        </span>
      </div>
    </div>

    <!-- ================================================================== -->
    <!-- 内容区：根据类型渲染不同子视图 -->
    <!-- ================================================================== -->
    <div class="tdv-content">
      <!-- 📋 运维工单页 -->
      <TicketDetail
        v-if="todoItem.type === 'ticket'"
        :todo-item="todoItem"
        @action="handleAction"
      />

      <!-- 📝 审批单页 -->
      <ApprovalDetail
        v-else-if="todoItem.type === 'approval'"
        :todo-item="todoItem"
        @action="handleAction"
      />

      <!-- 🖥 设备异常页 -->
      <DeviceDetail
        v-else-if="todoItem.type === 'device'"
        :todo-item="todoItem"
        @action="handleAction"
      />

      <!-- 未知类型 fallback -->
      <div v-else class="tdv-unknown">
        <p>未知的任务类型：{{ todoItem.type }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// ============================================================================
// 导入
// ============================================================================
import { ElMessage } from 'element-plus'
import { useConversationStore } from '@/stores/conversation'
import type { TodoItemData } from '@/api/todo'
import TicketDetail from './task/TicketDetail.vue'
import ApprovalDetail from './task/ApprovalDetail.vue'
import DeviceDetail from './task/DeviceDetail.vue'

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

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

defineProps<Props>()

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

const conversationStore = useConversationStore()

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

/** 类型标签映射 */
const typeLabelMap: Record<string, string> = {
  ticket: '📋 运维工单',
  approval: '📝 审批单',
  device: '🖥 设备异常',
}

/** 优先级标签映射 */
const priorityLabelMap: Record<string, string> = {
  urgent: '🔴 紧急',
  high: '🟡 高',
  normal: '🟢 普通',
}

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

/**
 * 返回会话视图
 */
function handleGoBack(): void {
  conversationStore.workspaceView = 'chat'
}

/**
 * 处理操作按钮点击（Mock 模式：仅 toast 提示）
 *
 * @param action - 操作标识
 */
function handleAction(action: string): void {
  ElMessage.success(`操作成功：${action}`)
}
</script>

<style scoped>
.task-detail-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-primary);
}

/* ---- 顶部 ---- */
.tdv-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  flex-shrink: 0;
}

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

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

.tdv-back-arrow {
  font-size: 14px;
  font-weight: 600;
}

.tdv-header-center {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tdv-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

.tdv-type-tag {
  flex-shrink: 0;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.tdv-type-ticket {
  background-color: rgba(64, 158, 255, 0.1);
  color: var(--accent);
}

.tdv-type-approval {
  background-color: rgba(230, 162, 60, 0.1);
  color: var(--color-warning);
}

.tdv-type-device {
  background-color: rgba(245, 108, 108, 0.1);
  color: var(--color-danger);
}

.tdv-header-right {
  flex-shrink: 0;
}

.tdv-priority {
  font-size: 13px;
  font-weight: 500;
}

.tdv-priority-urgent {
  color: var(--color-danger);
}

.tdv-priority-high {
  color: var(--color-warning);
}

.tdv-priority-normal {
  color: var(--color-success);
}

/* ---- 内容区 ---- */
.tdv-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px;
}

/* ---- 未知类型 ---- */
.tdv-unknown {
  text-align: center;
  padding: 40px;
  color: var(--text-tertiary);
}
</style>
