<template>
  <div>
    <latest-container :title="$t('lang.chainMsg.latestBlock')" 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 flex-shrink-0 items-center flex"
        >
          <div class="flex-grow overflow-hidden overflow-ellipsis">
            {{ (item && item.txs && item.txs.length) || '' }}
            {{
              item && item.txs && item.txs.length === 1
                ? $t('lang.block.txCount_single')
                : $t('lang.block.txCount')
            }}
          </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">{{ $t('lang.block.blockReward') }}:</span>
              <span>
                {{ item.height | filterBlockReward }}
              </span>
            </div>
          </div>
          <div class="flex justify-between items-center">
            <div>
              <span class="graytxt">
                {{ $t('lang.block.packingAddress') }}：
              </span>
              <router-link
                :to="{
                  path: '/address',
                  query: {
                    address: item.minerHash,
                  },
                }"
              >
                <span class="text-footer-color">
                  {{ item.minerHash | filterHash(9) }}
                </span>
              </router-link>
            </div>
            <div class="text-text-color" style="font-size: 12px;">
              {{ item.blockTime | formatTime }}
            </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'

export default Vue.extend({
  components: { LatestContainer },
  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>
