<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')}(${showTotal}${$t(
          'lang.block.count'
        )})`"
      ></m-title>
      <div class="search-container">
        <el-radio-group v-model="range" @change="filterBlocks" size="small">
          <el-radio-button :label="0">{{
            $t("lang.block.title")
          }}</el-radio-button>
          <el-radio-button :label="100">{{
            $t("lang.block.mtxnsBlocks", [100])
          }}</el-radio-button>
          <el-radio-button :label="1000">{{
            $t("lang.block.mtxnsBlocks", [1000])
          }}</el-radio-button>
        </el-radio-group>
      </div>
      <div
        v-loading="Loading"
        element-loading-text="Loading..."
        element-loading-spinner="el-icon-loading"
      >
        <m-block-item
          v-for="(item, i) in Blocks"
          :blockTime="item.block_time"
          :height="item.height"
          :packagingAddress="item.from"
          :txCount="item.tx_count"
          :key="i"
        ></m-block-item>
      </div>
    </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>
.rounded-twoPx {
  position: relative;
}
.c-block {
  padding-top: 44px;
  border-radius: 2px;
  padding-bottom: 23px;
}
.c-title {
  padding-top: 20px;
  height: 130px;
  align-items: flex-start;
}
.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50px;
  z-index: 1;
  height: 60px;
  width: 100%;
  background: #fafbfc;
}
.range-select {
  width: 310px;
}
</style>
