<template>
  <div class="workSpace">
    <searchForm :keys="['month']"> </searchForm>
    <VaCard tag="b" class="table">
      <div class="va-table-responsive">
        <table class="va-table">
          <thead>
            <tr>
              <th>记录编号</th>
              <th>记录时间段</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in users" :key="user.id">
              <td>{{ user.email }}</td>
              <td>{{ user.country }}</td>
              <td>
                <exportBtn></exportBtn>
                <previewRecordBtn></previewRecordBtn>
              </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'
  import exportBtn from './module/exportBtn.vue'
  import previewRecordBtn from './module/previewRecordBtn.vue'
  export default {
    name: 'index',
    mounted() {},
    components: {
      searchForm,
      exportBtn,
      previewRecordBtn,
    },
    data() {
      return {
        page: 3,
        users: [
          {
            id: 1,
            fullName: '系统管理员',
            email: 'ashleymcdaniel@nebulean.com',
            country: 'Cayman Islands',
            status: 'warning',
          },
          {
            id: 2,
            fullName: '普通员工',
            email: 'sellerstodd@nebulean.com',
            country: 'Togo',
            status: 'info',
          },
          {
            id: 3,
            fullName: '人事',
            email: 'shermanknowles@nebulean.com',
            country: 'Central African Republic',
            status: 'warning',
          },
          {
            id: 4,
            fullName: '财务',
            email: 'vasquezlawson@nebulean.com',
            country: 'Bouvet Island',
            status: 'info',
          },
        ],
      }
    },
  }
</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>
