<template>
  <div class="block-detail min-w-1200 md:w-bodySet mx-auto flow-root">
    <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>
    <TabList
      :tabList="tabList"
      :setFocusedTab="(v) => (focusedTab = v)"
      :focusedTab="focusedTab"
    ></TabList>
    <DataFilter
      v-if="focusedTab === 'txRecordTab'"
      :optionList="txRecordFilterOptionList"
      :setValue="(v) => (txRecordFilterValue = v)"
      :value="txRecordFilterValue"
    >
      <template #left>
        {{ $t('lang.trade.txTotal', [pages.total]) }}
      </template>
    </DataFilter>
    <TradeTable
      v-if="focusedTab === 'txRecordTab'"
      :groupCellName="groupCellName"
      :Loading="loadingTable"
      :Trades="Trades"
      :pages="pages"
      :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="consensusNodeTableList"
      :loading="loadingConsensusNodeTable"
    ></consensus-node-table>
  </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 blockDetailMixin from '@/mixin/blockDetail'
import VueTypedMixins from 'vue-typed-mixins'
import ConsensusNodeTable from './components/consensusNodeTable.vue'

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

<style scoped>
.block-detail {
  margin-top: 70px;
}
</style>
