<script setup lang="ts">
import { nextTick, onMounted } from 'vue'

definePageMeta({
  layout: 'header',
})
const activeTab = ref('')

// const route = useRoute();
// const { id } = route.params as { id: string };
interface PointsResult {
  points: number
  memberConsumeList: any[]
}
const pointsResult = ref<PointsResult>(null)
async function getPoints() {
  try {
    const res = await request.get('/member/getPoints')
    if (res.code === 200) {
      pointsResult.value = res.data as PointsResult
      nextTick(() => {
        activeTab.value = 'beatles'
      })
    }
  }
  catch (err) {
    console.log(err)
  }
}
getPoints()
onMounted(() => {
  // nextTick(() => {
  //   activeTab.value = 'beatles'
  // })
})
</script>

<template>
  <div class="flex justify-center bg-[#f2f5f8] items-center h-[calc(100vh-48px)]">
    <div class="w-[1200px] bg-white rounded-lg shadow-lg p-10 h-[calc(100%-40px)]">
      <h1 class="text-2xl font-bold mb-4">
        算力明细
      </h1>
      <n-tabs v-model:value="activeTab" type="line" animated>
        <!-- <n-tab-pane name="oasis" tab="已获取">
          <div class="h-[500px] overflow-y-auto">
            <div class="mc-table flex w-full">
              <div class="w-[250px]">
                获取时间
              </div>
              <div class="w-[250px]">
                获取来源
              </div>
              <div class="flex-1">
                算力生效时间
              </div>
              <div class="flex-1">
                算力到期时间
              </div>
              <div class="w-[200px]">
                算力值
              </div>
            </div>
            <div v-for="item in pointsResult.memberConsumeList" :key="item" class="mc-table flex w-full">
              <div class="w-[250px]">
                {{ item.consumeTime }}
              </div>
              <div class="w-[250px]">
                每日赠送算力清零
              </div>
              <div class="flex-1">
                -
              </div>
              <div class="w-[180px]">
                {{ item.consumePoints }}
              </div>
            </div>
          </div>
        </n-tab-pane> -->
        <n-tab-pane name="beatles" tab="已消耗">
          <div class="h-[500px] overflow-y-auto">
            <div class="mc-table flex w-full">
              <div class="w-[250px]">
                消耗时间
              </div>
              <div class="w-[250px]">
                消耗类型
              </div>
              <div class="flex-1">
                任务详情
              </div>
              <div class="w-[200px]">
                算力值
              </div>
            </div>
            <div v-for="item in pointsResult.memberConsumeList" :key="item" class="mc-table flex w-full">
              <div class="w-[250px]">
                {{ item.consumeTime }}
              </div>
              <div class="w-[250px]">
                每日赠送算力清零
              </div>
              <div class="flex-1">
                -
              </div>
              <div class="w-[180px]">
                {{ item.consumePoints }}
              </div>
            </div>
          </div>
        </n-tab-pane>
      </n-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mc-table {
  > div {
    line-height: 40px;
    height: 50px;
    border-bottom: 1px solid #eee;
  }
}
</style>
