<script setup lang="ts">
/**
 * 班组人员打卡列表
 *
 * 展示防汛值班人员的打卡记录，
 * 支持按班组切换和日期筛选。
 */
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const activeTab = ref(0)
const dateFilter = ref('')

/** 打卡状态映射 */
const statusMap: Record<string, string> = {
  clocked: '已打卡',
  late: '迟到',
  missing: '缺卡',
}

const statusColorMap: Record<string, 'success' | 'warning' | 'danger'> = {
  clocked: 'success',
  late: 'warning',
  missing: 'danger',
}

/** 模拟打卡数据 */
const mockRecords = [
  { id: 1, name: '张建国', team: 'A组', time: '08:25', status: 'clocked', location: '泵站1号' },
  { id: 2, name: '李明辉', team: 'A组', time: '08:32', status: 'late', location: '泵站1号' },
  { id: 3, name: '王强', team: 'B组', time: '08:15', status: 'clocked', location: '闸门3号' },
  { id: 4, name: '赵勇', team: 'B组', time: '--:--', status: 'missing', location: '闸门3号' },
  { id: 5, name: '陈志远', team: 'A组', time: '08:20', status: 'clocked', location: '河道巡查点' },
]

const filteredList = computed(() => {
  let list = mockRecords
  if (activeTab.value === 1) list = list.filter(r => r.team === 'A组')
  else if (activeTab.value === 2) list = list.filter(r => r.team === 'B组')
  return list
})

function goTeamList() {
  router.push('/teamList')
}
</script>

<template>
  <div class="page-container">
    <van-nav-bar title="打卡记录" left-arrow fixed placeholder @click-left="router.back()">
      <template #right>
        <van-icon name="user-o" size="20" @click="goTeamList" />
      </template>
    </van-nav-bar>

    <van-tabs v-model:active="activeTab" sticky>
      <van-tab title="全部" />
      <van-tab title="A组" />
      <van-tab title="B组" />
    </van-tabs>

    <div class="card-list">
      <van-empty v-if="filteredList.length === 0" description="暂无打卡记录" />
      <van-card
        v-for="item in filteredList"
        :key="item.id"
        :title="item.name"
        :desc="`点位: ${item.location}`"
      >
        <template #tags>
          <van-tag :type="statusColorMap[item.status]" size="medium">
            {{ statusMap[item.status] }}
          </van-tag>
        </template>
        <template #footer>
          <div class="card-meta">
            <span>打卡时间: {{ item.time }}</span>
            <span>{{ item.team }}</span>
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: var(--color-bg-page);

  :deep(.van-nav-bar) {
    background: var(--color-primary);
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
  }
}

.card-list {
  padding: 0 8px;

  :deep(.van-card) {
    margin: 8px;
    border-radius: 10px;
    background: var(--color-bg-card);
  }
}

.card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
</style>
