<template>
  <div class="blockItem bg-white flex pr-3.5">
    <div class="txNumBox">
      <router-link
        :to="{
          path: '/blockDetail',
          query: {
            height: height,
          },
        }"
      >
        {{ height }}
      </router-link>
    </div>
    <div class="msgBox flex-shrink-0 flex-grow mt-3.5 ml-2">
      <div>
        <span class="text-text-color text-xs">
          {{ $t("lang.block.hash") }}：
        </span>
        <router-link
          :to="{
            path: '/blockDetail',
            query: {
              height: height,
            },
          }"
        >
          <span class="text-footer-color">
            {{ hash | filterHash(9) }}
          </span>
        </router-link>
      </div>
      <div>
        <span class="text-text-color text-xs" style="margin-right: 9px">
          {{ $t("lang.block.packingAddress") }}:
        </span>
        <span class="text-footer-color">
          <router-link
            :to="{
              path: '/address',
              query: {
                address: packagingAddress,
              },
            }"
          >
            {{ packagingAddress | filterHash(9) }}
          </router-link>
        </span>
      </div>
      <div class="flex justify-between items-center w-full">
        <div class="text-text-color text-xs">
          {{ txCount }}
          {{ txCount === 1 ? $t("lang.block.tx") : $t("lang.block.txs") }}
        </div>
        <div class="text-text-color text-xs">
          {{ blockTime | formatTime }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  props: {
    txCount: Number,
    height: Number,
    blockTime: Number,
    packagingAddress: String,
    hash: String,
  },
});
</script>
<style lang="scss" scoped>
.blockItem {
  height: 90px;
  .txNumBox {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    margin: 15px 0 0 15px;
    width: fit-content;
    height: 55px;
    background: #e8ecfc;
    border-radius: 4px;
    color: #2545cb;
  }
  border-bottom: 1px solid #f5f5ff;
}
.blockItem:last-of-type {
  border-bottom: none;
}
</style>
