<template>
  <div class="c-votePackTable">
    <el-table :data="list" v-loading="loading">
      <TableColumn label width="40"></TableColumn>
      <TableColumn :label="$t('lang.txDetail.height')">
        <template slot-scope="{ row }">
          <div class="text-footer-color">
            <router-link
              :to="{
                path: '/blockDetail',
                query: {
                  height: row.height,
                },
              }"
            >
              {{ row.height }}
            </router-link>
          </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.trade.sender')">
        <template slot-scope="{ row }">
          <div class="text-footer-color">
            <router-link
              :to="{
                path: '/address',
                query: {
                  address: row.sender,
                },
              }"
            >
              {{ row.sender | filterHash }}
            </router-link>
          </div>
        </template>
      </TableColumn>
      <TableColumn label width="40">
        <template slot-scope="">
          <img :src="arrowRight" alt="" />
        </template>
      </TableColumn>
      <TableColumn :label="$t('lang.trade.receiver')">
        <template slot-scope="{ row }">
          <div class="text-footer-color">
            <router-link
              :to="{
                path: '/address',
                query: {
                  address: row.receiver,
                },
              }"
            >
              {{ row.receiver | filterHash}}
            </router-link>
          </div>
        </template>
      </TableColumn>
      <TableColumn :label="$t('lang.block.blockReward')">
        <template slot-scope="{ row }">
          <div class="text-text-color">{{ row.reward | filterAmount }} YCC</div>
        </template>
      </TableColumn>
      <TableColumn :label="$t('lang.trade.time')" align="right">
        <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 arrowRight from '@/assets/images/blockChainBrowser/blockDetail/arrow-right-dark.png'
import Vue from 'vue'
export default Vue.extend({
  components: {
    'el-table': Table,
    TableColumn,
  },
  props: {
    list: Array,
    loading: Boolean,
  },
  data() {
    return {
      arrowRight,
    }
  },
})
</script>
<style lang="scss" scoped></style>
