<template>
  <div>
    <div
      class="c-block-desc-top"
      :style="{
        backgroundImage: `url(${blockCardDescBg})`,
      }"
    >
      <div class="flex items-end justify-between">
        <img :src="blockIcon" class="blockIcon" alt="" />
      </div>
      <div class="flex justify-between mt-1">
        <div class="text-text-color text-xs">
          {{ $t('lang.txDetail.height') }}
        </div>
        <div>
          <span class="text-text-color text-xs">
            {{ $t('lang.block.blockReward') }}
          </span>
          <span class="text-footer-color text-sm font-bold">
            {{ height | filterBlockReward }}
          </span>
        </div>
      </div>
      <div class="flex justify-between items-end mb-6" style="margin-top: 3px;">
        <div class="text-footer-color font-bold text-3xl">
          {{ height }}
        </div>
        <div class="mb-1">
          <span class="text-text-color text-xs">
            {{ $t('lang.block.txCount') }}
          </span>
          <span class="text-footer-color text-sm font-bold">
            {{ txCount }}
          </span>
        </div>
      </div>
      <div class="flex mb-5">
        <div class="text-text-color text-sm lableLeft">
          {{ $t('lang.block.timestamp') }}
        </div>
        <div class="text-darkBlue text-sm">
          {{ blockTime | formatTime }}
        </div>
      </div>
      <div class="flex mb-5">
        <div class="text-text-color text-sm lableLeft">
          {{ $t('lang.block.hash') }}
        </div>
        <div class="text-darkBlue text-sm flex items-center">
          <div>
            {{ hash | filterHash(10) }}
          </div>
          <m-copy-btn class="ml-2" :copyTxt="hash"></m-copy-btn>
        </div>
      </div>
      <div class="flex mb-5">
        <div class="text-text-color text-sm lableLeft">
          {{ $t('lang.block.merkelgen') }}
        </div>
        <div class="text-darkBlue text-sm flex items-center">
          <div>
            {{ merkelgen | filterHash(10) }}
          </div>
          <m-copy-btn class="ml-2" :copyTxt="merkelgen"></m-copy-btn>
        </div>
      </div>
      <div class="flex">
        <div class="text-text-color text-sm lableLeft">
          {{ $t('lang.block.stateHash') }}
        </div>
        <div class="text-darkBlue text-sm flex items-center">
          <div>
            {{ stateHash | filterHash(10) }}
          </div>
          <m-copy-btn class="ml-2" :copyTxt="stateHash"></m-copy-btn>
        </div>
      </div>
    </div>
    <div class="c-block-desc-bottom flex justify-between">
      <div
        class="relativeBlock relativeBlock-last text-center flex-grow"
        :style="{
          backgroundImage: `url(${lastBlockBg})`,
        }"
      >
        <div class="mt-5 text-text-color text-xs" style="margin-bottom: 3px;">
          {{ $t('lang.block.lastBlock') }}
        </div>
        <div class="text-footer-color text-base font-bold">
          <router-link
            :to="{
              path: '/blockDetail',
              query: {
                height: lastBlockHeight,
              },
            }"
            v-if="
              typeof lastBlockHeight === 'number' && lastBlockHeight !== NaN
            "
          >
            {{ lastBlockHeight }}
          </router-link>
          <div v-else>
            {{ $t('lang.block.no') }}
          </div>
        </div>
      </div>
      <div style="width: 15px;"></div>
      <div
        class="relativeBlock relativeBlock-next text-center flex-grow"
        :style="{
          backgroundImage: `url(${nextBlockBg})`,
        }"
      >
        <div class="mt-5 text-text-color text-xs" style="margin-bottom: 3px;">
          {{ $t('lang.block.nextBlock') }}
        </div>
        <div class="text-footer-color text-base font-bold">
          <router-link
            :to="{
              path: '/blockDetail',
              query: {
                height: nextBlockHeight,
              },
            }"
            v-if="
              typeof nextBlockHeight === 'number' && nextBlockHeight !== NaN
            "
          >
            {{ nextBlockHeight }}
          </router-link>
          <div v-else>
            {{ $t('lang.block.no') }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import blockCardDescBg from '@/assets/images/blockChainBrowser/blockDetail/block-card-desc-bg.png'
import blockIcon from '@/assets/images/blockChainBrowser/blockDetail/block.png'
import mCopyBtn from './m-copyBtn.vue'
import lastBlockBg from '@/assets/images/blockChainBrowser/blockDetail/lastBlockBg.png'
import nextBlockBg from '@/assets/images/blockChainBrowser/blockDetail/nextBlockBg.png'

export default Vue.extend({
  components: { mCopyBtn },
  props: {
    loading: Boolean,
    hash: String,
    merkelgen: String,
    stateHash: String,
    blockTime: Number,
    txCount: Number,
    height: [Number, String],
    lastBlockHeight: Number,
    nextBlockHeight: Number,
  },
  data() {
    return {
      blockCardDescBg,
      blockIcon,
      lastBlockBg,
      nextBlockBg,
    }
  },
})
</script>
<style lang="scss" scoped>
.c-block-desc-top {
  height: 330px;
  background: #ffffff;
  box-shadow: 0px 2px 15px 0px rgba(31, 52, 112, 0.06);
  border-radius: 4px;

  background-position: 39px;
  background-size: contain;
  padding: 15px 15px;
  .blockIcon {
    width: 52px;
    height: 52px;
  }
  .lableLeft {
    width: 100px;
  }
}
.c-block-desc-bottom {
  margin-top: 15px;
  .relativeBlock {
    width: 160px;
    height: 80px;
    background: #ffffff;
    box-shadow: 0px 1px 8px 0px rgba(31, 52, 112, 0.06);
    border-radius: 2px;
    background-size: 107px 80px;
    background-repeat: no-repeat;
  }
  .relativeBlock-last {
    background-position: left;
  }
  .relativeBlock-next {
    background-position: right;
  }
}
</style>
