<template>
  <vab-card class="pending-card">
    <template #header>
      <div class="card-header">
        <span class="title">
          <vab-icon icon="notification-3-line" class="mr-5" />
          工作台
        </span>
        <el-tag size="small" type="danger" effect="plain">待办 3</el-tag>
      </div>
    </template>
    
    <el-tabs v-model="activeTab" class="custom-tabs">
      <el-tab-pane label="报修待办" name="repair">
        <div class="task-list">
          <div v-for="item in repairTasks" :key="item.id" class="task-item">
            <div class="task-icon bg-warning">
              <vab-icon icon="tools-line" style="font-size: 18px; color: #fff;" />
            </div>
            <div class="task-content">
              <div class="task-title">{{ item.title }}</div>
              <div class="task-meta">
                <span>{{ item.room }}</span>
                <span class="divider">|</span>
                <span>{{ item.time }}</span>
              </div>
            </div>
            <el-button type="primary" size="small" plain>处理</el-button>
          </div>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="晚归预警" name="late">
        <div class="task-list">
          <div v-for="item in lateTasks" :key="item.id" class="task-item">
            <div class="task-icon bg-danger">
              <vab-icon icon="alarm-warning-line" style="font-size: 18px; color: #fff;" />
            </div>
            <div class="task-content">
              <div class="task-title">{{ item.student }} 晚归未归</div>
              <div class="task-meta">
                <span>{{ item.room }}</span>
                <span class="divider">|</span>
                <span>最后记录: {{ item.lastTime }}</span>
              </div>
            </div>
            <el-button type="danger" size="small" plain>联系</el-button>
          </div>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="缴费审核" name="fee">
        <div class="task-list">
          <div v-for="item in feeTasks" :key="item.id" class="task-item">
            <div class="task-icon bg-success">
              <vab-icon icon="money-cny-circle-line" style="font-size: 18px; color: #fff;" />
            </div>
            <div class="task-content">
              <div class="task-title">{{ item.student }} 缴纳住宿费</div>
              <div class="task-meta">
                <span>¥ {{ item.amount }}</span>
                <span class="divider">|</span>
                <span>{{ item.time }}</span>
              </div>
            </div>
            <el-button type="success" size="small" plain>审核</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </vab-card>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('repair')

const repairTasks = [
  { id: 1, title: '空调不制冷', room: '一号书院 302', time: '10分钟前' },
  { id: 2, title: '洗手台漏水', room: '二号书院 505', time: '30分钟前' },
  { id: 3, title: '门锁损坏', room: '三号书院 101', time: '1小时前' },
]

const lateTasks = [
  { id: 1, student: '梁健', room: '一号书院 302', lastTime: '昨日 23:45' },
  { id: 2, student: '鲁永波', room: '一号书院 305', lastTime: '昨日 22:30' },
]

const feeTasks = [
  { id: 1, student: '王应哲', amount: 1200, time: '刚刚' },
  { id: 2, student: '杨勇捷', amount: 800, time: '5分钟前' },
]
</script>

<style lang="scss" scoped>
.pending-card {
  height: 100%;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
    .mr-5 { margin-right: 8px; }
  }

  .task-list {
    .task-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px dashed #f0f2f5;

      &:last-child {
        border-bottom: none;
      }

      .task-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        flex-shrink: 0;
        
        .vab-icon {
          font-size: 18px;
          color: #fff;
        }

        &.bg-warning { background-color: #e6a23c; }
        &.bg-danger { background-color: #f56c6c; }
        &.bg-success { background-color: #67c23a; }
      }

      .task-content {
        flex: 1;
        overflow: hidden;
        
        .task-title {
          font-size: 14px;
          color: #303133;
          margin-bottom: 4px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .task-meta {
          font-size: 12px;
          color: #909399;
          
          .divider {
            margin: 0 5px;
            color: #dcdfe6;
          }
        }
      }
    }
  }
}
</style>