<template>
  <div class="c-blockDetail mx-4">
    <m-chain-search class="mt-3.5"></m-chain-search>
    <m-block-desc-card
      class="mt-5"
      :height="$route.query.height"
      :txCount="overview.txCount"
      :blockTime="overview.blockTime"
      :hash="overview.hash"
      :stateHash="overview.stateHash"
      :merkelgen="overview.txHash"
      :lastBlockHeight="overview.lastBlockHeight"
      :nextBlockHeight="overview.nextBlockHeight"
      :loading="loadingOverview"
    ></m-block-desc-card>
    <m-tabs
      class="mt-3.5"
      :tabList="tabList"
      :focusedTab="focusedTab"
      :setFocusedTab="setFocusedTab"
    ></m-tabs>
    <div class="bg-white px-4">
      <Select
        :selectedValue="txRecordFilterValue"
        :optionList="txRecordFilterOptionList"
        @change="(v) => (txRecordFilterValue = v)"
      ></Select>
    </div>
    <div v-if="focusedTab === 'txRecordTab'" class="flow-root">
      <m-tx-item
        v-for="(trade, i) in Trades"
        :key="i"
        :row="trade"
        :amount="trade.amount"
        :txHash="trade.tx.hash"
        :from="trade.tx.from"
        :blockTime="trade.blockTime"
        :to="trade.tx.to"
        :tradeG="trade.tradeG"
        :status="isSuccess(trade.tx.execer, trade.receipt.ty)"
      ></m-tx-item>
      <m-page-container
        class="mt-3.5"
        :simple="false"
        @pageChange="pageChange"
        @sizeChange="sizeChange"
        :currentPage="pages.currentPage"
        :pageSize="pages.pageSize"
        :total="pages.total"
      ></m-page-container>
    </div>
    <div v-if="focusedTab === 'consensusNodeTab'" class="flow-root">
      <m-consensus-node></m-consensus-node>
      <m-consensus-node type="vote"></m-consensus-node>
    </div>
  </div>
</template>
<script lang="ts">
import VueTypedMixins from 'vue-typed-mixins'
import blockDetailMixin from '@/mixin/blockDetail'
import MChainSearch from '@/components/mobile/m-chainSearch.vue'
import MBlockDescCard from '@/components/mobile/m-block-desc-card.vue'
import MTabs from '@/components/mobile/m-tabs.vue'
import MTxItem from '@/components/mobile/m-txItem.vue'
import MPageContainer from '@/components/mobile/m-pageContainer.vue'
import MConsensusNode from '@/components/mobile/m-consensus-node.vue'
import Select from '@/components/pc/Select.vue'
export default VueTypedMixins(blockDetailMixin).extend({
  components: {
    MChainSearch,
    MBlockDescCard,
    MTabs,
    MTxItem,
    MPageContainer,
    MConsensusNode,
    Select,
  },
})
</script>
<style lang="scss" MChainSearchscoped>
.c-blockDetail {
  padding-top: 44px;
}
</style>
