<template>
  <div
    class="consensus-node"
    style="background: #fafbfc"
    v-loading="loading"
    element-loading-text="Loading..."
    element-loading-spinner="el-icon-loading"
  >
    <div class="line flex justify-between items-center">
      <p>
        {{ $t("lang.txDetail.txHash") }}:
        <router-link
          class="tx-hash"
          :to="{
            path: '/tradeHash',
            query: {
              hash: row.hash,
            },
          }"
        >
          {{ row.hash | filterHash(10) }}
        </router-link>
      </p>
      <span>{{ row.block_time | formatTime }}</span>
    </div>
    <div class="box" style="background: rgba(248, 164, 87, 0.06)">
      <div class="flex items-center justify-between" style="margin-top: 4px">
        <div class="text-darkBlue text-sm font-bold">
          {{ $t("lang.block.packingNode") }}
        </div>
      </div>
      <div class="flex justify-between items-center" style="margin-top: 5px">
        <div>
          <span class="text-text-color text-xs">
            {{ $t("lang.address.nodeAdr") }}:
          </span>
          <span class="text-text-color text-xs text-orange">
            <router-link
              :to="{
                path: '/address',
                query: {
                  address: row.maker_addr[0],
                },
              }"
            >
              {{ row.maker_addr[0] | filterHash(6) }}
            </router-link>
          </span>
        </div>
        <div>
          <span class="text-text-color text-xs">
            {{ $t("lang.block.blockReward") }}:
          </span>
          <span class="font-bold text-darkBlue text-xs">
            {{ row.amount / 1e8 }}YCC
          </span>
        </div>
      </div>
    </div>
    <!-- 投票节点 -->
    <div
      class="vote-node"
      v-for="(item, index) in Object.keys(row.voter_detail)"
      :key="index"
    >
      <div class="flex items-center justify-between" style="margin-top: 4px">
        <div class="text-darkBlue text-sm font-bold">
          {{ $t("lang.block.votingNode") }}
        </div>
      </div>
      <div class="flex justify-between items-center" style="margin-top: 5px">
        <div>
          <span class="text-text-color text-xs">
            {{ $t("lang.address.nodeAdr") }}:
          </span>
          <span class="text-text-color text-xs">
            <router-link
              class="adr"
              :to="{
                path: '/address',
                query: {
                  address: item,
                },
              }"
            >
              {{ item | filterHash(6) }}
            </router-link>
          </span>
        </div>
        <div>
          <span class="text-text-color text-xs">
            {{ $t("lang.block.blockReward") }}:
          </span>
          <span class="font-bold text-darkBlue text-xs">
            {{ Number(row.voter_detail[item]) * 0.25 }} YCC
          </span>
        </div>
      </div>
    </div>
    <div class="foundation">
      <div class="flex items-center justify-between" style="margin-top: 4px">
        <div class="text-darkBlue text-sm font-bold">
          {{ $t("lang.block.foundationNode") }}
        </div>
      </div>
      <div class="flex justify-between items-center" style="margin-top: 5px">
        <div>
          <span class="text-text-color text-xs">
            {{ $t("lang.address.nodeAdr") }}:
          </span>
          <span class="text-text-color text-xs">
            <router-link
              class="adr"
              :to="{
                path: '/address',
                query: {
                  address: foundation,
                },
              }"
            >
              {{ foundation | filterHash(6) }}
            </router-link>
          </span>
        </div>
        <div>
          <span class="text-text-color text-xs">
            {{ $t("lang.block.blockReward") }}:
          </span>
          <span class="font-bold text-darkBlue text-xs"> 6 YCC </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  props: ["row", "loading"],
  computed: {
    foundation() {
      return process.env.VUE_APP_FOUNDATION;
    },
  },
});
</script>
<style lang="scss" scoped>
.consensus-node {
  .line {
    padding: 15px;
    height: 40px;
    background: rgba(79, 221, 252, 0.04);
    font-size: 12px;
    color: #7c88ad;
    .tx-hash {
      color: rgba(79, 221, 252, 1);
    }
  }
  .adr {
    color: rgba(37, 69, 203, 1);
  }
  .box,
  .vote-node,
  .foundation {
    padding: 10px;
    margin: 5px;
    height: 70px;
    border-radius: 2px;
  }
}
</style>
