<template>
  <div class="rounded-[10px] bg-black-19191A pb-[47px] rounded-b-[10px]">
    <div class="bg-black-006 pt-[23px] pl-[34px]">
      <div class="w-[368px]">
        <el-input
          v-model="input"
          class="bg-black-006 h-[40px] pl-[16px] text-[12px] rounded-[8px] overflow-hidden hp-input-wrapper border-[1px] border-gray-555"
          placeholder="Token name or symbol"
          :prefix-icon="Search"
          :input-style="{ background: '#262626' }"
        />
      </div>
    </div>

    <t-header
      :list="invariable.labels"
      bg-color="bg-black-006 rounded-t-[0px]"
      textColor="text-white"
    />
    <div
      v-for="(item, index) in currentData"
      :key="item?.token + index"
      @click="routerLink(item.token)"
    >
      <!-- :values="{ ...item, serialNumber: index + 1 }" -->
      <bk-row
        :sequence="invariable.sequence"
        :values="item"
        :colorSequence="invariable.colorSequence"
      />
    </div>

    <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"
        @current-change="handleCurrentChange"
      />
      <span class="text-white text-[14px] font-normal">Page</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import THeader from '../dBase/tHeader.vue'
import BkRow from '../dBase/bkRow.vue'
import { dimensionalUpgrade } from '../tool'
import { tokensTableCollocate } from '../constant'
import router from '@src/routes'

const props = defineProps({
  data: Array as any,
})
const invariable = {
  ...tokensTableCollocate,
  pageSize: 10, // 每一页的数量
}
const paginationState = reactive({
  totalPage:
    Math.floor(props?.data.length / invariable.pageSize + 1) *
    invariable.pageSize, // 总页数
  totalData: dimensionalUpgrade(props?.data, invariable.pageSize), // 所有的分页数据
})

let currentPage = ref(1) // 当前页
let currentData = ref(paginationState.totalData[currentPage.value - 1]) // 当前页的数据
let input = ref('')

const handleCurrentChange = (page: number) => {
  currentData.value = paginationState.totalData[page - 1]
}
// 路由跳转
const routerLink = (id: string | number) =>
  router.push(`/TableBlock/tokens/${id}`)
</script>

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