<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">
        <div
          class="total-block float-left flex items-center"
          style="height: 32px;"
        >
          {{ $t('lang.trade.title') }}（{{ filterNum(total)
          }}{{ $t('lang.trade.count') }}）
          <span v-if="pages.total >= 100000">
            (
            {{ $t('lang.trade.tip') }}
            )
          </span>
        </div>
        <page-container
          class="float-right"
          @pageChange="pageChange"
          @sizeChange="sizeChange"
          :currentPage="pages.currentPage"
          :pageSize="pages.pageSize"
          :total="pages.total"
        ></page-container>
        <div class="clear-both"></div>
      </div>
      <TradeTable2
        :Trades="txList"
        :Loading="loading"
        :groupCellName="groupCellName"
        :pageChange="pageChange"
        :sizeChange="sizeChange"
        :pages="pages"
      ></TradeTable2>
    </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 TradeTable2 from '@/components/pc/BlockChainBrowser/TradeTable2.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,
    TxStatus,
    TradeTable2,
  },
  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-Regular, PingFang SC;
    font-weight: 400;
    color: #2545cb;
  }
}
</style>
