<template>
  <!-- 主要内容 -->
  <div class="scheduler-main">
    <!-- 页面头部 -->
    <div class="scheduler-header">
      <div class="header-left">
        <h1 class="page-title">调度中心</h1>
      </div>
      <div class="header-actions">
        <a-space size="middle">
          <span class="power-label">任务完成后电源操作：</span>
          <a-select
            v-model:value="powerAction"
            style="width: 140px"
            :disabled="!canChangePowerAction"
            @change="onPowerActionChange"
            size="large"
          >
            <a-select-option
              v-for="(text, signal) in POWER_ACTION_TEXT"
              :key="signal"
              :value="signal"
            >
              {{ text }}
            </a-select-option>
          </a-select>
        </a-space>
      </div>
    </div>

    <!-- 调度台标签页 -->
    <div class="scheduler-tabs">
      <a-tabs
        v-model:activeKey="activeSchedulerTab"
        type="editable-card"
        @edit="onSchedulerTabEdit"
        :hide-add="false"
      >
        <a-tab-pane
          v-for="tab in schedulerTabs"
          :key="tab.key"
          :closable="tab.closable && tab.status !== '运行'"
          :data-tab-key="tab.key"
        >
          <template #tab>
            <span class="tab-title">{{ tab.title }}</span>
            <a-tag :color="TAB_STATUS_COLOR[tab.status]" size="small" class="tab-status">
              {{ tab.status }}
            </a-tag>
            <a-tooltip v-if="tab.status === '运行'" title="运行中的调度台无法删除" placement="top">
              <LockOutlined class="tab-lock-icon" />
            </a-tooltip>
          </template>

          <!-- 任务控制与状态内容 -->
          <div class="task-unified-card" :class="`status-${tab.status}`">
            <!-- 任务控制栏 -->
            <SchedulerTaskControl
              v-model:selectedTaskId="tab.selectedTaskId"
              v-model:selectedMode="tab.selectedMode"
              :taskOptions="taskOptions"
              :taskOptionsLoading="taskOptionsLoading"
              :status="tab.status"
              :disabled="tab.status === '运行'"
              @start="startTask(tab)"
              @stop="stopTask(tab)"
            />

            <!-- 状态展示区域 -->
            <div class="status-container">
              <div class="overview-panel-container">
                <TaskOverviewPanel
                  :ref="el => setOverviewRef(el, tab.key)"
                />
              </div>
              <div class="log-panel-container">
                <SchedulerLogPanel
                  :log-content="tab.lastLogContent"
                  :tab-key="tab.key"
                  :is-log-at-bottom="tab.isLogAtBottom"
                  @scroll="onLogScroll(tab)"
                  @set-ref="setLogRef"
                />
              </div>
            </div>
          </div>
        </a-tab-pane>
        
        <!-- 空状态 -->
        <template #empty>
          <div class="empty-tab-content">
            <a-empty description="暂无调度台" />
          </div>
        </template>
      </a-tabs>
    </div>

    <!-- 消息对话框 -->
    <a-modal
      v-model:open="messageModalVisible"
      :title="currentMessage?.title || '系统消息'"
      @ok="sendMessageResponse"
      @cancel="cancelMessage"
    >
      <div v-if="currentMessage">
        <p>{{ currentMessage.content }}</p>
        <a-input
          v-if="currentMessage.needInput"
          v-model:value="messageResponse"
          placeholder="请输入回复内容"
        />
      </div>
    </a-modal>

    <!-- 电源操作倒计时弹窗已移至全局组件 GlobalPowerCountdown.vue -->
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { LockOutlined } from '@ant-design/icons-vue'
import {
  getPowerActionText,
  POWER_ACTION_TEXT,
  TAB_STATUS_COLOR,
} from './schedulerConstants'
import { useSchedulerLogic } from './useSchedulerLogic'
import SchedulerTaskControl from './SchedulerTaskControl.vue'
import SchedulerLogPanel from './SchedulerLogPanel.vue'
import TaskOverviewPanel from './TaskOverviewPanel.vue'

// 使用业务逻辑层
const {
  // 状态
  schedulerTabs,
  activeSchedulerTab,
  taskOptionsLoading,
  taskOptions,
  powerAction,
  powerCountdownVisible,
  powerCountdownData,
  messageModalVisible,
  currentMessage,
  messageResponse,

  // 计算属性
  canChangePowerAction,

  // Tab 管理
  addSchedulerTab,
  removeSchedulerTab,

  // 任务操作
  startTask,
  stopTask,

  // 日志操作
  onLogScroll,
  setLogRef,

  // 电源操作
  onPowerActionChange,
  cancelPowerAction,

  // 消息操作
  sendMessageResponse,
  cancelMessage,

  // 初始化与清理
  initialize,
  loadTaskOptions,
  cleanup,

  // 新增：任务总览面板引用管理
  setOverviewRef,
} = useSchedulerLogic()

// Tab 操作
const onSchedulerTabEdit = (targetKey: string | MouseEvent, action: 'add' | 'remove') => {
  if (action === 'add') {
    addSchedulerTab()
  } else if (action === 'remove' && typeof targetKey === 'string') {
    removeSchedulerTab(targetKey)
  }
}


// 生命周期
onMounted(() => {
  initialize() // 初始化TaskManager订阅
  loadTaskOptions()
})

onUnmounted(() => {
  cleanup()
})
</script>

<style scoped>
/* 页面容器 */
.scheduler-main {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--ant-color-bg-layout);
}

/* 页面头部样式 */
.scheduler-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 16px;
  padding: 0 4px;
}

.header-left {
  flex: 1;
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
  color: var(--ant-color-text);
  background: linear-gradient(135deg, var(--ant-color-primary), var(--ant-color-primary-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.power-label {
  font-size: 14px;
  color: var(--ant-color-text-secondary);
  margin-right: 8px;
}

/* 标签页样式 */
.scheduler-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--ant-color-bg-container);
  border-radius: 8px;
  padding: 12px;
}

.scheduler-tabs :deep(.ant-tabs) {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--ant-color-bg-container);
}

/* 任务卡片统一容器 */
.task-unified-card {
  background-color: transparent;
  box-shadow: none;
  height: calc(100vh - 230px); /* 动态计算高度 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 根据状态变化的样式 */
.task-unified-card.status-新建 {
  background-color: transparent;
}

.task-unified-card.status-运行 {
  background-color: transparent;
}

.task-unified-card.status-结束 {
  background-color: transparent;
}

/* 状态容器 */
.status-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 16px;
  padding: 0;
  margin: 0;
}

/* 任务总览面板容器 */
.overview-panel-container {
  flex: 0 0 33.333333%; /* 占据1/3宽度 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 日志面板容器 */
.log-panel-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 电源操作倒计时弹窗样式已移至 GlobalPowerCountdown.vue */

/* 响应式 - 移动端适配 */
@media (max-width: 768px) {
  .scheduler-main {
    padding: 8px;
  }

  .scheduler-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .power-label {
    display: none;
  }
  
  .status-container {
    flex-direction: column;
  }
  
  .overview-panel-container,
  .log-panel-container {
    flex: 1;
    width: 100%;
  }

  /* 移动端倒计时弹窗适配已移至 GlobalPowerCountdown.vue */
}
</style>