<template>
  <ModalDialog
    :visible="visible"
    :title="`${taskData.title}     任务时间：${taskData.taskTime}`"
    @close="handleClose"
  >
    <!-- 右侧详情按钮 -->
    <template #header-right>
      <button class="detail-btn" @click="toggleDetails">
        <el-icon v-if="showDetails" style="margin-right: 18px"><DArrowLeft /></el-icon>
        <el-icon v-else style="margin-right: 18px"><DArrowRight /></el-icon>
        {{ showDetails ? '返回' : '详情' }}
      </button>
    </template>

    <!-- 弹窗内容 -->
    <div class="task-detail-container">
      <!-- 左侧机器人区域 -->
      <div class="robot-section">
        <h3 class="section-title">{{ taskData.robotName }}</h3>
        <div class="robot-container">
          <el-image :src="getRobotImage(robotType)" :alt="taskData.robotName" class="robot-image">
            <template #placeholder>
              <div class="placeholder-image"></div>
            </template>
            <template #error>
              <div class="error-image">图片加载失败</div>
            </template>
          </el-image>
          <img src="../assets/images/robot_pedestal.png" alt="机器人底座" class="robot-pedestal" />
          <div class="robot-status" v-if="isCurrentTaskRunning">
            <span class="status-dot"></span>
            <span class="status-dot"></span>
            <span class="status-dot"></span>
          </div>
        </div>

        <!-- 统计数据 -->
        <div class="stats-section">
          <div class="stat-item">
            <div class="stat-label">工作任务：</div>
            <div class="number-container">
              <div class="number-item" v-for="(digit, index) in workTaskDigits" :key="index">
                {{ digit }}
              </div>
            </div>
            <div class="stat-unit">次</div>
          </div>
          <div class="stat-item">
            <div class="stat-label">发现问题：</div>
            <div class="number-container">
              <div class="number-item" v-for="(digit, index) in problemDigits" :key="index">
                {{ digit }}
              </div>
            </div>
            <div class="stat-unit">个</div>
          </div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="content-section">
        <!-- 详情视图 -->
        <TaskDetailView
          v-if="showDetails"
          :show-details="showDetails"
          :is-loading-details="isLoadingDetails"
          :task-details="taskDetails"
          :useSSE="useSSE"
          :sseUrl="sseUrl"
          :useMarkdown="useMarkdown"
        />

        <!-- 常规视图 -->
        <TaskDetectionTable
          v-else
          :selected-task-data="selectedTaskData"
          :is-current-task-running="isCurrentTaskRunning"
          :current-institution-name="currentInstitutionName"
          :inspected-count="inspectedCount"
          :institutions-list="institutionsList"
          :is-checked="isChecked"
          :is-checking="isChecking"
          :get-institution-color="getInstitutionColor"
        />
      </div>

      <!-- 底部任务列表 -->
      <div class="task-list-section">
        <div class="task-list-container" ref="taskListContainer">
          <div
            class="task-item"
            v-for="(task, index) in taskData.taskList"
            :key="index"
            :class="{ 'is-selected': selectedTaskIndex === index }"
            @click="handleTaskClick(index)"
          >
            <div>
              <div class="task-title">
                <el-icon class="clock-icon"><Clock /></el-icon>
                任务时间
              </div>

              <div class="task-time">{{ task.time }}</div>
            </div>

            <div class="task-status" :class="getTaskStatus(index)"></div>
          </div>
        </div>
      </div>
    </div>
  </ModalDialog>
</template>

<script setup lang="ts">
import { DArrowRight, DArrowLeft, Clock } from '@element-plus/icons-vue'
import ModalDialog from './ModalDialog.vue'
import TaskDetailView from './TaskDetailView.vue'
import TaskDetectionTable from './TaskDetectionTable.vue'
import { useTaskDetail } from '../composables/useTaskDetail'

interface Props {
  visible: boolean
  robotType: string
}

const props = defineProps<Props>()

const emit = defineEmits<{
  close: []
}>()

// 使用任务详情组合式函数
const {
  taskData,
  taskListContainer,
  selectedTaskIndex,
  showDetails,
  taskDetails,
  isLoadingDetails,
  sseUrl,
  useSSE,
  useMarkdown,
  workTaskDigits,
  problemDigits,
  selectedTaskData,
  currentInstitutionName,
  inspectedCount,
  institutionsList,
  isCurrentTaskRunning,
  isChecked,
  isChecking,
  toggleDetails,
  handleTaskClick,
  getRobotImage,
  getTaskStatus,
  getInstitutionColor,
} = useTaskDetail(props)

// 处理弹窗关闭
const handleClose = () => {
  // 调用组合式函数中的清理逻辑
  emit('close')
}
</script>

<style lang="scss" scoped>
@use '../assets/styles/TaskDetailModal.scss' as *;

$transition-speed: 0.3s ease;

// 头部右侧按钮区域
:deep(.modal-header-right) {
  gap: 20px;

  .detail-btn {
    position: relative;
    width: 310px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    color: $neon-cyan;
    padding: 0;
    font-size: 32px;
    cursor: pointer;
    transition: all $transition-speed;
    border-radius: 0;
    box-shadow:
      inset 6px 0 0 rgba(0, 201, 181, 1),
      0 8px 8px 0 rgba(0, 0, 0, 0.25),
      inset 0 0 6px 0 rgba(0, 255, 230, 0.1);
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;

    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }
  }
}
</style>
