<template>
  <div
    class="the-block min-w-1200 md:w-bodySet mx-auto flow-root"
    style="padding-bottom: 60px;"
  >
    <chain-search
      class="mt-7"
      :value="searchValue"
      :setValue="(v) => (searchValue = v)"
    ></chain-search>
    <div class="pc-block inner-box">
      <div class="title flex items-center justify-between">
        <span class="total-block">
          {{ $t('lang.block.title') }}（{{ maxHeight | filterNum
          }}{{ $t('lang.block.count') }}）
        </span>
        <page-container
          @pageChange="pageChange"
          @sizeChange="sizeChange"
          :currentPage="pages.currentPage"
          :pageSize="pages.pageSize"
          :total="pages.total"
        ></page-container>
      </div>
      <!-- 表格部分 -->
      <el-table
        :data="Blocks"
        stripe
        style="width: 100%;"
        class="data-table"
        v-loading="Loading"
        element-loading-text="Loading..."
        element-loading-spinner="el-icon-loading"
      >
        <template slot="empty">
          <div>
            <!-- <div
              v-if="Loading"
              class="loading-line"
              v-loading="Loading"
              element-loading-text="Loading..."
              element-loading-spinner="el-icon-loading"
            ></div> -->
            <span v-if="!Loading">{{ $t('lang.page.nodata') }}</span>
          </div>
        </template>
        <el-table-column width="40"></el-table-column>
        <el-table-column :label="$t('lang.block.height')">
          <template slot-scope="item">
            <router-link
              :to="`/blockDetail?height=${item.row.height}`"
              class="light"
            >
              {{ item.row.height }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column prop="blockTime" :label="$t('lang.txDetail.time')">
          <template slot-scope="item">
            <!-- <count :time="item.row.blockTime" class="light2"></count> -->
            <div class="text-darkBlue">
              {{ item.row.blockTime | formatTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="hash" :label="$t('lang.block.hash')">
          <template slot-scope="item">
            <router-link
              :to="`/blockDetail?height=${item.row.height}`"
              class="light"
            >
              {{ item.row.hash | filterHash(12) }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column :label="$t('lang.block.packingAddress')">
          <template slot-scope="item">
            <router-link
              :to="`/blockDetail?height=${item.row.height}`"
              class="light"
            >
              {{ item.row.minerHash | filterHash(12) }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column :label="$t('lang.block.blockReward')">
          <template slot-scope="block">
            <div class="light2">
              {{ block.row.height | filterBlockReward }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          prop="txCount"
          align="right"
          :label="$t('lang.block.txCount')"
        >
          <template slot-scope="item">
            <div class="light">{{ item.row.txCount }}</div>
          </template>
        </el-table-column>
        <el-table-column width="40"></el-table-column>
      </el-table>
      <!-- 底部分页 -->
      <div class="bottom-page flex justify-end">
        <page-container
          @pageChange="pageChange"
          @sizeChange="sizeChange"
          :currentPage="pages.currentPage"
          :pageSize="pages.pageSize"
          :total="pages.total"
        ></page-container>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import VueTypedMixins from 'vue-typed-mixins'
import ChainSearch from '@/components/pc/BlockChainBrowser/ChainSearch.vue'
import PageContainer from '@/components/pc/BlockChainBrowser/PageContainer.vue'
import Count from '@/components/pc/BlockChainBrowser/Count.vue'
import blockMixin from '@/mixin/block'
export default VueTypedMixins(blockMixin).extend({
  components: { ChainSearch, PageContainer, Count },
})
</script>

<style scoped>
.title {
  margin-top: 30px;
}
.total-block {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1f3470;
}

.data-table {
  margin-top: 15px;
  box-shadow: 0 0.5rem 1.2rem rgba(189, 197, 209, 0.2);
  border-radius: 2px;
  border: 1px solid rgba(235, 239, 241, 1);
  color: black;
}
.el-table__header thead tr {
  height: 60px;
}
.loading-line {
  height: 60px;
  line-height: 18px;
}
.bottom-page {
  margin-top: 23px;
}
.el-table td:nth-of-type(1) .cell,
.el-table th:nth-of-type(1) .cell {
  padding-left: 20px;
}

.the-block {
  padding-top: 64px;
}

.light2 {
  color: #1f3470;
}
.light {
  /* font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #7c88ad; */

  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2545cb;
}
</style>
