<template>
  <div class="c-latestBlocks">
    <div class="top flex items-center justify-between px-3.5">
      <div class="text-darkBlue text-sm font-bold">
        {{ $t('lang.chainMsg.latestBlock') }}
      </div>
      <div class="text-footer-color text-xs" @click="$router.push('/block')">
        {{ $t('lang.viewMore') }}
      </div>
    </div>
    <m-block-item
      class="flex"
      v-for="(item, i) in latestBlocks"
      :key="i"
      :blockTime="item.blockTime"
      :height="item.height"
      :packagingAddress="item.minerHash"
      :txCount="item.txs && item.txs.length"
    ></m-block-item>
  </div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue'
import mBlockItem from './m-blockItem.vue'
import { iBlockMsg } from 'ycc-api/dist/cmjs/service/home/types'

export default Vue.extend({
  components: { mBlockItem },
  props: {
    latestBlocks: Array as PropType<iBlockMsg[]>,
  },
})
</script>
<style lang="scss" scoped>
.c-latestBlocks {
  .top {
    height: 50px;
    background: #ffffff;
    border-radius: 2px;
  }
}
</style>
