<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>
          <span v-if="!Loading && Trades.length === 0">
            {{ $t('lang.page.nodata') }}
          </span>
        </div>
      </template>
      <el-table-column label width="40">
        <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,
              }"
            ></div>
            <img
              class="w-5 h-5 max-w-none z-20 relative"
              v-if="
                item.row.tradeG === 1 ||
                item.row.tradeG === 2 ||
                item.row.tradeG === 3
              "
              src="../../../assets/images/blockChainBrowser/tradeDetail/txGroupIcon.png"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('lang.trade.hash')" width="150">
        <template slot-scope="item">
          <div>
            <router-link
              :to="`/tradeHash?hash=${item.row.hash}`"
              class="light flex-left text-footer-color"
            >
              {{ item.row.hash | filterHash(8) }}
            </router-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="hash" :label="$t('lang.trade.sender')" width="155">
        <template slot-scope="item">
          <router-link
            :to="`/address?address=${item.row.from}`"
            class="text-footer-color"
          >
            {{ item.row.from | filterHash(8) }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column width="40">
        <template slot-scope="item">
          <img
            :src="
              item.row.tradeG === 1 ||
              item.row.tradeG === 2 ||
              item.row.tradeG === 3
                ? arrowRightBlue
                : arrowRightDark
            "
            style="width: 20px; height: 20px;"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="hash"
        :label="$t('lang.trade.receiver')"
        width="155"
      >
        <template slot-scope="item">
          <router-link
            :to="`/address?address=${item.row.to}`"
            class="text-footer-color"
          >
            {{ item.row.to | filterHash(8) }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('lang.block.txCount')" align="center">
        <template slot-scope="item">
          <div class="text-darkBlue">
            {{ item.row | TradeValue }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('lang.trade.fee')" width="100">
        <template slot-scope="item">
          <div class="text-darkBlue">
            {{ item.row.fee | filterFee }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('lang.trade.receiveStatus')" width="120">
        <template slot-scope="item">
          <div>
            <tx-status :status="item.row.success"></tx-status>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('lang.trade.time')" width="170">
        <template slot-scope="item">
          <div class="text-darkBlue">
            {{ item.row.block_time | formatTime }}
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('lang.trade.type')" width="90" align="right">
        <template slot-scope="item">
          <div class="text-darkBlue">
            {{
              item.row.action_name === 'unknown' ? 'none' : item.row.action_name
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column width="40"></el-table-column>
    </el-table>
    <div class="flex justify-end pt-7" v-if="!hidePageContainer">
      <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, { PropType } from 'vue'
import { tradeAccuracy } from '@/utils/common'
import { Table, TableColumn } from 'element-ui'
import PageContainer from '@/components/pc/BlockChainBrowser/PageContainer.vue'
import TxStatus from '../txStatus.vue'
import arrowRightBlue from '@/assets/images/blockChainBrowser/blockDetail/arrow-right-blue.png'
import arrowRightDark from '@/assets/images/blockChainBrowser/blockDetail/arrow-right-dark.png'
import { icustomized2Tx } from '@/types/trade'

/**
 * TradeTable2.vue 组件 和TradeTable/index.vue 组件的区别在于props传参中的Trades的类型。
 */

export default Vue.extend({
  components: {
    'el-table': Table,
    'el-table-column': TableColumn,
    PageContainer,
    TxStatus,
  },
  props: {
    hidePageContainer: {
      type: Boolean,
      default: false,
    },
    Trades: Array as PropType<icustomized2Tx[]>,
    Loading: Boolean,
    groupCellName: Function,
    pageChange: Function,
    sizeChange: Function,
    pages: Object,
  },
  data() {
    return {
      arrowRightBlue,
      arrowRightDark,
    }
  },
  methods: {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    isSuccess(execer: any, ty: any) {
      return !tradeAccuracy(execer, ty)
    },
  },
})
</script>

<style lang="scss">
.trade-table {
  .has-gutter {
    color: #7c88ad;
  }

  .tx-start,
  .tx-middle,
  .tx-end {
    position: relative;
    background-color: rgba(79, 221, 252, 0.04) !important;
    .start-line {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;

      width: 1px;
      height: 50px;
      border: 1px solid #4fddfc;
    }
    .middle-line {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;

      width: 1px;
      height: 80px;
      border: 1px solid #4fddfc;
    }
    .end-line {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;

      width: 1px;
      height: 40px;
      border: 1px solid #4fddfc;
    }
  }
}
.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;
    }

    .tx-start:nth-of-type(2) {
      padding-top: 0;
    }

    .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;
}
</style>
