<template>
  <div class="c-trade-detail mx-4 flow-root">
    <MChainSearch class="mt-3.5"></MChainSearch>
    <div class="rounded-twoPx overflow-hidden shadow-shadow1 mt-5">
      <m-title :title="$t('lang.txDetail.detail')"></m-title>
      <div class="bg-white px-3.5 mb-5">
        <div class="flex items-center">
          <div class="label">{{ $t('lang.block.hash') }}</div>
          <div class="content">
            {{ data.hash | filterHash }}
            <m-copy-btn :copyTxt="data.hash"></m-copy-btn>
          </div>
        </div>
        <div class="flex items-center">
          <div class="label">{{ $t('lang.txDetail.status') }}</div>
          <div class="content">
            <tx-status size="small" :status="data.status"></tx-status>
          </div>
        </div>
        <div class="flex items-center">
          <div class="label">{{ $t('lang.block.height') }}</div>
          <div class="content">
            {{ data.height }}
          </div>
        </div>
        <div class="flex items-center">
          <div class="label">{{ $t('lang.txDetail.time') }}</div>
          <div class="content">
            {{ data.blockTime | formatTime }}
          </div>
        </div>
        <div class="flex items-center">
          <div class="label">{{ $t('lang.trade.sender') }}</div>
          <div class="content">
            <router-link
              :to="`/address?address=${data.from}`"
              class="text-footer-color"
            >
              {{ data.from | filterHash(10) }}
            </router-link>
          </div>
        </div>
        <div class="flex items-center">
          <div class="label">{{ $t('lang.trade.receiver') }}</div>
          <div class="content">
            <router-link
              :to="`/address?address=${data.to}`"
              class="text-footer-color"
            >
              {{ data.to | filterHash(10) }}
            </router-link>
          </div>
        </div>
        <div class="flex items-center">
          <div class="label">{{ $t('lang.txDetail.value') }}</div>
          <div class="content">
            {{
              { amount: data.amount, assets: data.assets, tx: data.inData }
                | TradeValue
            }}
          </div>
        </div>
        <div class="flex items-center">
          <div class="label">{{ $t('lang.txDetail.fee') }}</div>
          <div class="content">
            {{ data.fee | filterFee }}
          </div>
        </div>
        <div class="flex items-center">
          <div class="label">{{ $t('lang.txDetail.random') }}</div>
          <div class="content">
            {{ String(data.nonce) }}
          </div>
        </div>
        <div class="flex items-center">
          <div class="label">{{ $t('lang.txDetail.execer') }}</div>
          <div class="content">
            {{ data.execer }}
          </div>
        </div>
        <div class="flex items-center">
          <div class="label">{{ $t('lang.trade.func') }}</div>
          <div class="content">
            {{ data.actionName === 'unknown' ? 'none' : data.actionName }}
          </div>
        </div>
        <div class="flex items-center">
          <div class="label">{{ $t('lang.txDetail.txType') }}</div>
          <div class="content">
            {{
              data.txType === 'normalTx'
                ? $t('lang.txDetail.normalTx')
                : $t('lang.txDetail.groupTx')
            }}
          </div>
        </div>
        <div class="">
          <div class="label">{{ $t('lang.txDetail.inData') }}</div>
          <div class="preBox">
            <pre
              class="preTxt"
              contenteditable="true"
            ><code>{{data.inData | decodeTransferNote}}</code>
          </pre>
          </div>
        </div>
        <div class="pb-3.5">
          <div class="label">{{ $t('lang.txDetail.outData') }}</div>
          <div class="preBox">
            <pre
              class="preTxt"
              contenteditable="true"
            ><code>{{data.outData}}</code>
          </pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import vueTypedMixins from 'vue-typed-mixins'
import MChainSearch from '@/components/mobile/m-chainSearch.vue'
import MTitle from '@/components/mobile/m-title.vue'
import MCopyBtn from '@/components/mobile/m-copyBtn.vue'
import TxStatus from '@/components/pc/txStatus.vue'
import tradeDetail from '@/mixin/tradeDetail'

export default vueTypedMixins(tradeDetail).extend({
  components: {
    MChainSearch,
    MTitle,
    MCopyBtn,
    TxStatus,
  },
})
</script>
<style lang="scss" scoped>
.c-trade-detail {
  padding-top: 44px;
  .label {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7c88ad;
    width: 110px;
    min-height: 40px;
    line-height: 40px;
  }
  .content {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1f3470;
    line-height: 40px;
  }
  .preBox {
    width: 305px;
    height: 150px;
    background: #ffffff;
    border: 1px solid #ebeff1;
    overflow: auto;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1f3470;
    word-break: break-all;
  }
}
</style>
