<!-- PendingTasks 待处理任务 -->
<script setup lang="ts">
// Mock data for pending tasks
const pendingTasks = ref([
  {
    id: 1,
    title: '经销商合同审批 - 张三',
    type: '合同审批',
    status: 'pending',
    createTime: '2026-04-01 10:30',
    urgent: true
  },
  {
    id: 2,
    title: '采购订单审批 - 李四',
    type: '订单审批',
    status: 'pending',
    createTime: '2026-04-01 09:15',
    urgent: false
  },
  {
    id: 3,
    title: '客户退款申请 - 王五',
    type: '退款审批',
    status: 'pending',
    createTime: '2026-03-31 16:20',
    urgent: false
  }
]);

function handleTaskClick(task: any) {
  ElMessage.info(`处理任务: ${task.title}`);
  // TODO: Navigate to approval page with task details
}
</script>

<template>
  <div class="pending-tasks-card">
    <div class="card-header">
      <h3 class="card-title">待处理任务</h3>
      <el-badge :value="pendingTasks.length" type="warning" />
    </div>

    <div class="card-body">
      <div class="task-list">
        <div
          v-for="task in pendingTasks"
          :key="task.id"
          class="task-item"
          @click="handleTaskClick(task)"
        >
          <div class="task-info">
            <div class="task-title-row">
              <el-tag v-if="task.urgent" type="danger" size="small" effect="plain">紧急</el-tag>
              <span class="task-title">{{ task.title }}</span>
            </div>
            <div class="task-meta">
              <span class="task-type">{{ task.type }}</span>
              <span class="task-time">{{ task.createTime }}</span>
            </div>
          </div>
          <el-icon class="task-arrow">
            <ArrowRight />
          </el-icon>
        </div>
      </div>

      <el-empty v-if="pendingTasks.length === 0" description="暂无待处理任务" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.pending-tasks-card {
  background-color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--color-border);

  .card-header {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;

    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--color-text-primary);
      margin: 0;
    }
  }

  .card-body {
    .task-list {
      display: flex;
      flex-direction: column;
      gap: 12px;

      .task-item {
        display: flex;
        gap: 16px;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
        border-radius: var(--radius-md);
        background-color: var(--color-bg-light);
        cursor: pointer;
        transition: all var(--transition);

        &:hover {
          background-color: var(--color-bg);
          box-shadow: var(--shadow-sm);
        }

        .task-info {
          display: flex;
          flex-direction: column;
          gap: 6px;

          .task-title-row {
            display: flex;
            gap: 8px;
            align-items: center;

            .task-title {
              font-size: 14px;
              font-weight: 500;
              color: var(--color-text-primary);
            }
          }

          .task-meta {
            display: flex;
            gap: 12px;
            align-items: center;
            font-size: 12px;
            color: var(--color-text-secondary);

            .task-type {
              color: var(--color-accent);
            }
          }
        }

        .task-arrow {
          width: 16px;
          height: 16px;
          font-size: 16px;
          color: var(--color-text-light);
        }
      }
    }
  }
}
</style>