<template>
  <div class="schedule-page">
    <div class="page-header">
      <h2>定时任务</h2>
      <el-button type="primary" @click="showCreateDialog = true">
        <el-icon><Plus /></el-icon>
        创建任务
      </el-button>
    </div>
    
    <div class="page-card">
      <el-table :data="tasks" v-loading="loading">
        <el-table-column prop="title" label="任务名称" />
        <el-table-column label="执行时间" width="200">
          <template #default="{ row }">
            {{ formatDate(row.scheduledAt) }}
          </template>
        </el-table-column>
        <el-table-column label="重复" width="100">
          <template #default="{ row }">
            {{ row.repeat || '不重复' }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button type="primary" link size="small">编辑</el-button>
            <el-button type="danger" link size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-empty v-if="tasks.length === 0" description="暂无定时任务" />
    </div>
    
    <!-- 创建任务对话框 -->
    <el-dialog v-model="showCreateDialog" title="创建定时任务" width="500px">
      <el-form :model="createForm" label-width="100px">
        <el-form-item label="任务名称">
          <el-input v-model="createForm.title" placeholder="输入任务名称" />
        </el-form-item>
        <el-form-item label="任务类型">
          <el-select v-model="createForm.type" style="width: 100%">
            <el-option label="发布视频" value="publish" />
            <el-option label="数据采集" value="collect_data" />
            <el-option label="评论同步" value="sync_comments" />
          </el-select>
        </el-form-item>
        <el-form-item label="执行时间">
          <el-date-picker
            v-model="createForm.scheduledAt"
            type="datetime"
            placeholder="选择执行时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="重复执行">
          <el-select v-model="createForm.repeat" style="width: 100%">
            <el-option label="不重复" value="" />
            <el-option label="每天" value="daily" />
            <el-option label="每周" value="weekly" />
            <el-option label="每月" value="monthly" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCreateDialog = false">取消</el-button>
        <el-button type="primary" @click="handleCreate">创建</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';

const loading = ref(false);
const showCreateDialog = ref(false);
const tasks = ref<any[]>([]);

const createForm = reactive({
  title: '',
  type: 'publish',
  scheduledAt: null as Date | null,
  repeat: '',
});

function formatDate(date: string) {
  return dayjs(date).format('YYYY-MM-DD HH:mm');
}

function getStatusType(status: string) {
  const types: Record<string, string> = {
    pending: 'info',
    running: 'warning',
    completed: 'success',
    failed: 'danger',
  };
  return types[status] || 'info';
}

function getStatusText(status: string) {
  const texts: Record<string, string> = {
    pending: '待执行',
    running: '执行中',
    completed: '已完成',
    failed: '失败',
  };
  return texts[status] || status;
}

function handleCreate() {
  ElMessage.info('功能开发中');
  showCreateDialog.value = false;
}

onMounted(() => {
  // TODO: 加载任务列表
});
</script>

<style lang="scss" scoped>
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  
  h2 { margin: 0; }
}
</style>
