<template>
  <div>
    <latest-container :title="$t('lang.latestTx')" to="/tradeList">
      <div
        class="item flex px-7 py-4 justify-between"
        v-for="(item, i) in latestTxs"
        :key="i"
      >
        <div class="left">
          <div>
            <span class="graytxt">{{ $t('lang.trade.hash') }}：</span>
            <span class="text-footer-color">
              <router-link
                :to="{
                  path: '/tradeHash',
                  query: {
                    hash: item.hash,
                  },
                }"
              >
                {{ item.hash | filterHash(9) }}
              </router-link>
            </span>
          </div>
          <div class="graytxt">
            {{ item.time_block | formatTime }}
          </div>
        </div>
        <div class="middle">
          <div>
            <span class="graytxt">{{ $t('lang.trade.sender') }}：</span>
            <span class="text-footer-color">
              <router-link
                :to="{
                  path: '/address',
                  query: {
                    address: item.from,
                  },
                }"
              >
                {{ item.from | filterHash(9) }}
              </router-link>
            </span>
          </div>
          <div class="graytxt">
            <span class="graytxt">{{ $t('lang.trade.receiver') }}：</span>
            <span class="text-footer-color">
              <router-link
                :to="{
                  path: '/address',
                  query: {
                    address: item.to,
                  },
                }"
              >
                {{ item.to | filterHash(9) }}
              </router-link>
            </span>
          </div>
        </div>
        <div class="right text-right">
          <div class="graytxt">{{ $t('lang.trade.txAmount') }}</div>
          <div class="text-darkBlue">{{ item | filterTradeValue }}</div>
        </div>
      </div>
    </latest-container>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import LatestContainer from '@/components/pc/BlockChainBrowser/LatestContainer.vue'
import { iAsset } from '@/types/trade'
export default Vue.extend({
  components: { LatestContainer },
  props: {
    latestTxs: Array as PropType<
      {
        hash: string
        time_block: number
        from: string
        to: string
        amount: number
        assets: iAsset[]
        tx: {
          execer?: string
        }
      }[]
    >,
  },
})
</script>

<style scoped>
.item {
  height: 88px;
  border-bottom: 1px solid #f5f5ff;
}

.txNumberBox {
  width: 100px;
  height: 52px;
  background: rgba(37, 69, 203, 0.1);
  border-radius: 4px;
}

.item:last-of-type {
  border-bottom: none;
}
.height {
  font-size: 18px;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #1f3470;
}

.graytxt {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #7c88ad;
}

.darkGraytxt {
  color: #7c88ad;
}
.left {
  min-width: 233px;
}

.middle {
  min-width: 168px;
}

.right {
  min-width: 56px;
}
</style>
