<template>
  <div class="opBtn">
    <VaButton color="info" :round="false" size="small" icon="preview" class="mr-6 mb-2" @click="showModal = true">
      查看记录详情
    </VaButton>
    <VaModal
      v-model="showModal"
      max-height="600px"
      :noDismiss="true"
      max-width="1000px"
      ok-text="提交"
      cancelText="取消"
    >
      <h3 class="va-h3">2023-12-1 ~ 2023-12-31</h3>
      <VaDataTable :items="items">
        <template #cell(头像)="{ rowData }">
          <VaAvatar :src="rowData.头像" />
        </template>
      </VaDataTable>
    </VaModal>
  </div>
</template>

<script>
  export default {
    name: 'previewRecordBtn',
    data() {
      return {
        showModal: false,
        items: [
          {
            头像: 'https://randomuser.me/api/portraits/women/5.jpg',
            姓名: 'Audrey Clay',
            联系方式: '13327777156',
            迟到: '8',
            早退: 2,
            事假: 2,
            病假: 0,
          },
          {
            头像: 'https://randomuser.me/api/portraits/men/1.jpg',
            姓名: 'Aguirre Klein',
            联系方式: '13327777156',
            迟到: '7',
            早退: 1,
            事假: 1,
            病假: 0,
          },
          {
            头像: 'https://randomuser.me/api/portraits/men/3.jpg',
            姓名: 'Tucker Kaufman',
            联系方式: '13327777156',
            迟到: '0',
            早退: 0,
            事假: 1,
            病假: 0,
          },
          {
            头像: 'https://randomuser.me/api/portraits/men/5.jpg',
            姓名: 'Herbert Keller',
            联系方式: '286 NW. Shore St.Longwood, FL 32779',
            迟到: '4',
            早退: 0,
            事假: 0,
            病假: 0,
          },
        ],
      }
    },
  }
</script>

<style scoped></style>
