<template>
  <CtTable
    class="mt-3"
    :items="items"
    :headers="headers"
    :loading="false"
    :elevation="0"
    :isTools="false"
    :showPage="true"
    :total="total"
    :page-info="query"
    itemKey="id"
    height="60vh"
    @pageHandleChange="handlePageChange"
  >
  </CtTable>
</template>

<script setup>
defineOptions({ name: 'myRegistration-integralTable'})
import { ref } from 'vue'
defineProps({
  tab: String,
  items: Array
})

const total = ref(0)
const query = ref({
  pageNo: 1,
  pageSize: 10
})
const headers = [
  { title: '兑换物品', key: '兑换物品' },
  { title: '兑换时间', key: '兑换时间' },
  { title: '消耗积分', key: '消耗积分' },
]

const handlePageChange = (e) => {
  query.value.pageNo = e.pageNo
}

</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>