<template>
  <div
    class="c-pc-trade min-w-1200 md:w-bodySet mx-auto flow-root"
    style="padding-bottom: 60px;"
  >
    <chain-search
      class="mt-7"
      :value="searchValue"
      :setValue="(v) => (searchValue = v)"
    ></chain-search>

    <div class="pc-block inner-box">
      <div class="title flex items-center justify-between">
        <span class="total-block">
          {{ $t('lang.trade.title') }}（{{ pages.total
          }}{{ $t('lang.trade.count') }}）
          <span v-if="pages.total >= 100000">
            (
            {{ $t('lang.trade.tip') }}
            )
          </span>
        </span>
        <page-container
          @pageChange="pageChange"
          @sizeChange="sizeChange"
          :currentPage="pages.currentPage"
          :pageSize="pages.pageSize"
          :total="pages.total"
        ></page-container>
      </div>
      <!-- 表格部分 -->
      <el-table
        :data="txList"
        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 && txList.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"
                style="left: -10px;"
                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')">
          <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.hash}`"
                class="light flex-left text-footer-color"
              >
                {{ item.row.hash | 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.from}`"
              class="text-footer-color"
            >
              {{ item.row.from | filterHash(10) }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column width="60">
          <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')">
          <template slot-scope="item">
            <router-link
              :to="`/address?address=${item.row.to}`"
              class="text-footer-color"
            >
              {{ item.row.to | filterHash(10) }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column prop="fee" :label="$t('lang.block.txCount')">
          <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="120">
          <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')">
          <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="160">
          <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="bottom-page flex justify-end">
        <page-container
          @pageChange="pageChange"
          @sizeChange="sizeChange"
          :currentPage="pages.currentPage"
          :pageSize="pages.pageSize"
          :total="pages.total"
        ></page-container>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import VueTypedMixins from 'vue-typed-mixins'
import ChainSearch from '@/components/pc/BlockChainBrowser/ChainSearch.vue'
import PageContainer from '@/components/pc/BlockChainBrowser/PageContainer.vue'
import TradeTable from '@/components/pc/BlockChainBrowser/TradeTable/index.vue'
import arrowRightBlue from '@/assets/images/blockChainBrowser/blockDetail/arrow-right-blue.png'
import arrowRightDark from '@/assets/images/blockChainBrowser/blockDetail/arrow-right-dark.png'
import Count from '@/components/pc/BlockChainBrowser/Count.vue'
import tradeMixin from '@/mixin/trade'
import TxStatus from '@/components/pc/txStatus.vue'
export default VueTypedMixins(tradeMixin).extend({
  components: { ChainSearch, PageContainer, Count, TradeTable, TxStatus },
  data() {
    return {
      arrowRightBlue,
      arrowRightDark,
    }
  },
})
</script>
<style lang="scss">
.c-pc-trade {
  padding-top: 64px;

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

  .title {
    margin-top: 30px;
  }
  .total-block {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1f3470;
  }
  .data-table {
    margin-top: 15px;
    box-shadow: 0 0.5rem 1.2rem rgba(189, 197, 209, 0.2);
    border-radius: 2px;
    border: 1px solid rgba(235, 239, 241, 1);
    color: black;
  }
  .el-table__header thead tr {
    height: 60px;
  }
  .loading-line {
    height: 60px;
    line-height: 18px;
  }
  .bottom-page {
    margin-top: 23px;
  }
  .el-table td:nth-of-type(1) .cell,
  .el-table th:nth-of-type(1) .cell {
    padding-left: 20px;
  }

  .the-block {
    padding-top: 64px;
  }

  .light2 {
    color: #1f3470;
  }
  .light {
    /* font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #7c88ad; */

    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2545cb;
  }
}
</style>
