<template>
  <div
    style="padding-top: 64px; padding-bottom: 60px;"
    class="min-w-1200 md:w-bodySet mx-auto flow-root"
  >
    <chain-search
      :value="value"
      :setValue="setValue"
      style="margin-top: 30px;"
    ></chain-search>
    <address-overview class="mt-7"></address-overview>

    <div
      style="margin-top: 30px; border-radius: 4px;"
      class="shadow-shadow1 overflow-hidden"
    >
      <TabList
        :setFocusedTab="(v) => (focusedTab = v)"
        :tabList="tabList"
        :focusedTab="focusedTab"
      ></TabList>
      <DataFilter
        v-if="focusedTab === 'txRecord'"
        :optionList="optionList"
        :setValue="(v) => (selectedOption = v)"
        :value="selectedOption"
      >
        <template #left>
          {{ $t('lang.trade.txTotal', [pages.total]) }}
        </template>
      </DataFilter>
      <TradeTable
        v-if="focusedTab === 'txRecord'"
        :hidePageContainer="true"
        :groupCellName="groupCellName"
        :Loading="loadingTxRecordTable"
        :Trades="txRecordList"
      ></TradeTable>
      <vote-pack-table
        v-if="focusedTab === 'votingRecord'"
        :list="voteList"
        :loading="loadingVote"
      ></vote-pack-table>
      <vote-pack-table
        v-if="focusedTab === 'packingRecord'"
        :list="packList"
        :loading="loadingPack"
      ></vote-pack-table>
    </div>
    <div class="flex justify-end" v-if="focusedTab === 'txRecord'">
      <page-container
        style="margin-top: 30px;"
        :pages="pages"
        :sizeChange="sizeChange"
        :pageChange="pageChange"
      ></page-container>
    </div>
  </div>
</template>

<script lang="ts">
import ChainSearch from '@/components/pc/BlockChainBrowser/ChainSearch.vue'
import AddressOverview from '@/components/pc/BlockChainBrowser/AddressOverview/index.vue'
import VueTypedMixins from 'vue-typed-mixins'
import address from '@/mixin/address'
import PageContainer from '@/components/pc/BlockChainBrowser/PageContainer.vue'
import TabList from '@/components/pc/BlockChainBrowser/TabList/index.vue'
import TradeTable from '@/components/pc/BlockChainBrowser/TradeTable/index.vue'
import DataFilter from '@/components/pc/BlockChainBrowser/DataFilter/index.vue'
import VotePackTable from './components/votePackTable.vue'
export default VueTypedMixins(address).extend({
  components: {
    ChainSearch,
    AddressOverview,
    TabList,
    DataFilter,
    TradeTable,
    VotePackTable,
    PageContainer,
  },
  computed: {},
})
</script>

<style></style>
