<template>
  <div class="consensus-node" style="background: #fafbfc;">
    <div
      class="box"
      :style="{
        backgroundColor:
          type === 'package' ? 'rgba(248, 164, 87, 0.05)' : 'white',
      }"
    >
      <div class="flex items-center justify-between">
        <div class="text-darkBlue text-sm font-bold">
          {{
            type === 'package'
              ? $t('lang.block.packingNode')
              : $t('lang.block.votingNode')
          }}
        </div>
        <Count :time="109280192" class="text-text-color text-xs"></Count>
      </div>
      <div class="flex justify-between items-center">
        <div>
          <span class="text-text-color text-xs">
            {{ $t('lang.block.consensusAddress') }}:
          </span>
          <span
            class="text-text-color text-xs"
            :class="[
              type === 'package' ? ' text-orange' : ' text-footer-color',
            ]"
          >
            {{ 'aslkdjfla' | filterHash }}
          </span>
        </div>
        <div class="mt-2">
          <span class="text-text-color text-xs">
            {{ $t('lang.block.blockReward') }}:
          </span>
          <span class="font-bold text-darkBlue text-xs">
            11YCC
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue'
import Count from '../pc/BlockChainBrowser/Count.vue'
export default Vue.extend({
  components: {
    Count,
  },
  props: {
    type: {
      type: String as PropType<'package' | 'vote'>,
      default: 'package',
    },
  },
})
</script>
<style lang="scss" scoped>
.consensus-node {
  .box {
    padding: 10px;
    margin: 5px;
    height: 70px;
    border-radius: 2px;
  }
}
</style>
