<template>
  <div
    class="tableBlock-tabs mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
  >
    <Cards
      :title="cardOptions.title"
      :value="`Token ID: ${currentTokenId}`"
      :options="cardOptions.options"
      :total-supply="cardOptions.totalSupply"
      :url="cardOptions.url"
    />
    <div
      class="flex flex-1 w-full bg-black-19191A mt-[56px] pb-[28px] rounded-[10px] overflow-hidden"
    >
      <div class="details-tabs w-full">
        <el-tabs v-model="active" class="w-full">
          <el-tab-pane label="Token Transfers" name="tokenTransfers">
            <div
              class="flex flex-1 flex-col desktop:pt-[36px] desktop:px-[34px] mobile:px-[20px] mobile:pt-[24px]"
            >
              <p class="text-white text-[22px] font-semibold">
                Token Transfers
              </p>
              <div
                class="mt-[10px] bg-black-2B2B2C rounded-[10px] px-[34px] py-[30px]"
              >
                <transfers-row
                  v-for="(item, index) in transfersRows"
                  :key="index + item.title"
                  :title="item.title"
                  :value1="item.value1"
                  :value2="item.value2"
                  :value3="item.value3"
                  :state="item.state"
                />
              </div>
              <upper-lower-switch :current="'page1'" />
            </div>
          </el-tab-pane>
          <!-- Token Holders -->
          <!-- <el-tab-pane label="Token Holders" name="tokenHolders">
            <div class="flex flex-1 justify-center items-center h-[210px]">
              <p class="text-white text-[14px] font-normal opacity-80">
                There are no transactions for this Token Holders.
              </p>
            </div>
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect } from 'vue'
import Cards from '../BitcNFt/cards.vue'
import transfersRow from './transfersRow.vue'
import UpperLowerSwitch from '@src/components/base/UpperLowerSwitch.vue'
import {
  getFindReceiptByTokenPage,
  getFindTokenInfo,
} from '@src/api/TokensController'
import { useRoute } from 'vue-router'
const active = ref('tokenTransfers')

const route = useRoute()
const cardOptions = reactive({
  title: '',
  options: [
    {
      key: 'ERC721',
      value: '',
    },
    {
      key: 'Transfers',
      value: '',
    },
  ],
  totalSupply: '',
  url: '',
})
const holdrersRows = ref<any>([])
const transfersRows = ref<any>([])

const currentTokenId = ref('')

// 请求代币信息
const requestInfo = async (tokenId: string, address: string) => {
  const params = {
    tokenId: tokenId,
    contractAddress: address,
  }
  const res = await getFindTokenInfo(params)
  const { data } = res
  console.log(data)

  cardOptions.title = data.name
  cardOptions.url = data.tokenImages
  cardOptions.options[0].key = data.tokenType
  cardOptions.options[1].value = data.transfers
  // cardOptions.options[2].value = data.transfers
}
// 请求Token Transfers
const requestTransfers = async (address: string) => {
  const params = {
    contractAddress: address,
    pageNum: 1,
    pageSize: 10,
  }
  const res = await getFindReceiptByTokenPage(params)
  transfersRows.value = res.data.rows.map((item: any) => {
    return {
      title: `Block #${item.blockNumber}`,
      value1: item?.blockHash,
      value2: item?.from,
      value3: item?.to,
      state: item?.status === '0x1' ? 'Success' : 'Faild',
    }
  })
  console.log(res)
}
watchEffect(() => {
  let path = route.fullPath.split('/')[2] || undefined
  let tokenId = path?.split('?')[0].split('=')[1] || undefined
  let address = path?.split('?')[1].split('=')[1] || undefined

  if (address == undefined || tokenId == undefined) {
    return
  }
  currentTokenId.value = parseInt(tokenId).toString()
  requestInfo(tokenId, address)
  requestTransfers(address)
})
</script>

<style scoped></style>
