<template>
  <div class="c-consensusNodeTable">
    <el-table
      :data="list"
      style="width: 100%"
      class="data-table"
      v-loading="loading"
      :cell-style="cellStyle"
      element-loading-text="loading..."
      element-loading-spinner="el-icon-loading"
    >
      <TableColumn type="expand">
        <template slot-scope="props">
          <div
            class="line"
            v-for="(item, index) in Object.keys(props.row.voter_detail)"
            :key="index"
          >
            <router-link
              class="adr"
              :to="{
                path: '/address',
                query: {
                  address: item,
                },
              }"
            >
              {{ item | filterHash(10) }}
            </router-link>
            <span class="vote-node">{{ $t("lang.block.votingNode") }}</span>
            <span class="reward"
              >{{ Number(props.row.voter_detail[item]) * 0.25 }} YCC</span
            >
          </div>
          <div class="line">
            <router-link
              class="adr"
              :to="{
                path: '/address',
                query: {
                  address: foundation,
                },
              }"
            >
              {{ foundation | filterHash(10) }}
            </router-link>
            <span class="vote-node">{{ $t("lang.block.foundationNode") }}</span>
            <span class="reward">6 YCC</span>
          </div>
        </template>
      </TableColumn>
      <TableColumn :label="$t('lang.trade.hash')">
        <template slot-scope="{ row }">
          <div class="text-footer-color">
            <router-link
              :to="{
                path: '/tradeHash',
                query: {
                  hash: row.hash,
                },
              }"
            >
              {{ row.hash | filterHash(10) }}
            </router-link>
          </div>
        </template>
      </TableColumn>
      <TableColumn :label="$t('lang.address.nodeAdr')">
        <template slot-scope="{ row }">
          <div class="text-footer-color">
            <router-link
              :to="{
                path: '/address',
                query: {
                  address: row.maker_addr[0],
                },
              }"
            >
              {{ row.maker_addr[0] | filterHash(10) }}
            </router-link>
          </div>
        </template>
      </TableColumn>
      <TableColumn :label="$t('lang.trade.type')" width="150" align="center">
        <template>
          <div class="text-text-color">{{ $t("lang.block.packingNode") }}</div>
        </template>
      </TableColumn>
      <TableColumn
        :label="$t('lang.block.blockReward')"
        width="150"
        align="center"
      >
        <template slot-scope="{ row }">
          <div class="text-text-color">{{ row.amount / 1e8 }} YCC</div>
        </template>
      </TableColumn>
      <TableColumn :label="$t('lang.trade.time')" align="right" width="220">
        <template slot-scope="{ row }">
          <div class="text-text-color">
            {{ row.block_time | formatTime }}
          </div>
        </template>
      </TableColumn>
      <TableColumn label width="40"></TableColumn>
    </el-table>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { Table, TableColumn } from "element-ui";
export default Vue.extend({
  components: {
    "el-table": Table,
    TableColumn,
  },
  props: {
    loading: Boolean,
    list: Array,
  },
  computed: {
    foundation() {
      return process.env.VUE_APP_FOUNDATION;
    },
  },
  methods: {
    cellStyle({ row }: any) {
      return {
        backgroundColor: row.type === "pack" ? "rgba(255, 164, 87, 0.06)" : "",
      };
    },
  },
});
</script>

<style lang="scss" scoped>
.line {
  display: flex;
  justify-items: center;
  align-items: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  line-height: 50px;
  color: rgb(124, 136, 173);
  .adr {
    margin-left: 355px;
    width: 300px;
    color: #2545cb;
    transition: 0.3s;
  }
  .adr:hover {
    color: #1890ff;
  }
  .vote-node {
    width: 60px;
    margin-left: 30px;
  }
  .reward {
    margin-left: 95px;
  }
}
</style>