<!-- 积分明细 -->
<template>
  <div>
    <integralShow></integralShow>
    <!-- 任务中心 -->
    <div style="font-size: 14px; color: #777; text-align: right;" class="mr-5 mt-3 cursor-pointer" @click="router.push({ path: '/personalTaskCenter' })">《<span style=" color: var(--v-primary-base);">任务中心</span>》</div>
    <!-- 积分明细 -->
    <div class="mt-3">
      <v-tabs v-model="tab" style="border-radius: 5px;" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:model-value="handleChangeTab">
        <v-tab :value="1"> {{ $t('publicRecruitment.whole') }}</v-tab>
        <v-tab :value="2"> {{ $t('publicRecruitment.In') }}</v-tab>
        <v-tab :value="3"> {{ $t('publicRecruitment.freezing') }}</v-tab>
        <v-tab :value="4"> {{ $t('publicRecruitment.Pay') }}</v-tab>
      </v-tabs>
      <TablePage :items="dataList"></TablePage>
    </div>
  </div>
</template>

<script setup>
import TablePage from './components/integralTable.vue'
import integralShow from '@/views/personal/components/integralShow.vue'
import { useRouter } from 'vue-router'; const router = useRouter()
import { ref } from 'vue'
defineOptions({name: 'personal-myPublicRecruitment-myRegistration'})
const tab = ref(0)
const dataList = ref([])
// 数据
const getData = () => {
  dataList.value = [
    { 积分类型: '积分签到', 时间: '2024-06-20 20:00', 积分: '5' },
    { 积分类型: '积分到期', 时间: '2024-06-20 00:00', 积分: '-100' },
    { 积分类型: '浏览积分', 时间: '2024-06-21 09:05', 积分: '15' },
    { 积分类型: '浏览职业分析报告', 时间: '2024-06-22 10:27', 积分: '-20' },
  ]
}
getData()
// 切换
const handleChangeTab = () => {
  // tab
  // getData()
}
</script>
<style lang="scss" scoped>
</style>
