<template>
  <div
    class="tableBlock-tabs desktop:mt-[-435.5px] mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
  >
    <Cards
      :title="'VNFT'"
      :value="'Token ID:' + value"
      :options="options"
      :url="'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fphoto%2F2012-3-2%2Fenterdesk.com-B526ECADD33DBD367676A93E051BA1EC.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664699626&t=88f6e0508707a9ea0bec9c5a9f7c9d67'"
    />
    <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 pt-[36px] px-[34px]">
              <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 tokenTransfers"
                  :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 { ref } from 'vue'
import Cards from '../BitcNFt/cards.vue'
import transfersRow from './transfersRow.vue'
import UpperLowerSwitch from '@src/components/base/UpperLowerSwitch.vue'
const active = ref('tokenTransfers')
const value = '4'
const options = [
  {
    key: 'ERC721',
    value: '',
  },
  {
    key: 'Transfers',
    value: '324',
  },
]
// 底部渲染的数据
const tokenTransfers = [
  {
    title: 'Block #815128',
    value1: '0x559f0e102863ef1b9798e1d4497a0f4214f05fbf7fbce549a',
    value2: '0x970d473486cg4f9dfe6b2',
    value3: '0x970d473486cg4f9dfe6b2',
    state: 'Success',
  },
  {
    title: 'Block #815128',
    value1: '0x559f0e102863ef1b9798e1d4497a0f4214f05fbf7fbce549a',
    value2: '0x970d473486cg4f9dfe6b2',
    value3: '0x970d473486cg4f9dfe6b2',
    state: 'Faild',
  },
  {
    title: 'Block #815128',
    value1: '0x559f0e102863ef1b9798e1d4497a0f4214f05fbf7fbce549a',
    value2: '0x970d473486cg4f9dfe6b2',
    value3: '0x970d473486cg4f9dfe6b2',
    state: 'Success',
  },
]
</script>

<style scoped></style>
