<template>
    <div class="task-container">
      <el-table
        :data="currentPageData"
        style="width: 100%"
        stripe
        row-key="id"
        v-loading="loading"
      >
        <el-table-column fixed type="index" label="序号" align="center" width="60">
        <template #default="{ $index }">
        {{(currentPage - 1) * pageSize + $index + 1 }}
        </template>
        </el-table-column>
        <el-table-column prop="name" label="任务名称" width="300" />
        <el-table-column prop="state" label="状态" width="300" sortable />
        <el-table-column prop="createTime" label="创建时间" width="300" sortable />
        <el-table-column prop="updateTime" label="修改时间" width="300" sortable />
      </el-table>

      <div class="pagination-container">
      <el-pagination
        current-page="currentPage"
        page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]"
      />
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, computed , inject} from 'vue'
  import { ElMessage } from 'element-plus' 
  import { getData , postData } from '@/api/axios.js'

  const userName = inject('userName');
  // 任务状态枚举
  const TASK_STATUS = {
    PENDING: 0,
    RUNNING: 1,
    SUCCESS: 2,
    FAILED: 3
  }
  
  // 模拟任务数据
  const loading = ref(false)
  
// 数据列表
const items = ref([])

  // 获取数据逻辑修复
  const fetchTasks = async () => {
    try {
      const response = await postData('/selectTask/' , {
        username:userName
      })
      if (response.status === "success" && response.data?.length) {
        items.value = response.data //  直接赋值数组
        total.value = response.data.length //  动态设置总数
      }
    } catch (error) {
      console.error('获取任务列表失败:', error)
      ElMessage.error('数据加载失败')
    }
  }

  //请求获取数据
  onMounted(() => {
    fetchTasks()
  })
  
  // 分页计算属性
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const currentPageData = computed(() => {
  if (!items.value.length) return []
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  const itemlist =  items.value.slice(start, end)
  for(let i = 0; i < itemlist.length; i++)
  {
    itemlist[i].createTime = new Date(itemlist[i].createTime).toLocaleString('zh-CN');
    itemlist[i].updateTime = new Date(itemlist[i].updateTime).toLocaleString('zh-CN');
  }
  return itemlist
})

  </script>
  
  <style scoped>
  .task-container {
    padding: 20px;
  }
  
  .log-container {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    background: #1e1e1e;
    border-radius: 4px;
  }
  
  .log-item {
    padding: 4px 0;
    font-family: monospace;
    font-size: 12px;
    color: #d4d4d4;
  }
  
  .log-item.info {
    color: #9cdcfe;
  }
  
  .log-item.warn {
    color: #dcdcaa;
  }
  
  .log-item.error {
    color: #f48771;
  }
  
  .error-content {
    white-space: pre-wrap;
    word-break: break-all;
    padding: 10px;
    background: #f8f8f8;
    border-radius: 4px;
  }
  </style> 