<template>
  <div
    class="px-3.5 txItem flow-root relative"
    :class="[txGroup ? 'bg-lightBlue2' : 'bg-white']"
  >
    <div class="leftLine" v-if="txGroup"></div>
    <img
      :src="txGroupIcon"
      alt="txGroupIcon"
      v-if="txGroup && txGroup === 'isGroupItem'"
      class="w-5 h-5 txGroupIcon"
    />
    <div class="flex justify-between items-center mt-3.5">
      <div class="flex items-center">
        <div class="text-text-color text-xs">
          {{ $t('lang.trade.txAmount') }} :
        </div>
        <div class="text-darkBlue text-sm font-bold">
          {{ amount | filterAmount }}YCC
        </div>
      </div>
      <div class="text-xs text-text-color">
        {{ blockTime | formatTime }}
      </div>
    </div>
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <div class="text-text-color text-xs">
          {{ $t('lang.txDetail.txHash') }} :
        </div>
        <div
          class="text-xs"
          :class="[txGroup ? ' text-lightBlue' : 'text-footer-color']"
        >
          <router-link
            :to="{
              path: '/tradeHash',
              query: {
                hash: txHash,
              },
            }"
          >
            {{ txHash | filterHash }}
          </router-link>
        </div>
      </div>
      <TxStatus size="small" :status="status" />
    </div>
    <div class="flex items-center justify-between">
      <div>
        <span class="text-text-color text-xs">
          {{ $t('lang.trade.sender') }} :
        </span>
        <span
          class="text-xs"
          :class="[txGroup ? ' text-lightBlue' : 'text-footer-color']"
        >
          <router-link
            :to="{
              path: '/address',
              query: {
                address: from,
              },
            }"
          >
            {{ from | filterHash }}
          </router-link>
        </span>
      </div>
      <div>
        <span class="text-text-color text-xs">
          {{ $t('lang.trade.receiver') }} :
        </span>
        <span
          class="text-xs"
          :class="[txGroup ? ' text-lightBlue' : 'text-footer-color']"
        >
          <router-link
            :to="{
              path: '/address',
              query: {
                address: to,
              },
            }"
          >
            {{ to | filterHash }}
          </router-link>
        </span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import TxStatus from '../pc/txStatus.vue'
import txGroupIcon from '@/assets/images/blockChainBrowser/tradeDetail/txGroupIcon.png'
export default Vue.extend({
  components: {
    TxStatus,
  },
  props: {
    blockTime: Number,
    tradeG: Number,
    amount: Number,
    txHash: String,
    from: String,
    to: String,
    status: Boolean,
  },
  data() {
    return {
      txGroupIcon,
    }
  },
  computed: {
    txGroup() {
      if (this.tradeG === 1 || this.tradeG === 2) {
        return 'isGroupItem'
      } else if (this.tradeG === 3) {
        return 'isGroupItemEnd'
      } else {
        return ''
      }
    },
  },
})
</script>
<style lang="scss" scoped>
.txItem {
  border-bottom: 1px solid #f5f5ff;
  height: 90px;
  .leftLine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: rgba(79, 221, 252, 1);
    z-index: 1;
  }
  .txGroupIcon {
    position: absolute;
    left: -10px;
    bottom: -10px;
    z-index: 2;
  }
}
.txItem:last-of-type {
  border-bottom: none;
}
</style>
