<template>
  <v-data-table
    class="mt-3"
    :items="items"
    :headers="headers"
    hover
    item-value="id"
  >
    <template #bottom></template>
  </v-data-table>
</template>

<script setup>
defineOptions({ name: 'myRegistration-signInTable'})
import { useI18n } from '@/hooks/web/useI18n'
import { timesTampChange } from '@/utils/date'

defineProps({
  tab: String,
  items: Array
})

const { t } = useI18n()
const headers = [
  { title: t('taskCenter.signInDays'), key: 'day', sortable: false },
  { title: t('taskCenter.points'), key: 'point', sortable: false },
  { title: t('taskCenter.createTime'), key: 'createTime', value: item => timesTampChange(item.createTime), sortable: false }
]
</script>

<style scoped lang="scss">
:deep(.v-table > .v-table__wrapper > table > thead) {
  background-color: #f7f8fa !important;
}
:deep(.v-selection-control__input) {
  // color: var(--v-primary-base) !important;
  color: #767778;
}
</style>
