<template>
  <div
    class="block-detail min-w-1200 md:w-bodySet mx-auto flow-root"
    style="padding-bottom: 60px;"
  >
    <chain-search
      style="margin-top: 30px;"
      :clickSearch="clickSearch"
      :value="searchValue"
      :setValue="setSearchValue"
    ></chain-search>
    <block-overview
      style="margin-top: 30px; margin-bottom: 30px;"
      :data="overview"
      :init="init"
      :loading="loadingOverview"
      :loadingRelativeBlockHeight="loadingRelativeNumber"
    ></block-overview>
    <div class="shadow-shadow1">
      <TabList
        :tabList="tabList"
        :setFocusedTab="(v) => (focusedTab = v)"
        :focusedTab="focusedTab"
      ></TabList>
      <DataFilter v-if="focusedTab === 'txRecordTab'" :hideSelect="true">
        <template #left>
          {{ $t('lang.trade.txTotal', [pages.total]) }}
        </template>
      </DataFilter>
      <TradeTable
        v-if="focusedTab === 'txRecordTab'"
        :groupCellName="groupCellName"
        :Loading="loadingTable"
        :Trades="Trades"
        :pages="pages"
        :hidePageContainer="true"
        :sizeChange="sizeChange"
        :pageChange="pageChange"
      ></TradeTable>
      <DataFilter
        v-if="focusedTab === 'consensusNodeTab'"
        :optionList="consensusNodeFilterOptionList"
        :setValue="(v) => (consensusNodeFilterValue = v)"
        :value="consensusNodeFilterValue"
      >
        <template #left>
          {{
            $t('lang.trade.consensusNodeTotal', [consensusNodeTableList.length])
          }}
        </template>
      </DataFilter>
      <consensus-node-table
        v-if="focusedTab === 'consensusNodeTab'"
        :list="consensusNodeTableListFiltered"
        :loading="loadingTable"
      ></consensus-node-table>
    </div>
    <div
      class="flex justify-end"
      style="margin-top: 30px;"
      v-if="focusedTab === 'txRecordTab'"
    >
      <page-container
        @pageChange="pageChange"
        @sizeChange="sizeChange"
        :currentPage="pages.currentPage"
        :pageSize="pages.pageSize"
        :total="pages.total"
      ></page-container>
    </div>
  </div>
</template>

<script lang="ts">
import ChainSearch from '@/components/pc/BlockChainBrowser/ChainSearch.vue'
import BlockOverview from '@/components/pc/BlockChainBrowser/BlockOverview/index.vue'
import TabList from '@/components/pc/BlockChainBrowser/TabList/index.vue'
import DataFilter from '@/components/pc/BlockChainBrowser/DataFilter/index.vue'
import TradeTable from '@/components/pc/BlockChainBrowser/TradeTable/index.vue'
import PageContainer from '@/components/pc/BlockChainBrowser/PageContainer.vue'
import blockDetailMixin from '@/mixin/blockDetail'
import VueTypedMixins from 'vue-typed-mixins'
import ConsensusNodeTable from './components/consensusNodeTable.vue'

export default VueTypedMixins(blockDetailMixin).extend({
  components: {
    ChainSearch,
    BlockOverview,
    PageContainer,
    TabList,
    DataFilter,
    TradeTable,
    ConsensusNodeTable,
  },
})
</script>

<style scoped>
.block-detail {
  padding-top: 64px;
}
</style>
