<template>
  <div class="c-votePackTable">
    <el-table :data="list" v-loading="loading" stripe>
      <!-- <TableColumn label width="40"></TableColumn> -->
      <TableColumn type="expand">
        <template slot-scope="props">
          <div
            class="line"
            v-for="item in props.row.voter_addr"
            :key="item.hash"
          >
            <p class="adr">{{ item | filterHash(10) }}</p>
            <span>投票节点</span>
            <span> 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.sender,
                },
              }"
            >
              {{ row.sender | filterHash(10) }}
            </router-link>
          </div>
        </template>
      </TableColumn>
      <TableColumn :label="$t('lang.trade.type')" width="150" align="center">
        <template>
          <div class="text-text-color">打包节点</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.time | formatTime }}
          </div>
        </template>
      </TableColumn>
      <TableColumn label width="40"></TableColumn>
    </el-table>
  </div>
</template>
<script lang="ts">
import { Table, TableColumn } from "element-ui";
import Vue from "vue";
export default Vue.extend({
  components: {
    "el-table": Table,
    TableColumn,
  },
  props: {
    list: Array,
    loading: Boolean,
  },
});
</script>
<style lang="scss" scoped>
.line {
  display: flex;
  justify-items: center;
  align-items: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #1f3470;
  line-height: 40px;
  .adr {
    margin-left: 355px;
    width: 300px;
  }
}
</style>
