<template>
  <div class="trade-table">
    <el-table
      :data="Trades"
      stripe
      style="width: 100%;"
      class="data-table"
      :cell-class-name="groupCellName"
      v-loading="Loading"
      element-loading-text="Loading..."
      element-loading-spinner="el-icon-loading"
    >
      <template slot="empty">
        <div>
          <!-- <div class="loading-line"></div> -->
          <span v-if="!Loading && Trades.length === 0">
            {{ $t('lang.page.nodata') }}
          </span>
        </div>
      </template>
      <el-table-column label width="20">
        <template slot-scope="item">
          <div>
            <div
              :class="{
                'start-line': item.row.tradeG === 2,
                'middle-line': item.row.tradeG === 1,
                'end-line': item.row.tradeG === 3,
              }"
            >
              <span v-if="item.row.tradeG !== 3"></span>
              <i></i>
              <span v-if="item.row.tradeG === 3"></span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('lang.trade.hash')">
        <template slot-scope="item">
          <div>
            <p class="group-title" v-if="item.row.tradeG === 2">
              {{ $t('txDetail.groupTx') }}
            </p>
            <router-link
              :to="`/tradeHash?hash=${item.row.txHash}`"
              class="light flex-left"
            >
              <i
                class="iconfont err-ico"
                :class="{
                  'iconjinggao-chucuo': isSuccess(
                    item.row.tx.execer,
                    item.row.receipt.ty,
                  ),
                }"
              ></i>
              {{ item.row.txHash | filterHash(10) }}
            </router-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="hash" :label="$t('lang.trade.sender')">
        <template slot-scope="item">
          <router-link
            :to="`/address?address=${item.row.fromAddr}`"
            class="light"
          >
            {{ item.row.fromAddr | filterHash(10) }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column width="60">
        <template>
          <img
            src="@/assets/images/blockChainBrowser/blockDetail/arrow-right-dark.png"
            style="width: 20px;"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column prop="hash" :label="$t('lang.trade.receiver')">
        <template slot-scope="item">
          <router-link :to="`/address?address=${item.row.tx.to}`" class="light">
            {{ item.row.tx.to | filterHash(10) }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="fee" :label="$t('lang.trade.num')">
        <template slot-scope="item">{{ item.row | TradeValue }}</template>
      </el-table-column>
      <el-table-column :label="$t('lang.trade.fee')" width="120">
        <template slot-scope="item">
          {{ item.row.fee }}{{ item.row.tx.fee | filterFee }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('lang.trade.time')" width="160">
        <template slot-scope="item">
          {{ item.row.blockTime | formatTime }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('lang.trade.type')" width="100">
        <template slot-scope="item">
          {{ item.row.actionName === 'unknown' ? 'none' : item.row.actionName }}
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end pt-7 mb-16">
      <page-container
        @pageChange="pageChange"
        @sizeChange="sizeChange"
        :currentPage="pages.currentPage"
        :pageSize="pages.pageSize"
        :total="pages.total"
      ></page-container>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { tradeAccuracy } from '@/utils/common'
import { Table, TableColumn } from 'element-ui'
import PageContainer from '@/components/pc/BlockChainBrowser/PageContainer.vue'

export default Vue.extend({
  components: {
    'el-table': Table,
    'el-table-column': TableColumn,
    PageContainer,
  },
  props: {
    Trades: Array,
    Loading: Boolean,
    groupCellName: Function,
    pageChange: Function,
    sizeChange: Function,
    pages: Object,
  },
  data() {
    return {}
  },
  methods: {
    isSuccess(execer: any, ty: any) {
      return tradeAccuracy(execer, ty)
    },
  },
})
</script>

<style scoped lang="scss">
.trade-table {
}
.loading-line {
  height: 60px;
  line-height: 18px;
}

.tx-record {
  margin-top: 30px;
  border: 1px solid #ebeff1;
  .err-ico {
    color: #e45359;
    font-size: 12px;
    width: 13px;
    margin-right: 5px;
    display: inline-flex;
  }
  h2 {
    height: 81px;
    line-height: 81px;
    padding-left: 25px;
    font-size: 16px;
    color: #516379;
    font-family: PingFangSC-Semibold;
    font-weight: 500;
    background: white;
    border-bottom: 1px solid #ececec;
  }
  .data-table {
    .el-table__header thead tr {
      height: 60px;
    }
    .iconjiantou-you {
      font-size: 20px;
      color: #9aaab9;
    }
    .tx-start,
    .tx-middle,
    .tx-end {
      background: #f4f7fe;
      .light,
      .iconjiantou-you {
        color: #d79a3f;
      }
    }
    .tx-start {
      padding-top: 45px;
    }
    .tx-start:nth-of-type(2) {
      padding-top: 0;
      // .cell {
      //   padding: 0;
      // }
    }
    .tx-start:nth-of-type(1),
    .tx-middle:nth-of-type(1),
    .tx-end:nth-of-type(1) {
      padding: 0;
      text-align: right;
      span {
        background: #d79a3f;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        display: block;
      }
      i {
        margin: 0 auto;
        display: block;
        width: 1px;
        background: #d79a3f;
      }
      .start-line {
        position: absolute;
        bottom: 0;
        width: 5px;
        span {
          margin: 0 auto;
        }
        i {
          height: 27.5px;
        }
      }
      .middle-line {
        width: 5px;
        span {
          position: absolute;
          top: 45%;
        }
        i {
          height: 67px;
        }
      }
      .end-line {
        position: absolute;
        top: 0;
        width: 5px;
        span {
          margin: 0 auto;
        }
        i {
          height: 27.5px;
        }
      }
    }
    .group-title {
      margin: 15px 0 9px 20px;
      font-size: 14px;
      font-family: PingFangSC-Semibold;
      font-weight: 500;
      color: #d79a3f;
    }
  }
  .token-icon {
    height: 26px;
  }
}
.bottom-page {
  margin-top: 23px;
}
.loading-line {
  height: 70px;
  line-height: 18px;
}
.el-table tr,
.el-table td {
  border: 0;
}
.el-table th:nth-of-type(2) .cell {
  padding-left: 30px;
}
</style>
