<template>
  <div>
    <latest-container title="最新区块">
      <div
        class="item flex px-7 py-4"
        v-for="(item, i) in latestBlocks"
        :key="i"
      >
        <div
          class="txNumberBox text-footer-color text-sm font-bold text-center pt-2 flex-shrink-0"
        >
          <div>{{ item.txNum }} 笔交易</div>
          <div style="color: rgba(37, 69, 203, 0.3);">
            {{ item.timestamp }}s前
          </div>
        </div>
        <div class="w-full ml-5">
          <div class="flex justify-between">
            <div class="height">{{ item.height }}</div>
            <div>
              <span class="graytxt">区块奖励:</span>
              <span>
                15 ycc
              </span>
            </div>
          </div>
          <div class="flex justify-between">
            <div>
              <span class="graytxt">打包地址：</span>
              <span class="text-app-color-2">{{ item.address }}</span>
            </div>
            <div class="graytxt">投票节点5+打包节点10</div>
          </div>
        </div>
      </div>
    </latest-container>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import LatestContainer from '@/components/pc/BlockChainBrowser/LatestContainer.vue'
export default Vue.extend({
  components: { LatestContainer },
  props: {
    latestBlocks: Array as PropType<
      {
        txNum: number
        timestamp: number
        height: number
        address: string
      }[]
    >,
  },
})
</script>

<style scoped>
.item {
  height: 88px;
  border-bottom: 1px solid #f5f5ff;
}

.txNumberBox {
  width: 100px;
  height: 52px;
  background: rgba(37, 69, 203, 0.1);
  border-radius: 4px;
}

.item:last-of-type {
  border-bottom: none;
}
.height {
  font-size: 18px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #1f3470;
}

.graytxt {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #7c88ad;
}

.darkGraytxt {
  color: #7c88ad;
}
</style>
