<template>
  <div class="c-block mx-4">
    <m-chain-search class="mt-3.5"></m-chain-search>
    <m-page-container
      @pageChange="pageChange"
      @sizeChange="sizeChange"
      :currentPage="pages.currentPage"
      :pageSize="pages.pageSize"
      :total="pages.total"
      class="mt-5"
    ></m-page-container>
    <div class="rounded-twoPx overflow-hidden shadow-shadow1 mt-3.5">
      <m-title
        :title="`${$t('lang.block.title')}(${maxHeight}${$t('lang.block.count')})`"
      ></m-title>
      <m-block-item
        v-for="(item, i) in Blocks"
        :blockTime="item.blockTime"
        :height="item.height"
        :packagingAddress="item.hash"
        :txCount="item.txCount"
        :key="i"
      ></m-block-item>
    </div>
    <m-page-container
      :simple="false"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
      :currentPage="pages.currentPage"
      :pageSize="pages.pageSize"
      :total="pages.total"
      class="mt-5"
    ></m-page-container>
  </div>
</template>
<script lang="ts">
import MBlockItem from '@/components/mobile/m-blockItem.vue'
import mChainSearch from '@/components/mobile/m-chainSearch.vue'
import MPageContainer from '@/components/mobile/m-pageContainer.vue'
import MTitle from '@/components/mobile/m-title.vue'
import VueTypedMixins from 'vue-typed-mixins'
import blockMixin from '@/mixin/block'
export default VueTypedMixins(blockMixin).extend({
  components: { mChainSearch, MPageContainer, MTitle, MBlockItem },
})
</script>
<style lang="scss" scoped>
.c-block {
  padding-top: 44px;
  border-radius: 2px;
  padding-bottom: 23px;
}
</style>
