<template>
  <div>
    <latest-container title="最新区块" to="/block">
      <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 && item.txs && item.txs.length) || '' }} 笔交易</div>
          <div style="color: rgba(37, 69, 203, 0.3);">
            <Count v-if="item.blockTime" :time="item.blockTime"></Count>
          </div>
        </div>
        <div class="w-full ml-5">
          <div class="flex justify-between">
            <div class="height">
              <router-link
                :to="{
                  path: '/blockDetail',
                  query: {
                    height: item.height,
                  },
                }"
              >
                {{ item.height }}
              </router-link>
            </div>
            <div>
              <span class="graytxt">区块奖励:</span>
              <span>
                15 ycc
              </span>
            </div>
          </div>
          <div class="flex justify-between">
            <div>
              <span class="graytxt">打包地址：</span>
              <router-link
                :to="{
                  path: '/address',
                  query: {
                    address: item.minerHash,
                  },
                }"
              >
                <span class="text-app-color-2">
                  {{ item.minerHash | filterHash }}
                </span>
              </router-link>
            </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'
import { iBlockMsg } from 'ycc-api/dist/cmjs/service/home/types'
import Count from '@/components/pc/BlockChainBrowser/Count.vue'

export default Vue.extend({
  components: { LatestContainer, Count },
  props: {
    latestBlocks: Array as PropType<iBlockMsg[]>,
  },
})
</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>
