<template>
  <div
    class="right-box text-center overflow-hidden overflow-ellipsis"
    :style="{
      backgroundImage: `url(${url})`,
      backgroundPosition: backgroundPosition,
    }"
    v-loading="loading"
    element-loading-text="Loading..."
    element-loading-spinner="el-icon-loading"
  >
    <div class="my-title mt-11">
      {{
        type === 'last'
          ? $t('lang.block.lastBlock')
          : $t('lang.block.nextBlock')
      }}
    </div>
    <div class="my-block-height">
      <router-link :to="to" v-if="typeof height === 'number'">
        {{ height }}
      </router-link>
      <div v-else>
        {{ $t('lang.block.no') }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import lastBg from '@/assets/images/blockChainBrowser/blockDetail/lastBlockBg.png'
import nextBg from '@/assets/images/blockChainBrowser/blockDetail/nextBlockBg.png'

export default Vue.extend({
  props: {
    type: String as PropType<'last' | 'next'>,
    height: [Number, String],
    loading: Boolean,
  },
  data() {
    return {
      lastBg,
      nextBg,
    }
  },
  computed: {
    to(): any {
      return {
        path: '/blockDetail',
        query: {
          height: this.height,
        },
      }
    },
    url(): string {
      if (this.type === 'last') {
        return lastBg
      } else {
        return nextBg
      }
    },
    backgroundPosition(): string {
      if (this.type === 'last') return 'left center'
      else return 'right center'
    },
  },
})
</script>

<style>
.right-box {
  width: 300px;
  height: 150px;
  background: #ffffff;
  box-shadow: 0px 2px 15px 0px rgba(31, 52, 112, 0.06);
  border-radius: 4px;
  background-size: contain;
  background-repeat: no-repeat;
}
</style>
