<template>
  <div class="workSpace">
    <searchForm :keys="['userName']"> </searchForm>
    <VaCard tag="b" class="table">
      <div class="va-table-responsive">
        <table class="va-table">
          <thead>
            <tr>
              <th>人员姓名</th>
              <th>打卡时间</th>
              <th>打卡地点</th>
              <th>考勤状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in users" :key="user.id">
              <td>{{ user.fullName }}</td>
              <td>{{ user.email }}</td>
              <td>{{ user.country }}</td>
              <td>
                <VaBadge :text="user.text" :color="user.status" />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="pagination">
        <VaPagination v-model="page" :pages="15" :visible-pages="4" class="justify-center sm:justify-start" />
      </div>
    </VaCard>
  </div>
</template>

<script>
  import searchForm from '../module/searchForm.vue'
  export default {
    name: 'index',
    components: {
      searchForm,
    },
    data() {
      return {
        page: 3,
        users: [
          {
            id: 1,
            fullName: 'Ashley Mcdaniel',
            email: '2024-01-06 10:00:00',
            country: 'Cayman Islands',
            status: 'warning',
            text: '迟到',
          },
          {
            id: 2,
            fullName: 'Todd Sellers',
            email: '2024-01-06 08:00:00',
            country: 'Togo',
            status: 'info',
            text: '正常',
          },
          {
            id: 3,
            fullName: 'Sherman Knowles',
            email: '2024-01-06 17:00:00',
            country: 'Central African Republic',
            status: 'warning',
            text: '早退',
          },
          {
            id: 4,
            fullName: 'Vasquez Lawson',
            email: '2024-01-06 08:00:00',
            country: 'Bouvet Island',
            status: 'info',
            text: '正常',
          },
        ],
      }
    },
  }
</script>

<style scoped lang="less">
  .workSpace {
    width: 100%;
    flex: 1;
  }
  .table {
    margin-top: 20px;
    width: 100%;
  }
  .va-table-responsive {
    width: 100%;
  }
  .va-table {
    width: 100%;
  }
  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 10px;
  }
</style>
