<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 === '1'"
      :optionList="optionList"
      :setValue="(v) => (selectedOption = v)"
      :value="selectedOption"
    >
      <template #left>
        {{ $t('lang.trade.txTotal', [pages.total]) }}
      </template>
    </DataFilter>
    <TradeTable
      v-if="focusedTab === '1'"
      :groupCellName="groupCellName"
      :Loading="loadingTable"
      :Trades="Trades"
      :pages="pages"
      :sizeChange="sizeChange"
      :pageChange="pageChange"
    ></TradeTable>
  </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 DataFilter from '@/components/pc/BlockChainBrowser/DataFilter/index.vue'
export default VueTypedMixins(address).extend({
  components: { ChainSearch, AddressOverview, TabList, DataFilter },
  computed: {},
})
</script>

<style></style>
