<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
      :balance="balance"
      :handleSelectChange="(v) => (selectedExecer = v)"
      :optionsList="execerOptionsList"
      :selectedValue="selectedExecer"
      :frozen="frozen"
      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)"
        :hideSelect="true"
        :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">
      <page-container
        v-if="focusedTab === 'txRecord'"
        style="margin-top: 30px;"
        :currentPage="pages.currentPage"
        :pageSize="pages.pageSize"
        :total="pages.total"
        @sizeChange="sizeChange"
        @pageChange="pageChange"
      ></page-container>
      <page-container
        v-if="focusedTab === 'votingRecord'"
        @pageChange="pageChange2"
        @sizeChange="sizeChange2"
        :currentPage="pages2.currentPage"
        :pageSize="pages2.pageSize"
        :total="pages2.total"
        class="mt-5"
      ></page-container>
      <page-container
        v-if="focusedTab === 'packingRecord'"
        @pageChange="pageChange3"
        @sizeChange="sizeChange3"
        :currentPage="pages3.currentPage"
        :pageSize="pages3.pageSize"
        :total="pages3.total"
        class="mt-5"
      ></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/TradeTable2.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>
