<template>
  <div
    style="margin-top: 70px;"
    class="min-w-1200 md:w-bodySet mx-auto flow-root"
  >
    <chain-search :value="value" :setValue="setValue"></chain-search>
    <address-overview class="mt-7"></address-overview>
    <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'"
      :groupCellName="groupCellName"
      :Loading="loadingTxRecordTable"
      :Trades="txRecordList"
      :pages="pages"
      :sizeChange="sizeChange"
      :pageChange="pageChange"
    ></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>
</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 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,
  },
  computed: {},
})
</script>

<style></style>
