<template>
  <div
    class="bk-table rounded-[10px] bg-black-19191A pb-[47px] rounded-b-[10px]"
  >
    <t-header
      :list="invariable.labels"
      bg-color="bg-black-006"
      textColor="text-white"
    />
    <el-skeleton class="w-full px-[34px]" :loading="loading" animated>
      <template #template>
        <el-skeleton-item
          variant="p"
          class="my-[24px]"
          v-for="item in invariable.pageSize"
        />
      </template>
      <template #default>
        <div
          v-for="(item, index) in currentData"
          :key="item?.timestamp + index"
          @click="routerLink(item?.hash)"
        >
          <bk-row
            :sequence="invariable.sequence"
            :values="item"
            :colorSequence="invariable.colorSequence"
          />
        </div>
      </template>
    </el-skeleton>
    <div
      class="bk-pagination flex flex-row items-center justify-end pt-[32px] pr-[34px]"
    >
      <el-pagination
        :page-size="invariable.pageSize"
        layout="prev, pager, next, jumper"
        v-model:current-page="currentPage"
        :total="paginationState.totalPage"
      />
      <span class="text-white text-[14px] font-normal">Page</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect } from 'vue'
import THeader from '../dBase/tHeader.vue'
import BkRow from '../dBase/bkRow.vue'
import { bkTableCollocate } from '../constant'
import { useRouter } from 'vue-router'
import { getfindBlockList } from '@src/api/BlockController'
import { timeConvert } from '@src/utils/string'

const invariable = {
  ...bkTableCollocate,
  pageSize: 10, // 每一页的数量
}

const router = useRouter()
const paginationState = reactive({
  totalPage: 0, // 总页数
})

let currentPage = ref(1) // 当前页
let currentData = ref() // 当前页的数据
let loading = ref(true) // 骨架屏加载
// 请求数据
const initBlock = async (page: number) => {
  const params = {
    pageNum: page,
    pageSize: invariable.pageSize,
  }
  const res = await getfindBlockList(params)
  // 数据请求结束 更新总页数
  paginationState.totalPage =
    Math.floor(res.data.total / invariable.pageSize + 1) * invariable.pageSize
  // 更新当前数据
  currentData.value = res.data.rows.map((item: any) => ({
    ...item,
    timestamp: timeConvert(item?.timestamp),
  }))
  // 骨架屏隐藏
  loading.value = false
}
// 监听分页更新 -> 请求数据
watchEffect(() => {
  loading.value = true
  initBlock(currentPage.value)
})
// 路由跳转
const routerLink = (id: string | number) => router.push(`/blocks/${id}`)
</script>

<style lang="scss">
@import './zExtraStyle.scss';
</style>
