<template>
  <div class="c-vote-pack flex items-center px-3.5">
    <div
      class="box text-center flex flex-col justify-center"
      :class="[
        type !== 'vote' ? 'text-orange' : ' text-footer-color',
        type !== 'vote' ? ' bg-lightOrange' : '  bg-lightBlue4',
      ]"
    >
      <div>
        <span class="text-base font-bold">
          {{ rewardAmount | filterAmount }}
        </span>
        <span class="text-xs">
          YCC
        </span>
      </div>
      <div>
        {{ $t('lang.block.blockReward') }}
      </div>
    </div>
    <div class="flex-grow" style="margin-left: 10px;">
      <div
        class="flex justify-between items-center"
        style="margin-bottom: 2px;"
      >
        <div class="text-darkBlue text-sm font-bold">
          <router-link
            :to="{
              path: '/blockDetail',
              query: {
                height: height,
              },
            }"
          >
            {{ height }}
          </router-link>
        </div>
        <div class="text-text-color text-xs">
          {{ timeBlock | formatTime }}
        </div>
      </div>
      <div style="margin-bottom: 2px;">
        <span class="text-text-color text-xs">
          {{ $t('lang.txDetail.txHash') }}:
        </span>
        <span class="text-footer-color text-xs font-bold">
          <router-link
            :to="{
              path: '/tradeHash',
              query: {
                hash: txHash,
              },
            }"
          >
            {{ txHash | filterHash(9) }}
          </router-link>
        </span>
      </div>
      <div>
        <span class="text-text-color text-xs">
          {{ $t('lang.trade.sender') }}:
        </span>
        <span class="text-footer-color text-xs font-bold">
          <router-link
            :to="{
              path: '/address',
              query: {
                address: sender,
              },
            }"
          >
            {{ sender | filterHash(9) }}
          </router-link>
        </span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue'
export default Vue.extend({
  props: {
    type: String as PropType<'vote' | 'pack'>,
    rewardAmount: Number,
    height: Number,
    txHash: String,
    sender: String,
    timeBlock: Number,
  },
})
</script>
<style lang="scss" scoped>
.c-vote-pack {
  height: 90px;
  background: #ffffff;
  border-radius: 2px;
  border-bottom: 1px solid #f5f5ff;
  .box {
    width: 100px;
    height: 66px;
    border-radius: 2px;
  }
}
</style>
