<template>
  <div
    class="left-box"
    :style="{ backgroundImage: `url(${leftBoxbgPng})` }"
    v-loading="loading"
    element-loading-text="Loading..."
    element-loading-spinner="el-icon-loading"
  >
    <div class="flex">
      <div class="flex _left overflow-hidden flex-shrink-0">
        <img
          src="@/assets/images/blockChainBrowser/blockDetail/block.png"
          class="blockIcon"
          alt=""
        />
        <div class="overflow-hidden">
          <div class="my-title">
            {{ $t('lang.txDetail.height') }}
          </div>
          <div class="my-block-height overflow-hidden overflow-ellipsis">
            {{ $route.query.height }}
          </div>
        </div>
      </div>
      <div class="_middle flex-shrink-0">
        <div class="my-title">
          {{ $t('lang.block.blockRevenue') }}
        </div>
        <div class="my-benifit">
          {{ $route.query.height | filterBlockReward }}
        </div>
      </div>
      <div class="_right flex-shrink-0">
        <div class="my-title">
          {{ $t('lang.block.txCount') }}
        </div>
        <div class="my-benifit">
          {{ data.txCount }}
        </div>
      </div>
    </div>
    <div class="flex items-center" style="margin-top: 35px;">
      <div class="my-title theTitle">{{ $t('lang.block.timestamp') }}</div>
      <div class="my-content1">{{ data.blockTime | formatTime }}</div>
    </div>
    <div class="flex items-center">
      <div class="my-title theTitle">{{ $t('lang.block.hash') }}</div>
      <div class="my-content1">
        {{ data.hash }}
      </div>
      <copy-btn :copyTxt="data.hash" class="ml-4"></copy-btn>
    </div>
    <div class="flex items-center">
      <div class="my-title theTitle">
        {{ $t('lang.block.merkelgen') }}
      </div>
      <div class="my-content1">
        {{ data.txHash }}
      </div>
      <copy-btn :copyTxt="data.txHash" class="ml-4"></copy-btn>
    </div>
    <div class="flex items-center">
      <div class="my-title theTitle">
        {{ $t('lang.block.stateHash') }}
      </div>
      <div class="my-content1">
        {{ data.stateHash }}
      </div>
      <copy-btn :copyTxt="data.stateHash" class="ml-4"></copy-btn>
    </div>
  </div>
</template>

<script lang="ts">
// eslint-disable-next-line @typescript-eslint/no-var-requires
const leftBoxbgPng = require('@/assets/images/blockChainBrowser/blockDetail/leftBoxbg.png')
import Vue from 'vue'
import CopyBtn from '../../CopyBtn.vue'
export default Vue.extend({
  components: { CopyBtn },
  props: {
    data: Object,
    loading: Boolean,
  },
  data() {
    return {
      leftBoxbgPng,
    }
  },
})
</script>

<style>
.left-box {
  width: 870px;
  height: 330px;
  background: #ffffff;
  box-shadow: 0px 2px 15px 0px rgba(31, 52, 112, 0.06);
  border-radius: 4px;
  background-position: center;
  background-size: cover;

  padding-top: 42px;
  padding-left: 30px;
}
.blockIcon {
  width: 52px;
  height: 52px;
  margin-right: 20px;
}
._left {
  width: 360px;
}
._middle {
  width: 260px;
}

._right {
  width: 220px;
}
.theTitle {
  width: 100px;
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>
