<template>
  <div class="blockItem bg-white flex pr-3.5">
    <div class="txNumBox text-center flex-shrink-0">
      <div
        class="text-footer-color text-base font-bold"
        style="margin-top: 7px;"
      >
        {{ txCount }}
      </div>
      <div class="text-xs font-bold text-footer-color-light">
        {{ $t('lang.block.txCount') }}
      </div>
    </div>
    <div class="msgBox flex-shrink-0 flex-grow mt-3.5 ml-2">
      <div class="flex justify-between items-center w-full">
        <div class="text-darkBlue font-bold text-sm">
          <router-link
            :to="{
              path: '/blockDetail',
              query: {
                height: height,
              },
            }"
          >
            {{ height }}
          </router-link>
        </div>
        <div class="text-text-color text-xs">
          {{ blockTime | formatTime }}
        </div>
      </div>
      <div>
        <span class="text-text-color text-xs">
          {{ $t('lang.block.packingAddress') }}:
        </span>
        <span class="text-footer-color">
          <router-link
            :to="{
              path: '/address',
              query: {
                address: packagingAddress,
              },
            }"
          >
            {{ packagingAddress | filterHash(12) }}
          </router-link>
        </span>
      </div>
      <div>
        <span class="text-text-color text-xs">
          {{ $t('lang.block.blockReward') }}
        </span>
        <span class="text-black text-xs">
          {{ height | filterBlockReward }}
        </span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    txCount: Number,
    height: Number,
    blockTime: Number,
    packagingAddress: String,
  },
})
</script>
<style lang="scss" scoped>
.blockItem {
  height: 90px;
  .txNumBox {
    margin-top: 18px;
    width: 62px;
    height: 54px;
    background: rgba(37, 69, 203, 0.1);
    border-radius: 2px;
    margin-left: 15px;
  }
  border-bottom: 1px solid #f5f5ff;
}
.blockItem:last-of-type {
  border-bottom: none;
}
</style>
