<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>
    <div class="rounded-twoPx overflow-hidden shadow-shadow1">
      <m-tabs
        class="mt-3.5"
        :tabList="tabList"
        :focusedTab="focusedTab"
        :setFocusedTab="setFocusedTab"
      ></m-tabs>
      <div class="bg-white px-4">
        <Select
          v-if="focusedTab === 'txRecordTab'"
          :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>
      </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>
    <m-page-container
      v-if="focusedTab === 'txRecordTab'"
      class="mt-3.5"
      :simple="false"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
      :currentPage="pages.currentPage"
      :pageSize="pages.pageSize"
      :total="pages.total"
    ></m-page-container>
  </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;
  padding-bottom: 23px;
}
</style>
