<template>
<router-view></router-view>

        

</template>

<script setup lang="ts">
import { ref, computed, onMounted} from 'vue'
import { User } from '@element-plus/icons-vue'
import { useGetDerivedNamespace } from 'element-plus'
import { getSessionVar } from '@/utils/session'
const user = ref({
  id: "0",
  full_name: 'John Doe',
  username: 'johndoe', 
})
interface Task {
  id: number
  name: string
  type: string
  status: string
  createTime: string
  attachments?: Array<{ name: string; url: string }>
}

interface WorkQueue {
  id: number
  name: string
  taskCount: number
  tasks: Task[]
}

interface Worker {
  id: number
  name: string
  status: '忙碌' | '空闲'
}

// 模拟数据
const queues = ref<WorkQueue[]>(Array.from({ length: 5 }, (_, i) => ({
  id: i + 1,
  name: `队列 ${i + 1}`,
  taskCount: Math.floor(Math.random() * 10),
  tasks: []
})))

const workers = ref<Worker[]>(Array.from({ length: 10 }, (_, i) => ({
  id: i + 1,
  name: `工作人员 ${i + 1}`,
  status: Math.random() > 0.5 ? '忙碌' : '空闲'
})))

const selectedQueue = ref<WorkQueue | null>(null)
const selectedWorker = ref<Worker | null>(null)

const selectQueue = (queue: WorkQueue) => {
  selectedQueue.value = queue
  selectedWorker.value = null
}

const selectWorker = (worker: Worker) => {
  selectedWorker.value = worker
  selectedQueue.value = null
}

const sortedTasks = computed(() => {
  return selectedQueue.value?.tasks.sort((a, b) => 
    new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
  ) || []
})

const getTaskTagType = (status: string) => {
  switch(status) {
    case '进行中': return 'warning'
    case '已完成': return 'success'
    case '已失败': return 'danger'
    default: return 'info'
  }
}

onMounted(() => {
  // 模拟从后端获取数据
  setTimeout(() => {
    user.value = {
      id: getSessionVar('user_id') || "0",
      full_name: getSessionVar('full_name') || 'John Doe',
      username: getSessionVar('username') || 'johndoe',
    }
  }) 
})
</script>

<style scoped>


.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  width: 100%;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .task-list {
    display: grid;
    gap: 15px;

    .task-card {
      margin-bottom: 10px;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .task-content {
        p {
          margin: 5px 0;
          color: #666;
        }

        .attachments {
          margin-top: 10px;
          display: flex;
          gap: 10px;
        }
      }
    }
  }
}
</style>
