<template>
  <div
    style="padding-top: 64px; padding-bottom: 60px;"
    class="min-w-1200 md:w-bodySet mx-auto flow-root"
  >
    <chain-search
      style="margin-top: 30px; margin-bottom: 30px;"
      :clickSearch="clickSearch"
      :value="searchValue"
      :setValue="setSearchValue"
    ></chain-search>
    <div class="data-table shadow-shadow1">
      <div class="head">
        <span>{{ $t('lang.txDetail.detail') }}</span>
      </div>
      <div class="item line flex items-center">
        <label>
          <span>{{ $t('lang.txDetail.txHash') }}</span>
        </label>
        <div class="item-text flex items-center" v-loading="loading">
          <span>{{ data.hash }}</span>
          <copy-btn :copyTxt="data.hash" class="ml-2"></copy-btn>
        </div>
      </div>
      <div class="item flex items-center">
        <label>
          <span>{{ $t('lang.txDetail.status') }}</span>
        </label>
        <div class="item-text" v-loading="loading">
          <div
            :class="['status', data.status === true ? 'success' : 'faild']"
            class="flex items-center"
          >
            <img
              v-if="data.status === false"
              class="w-4 h-4"
              src="@/assets/images/blockChainBrowser/tradeDetail/fail.png"
              alt=""
            />
            <img
              v-else
              class="w-4 h-4"
              src="@/assets/images/blockChainBrowser/tradeDetail/success.png"
              alt=""
            />
            <div class="ml-1">
              {{
                data.status === true
                  ? $t('lang.components.succ')
                  : $t('lang.components.fail')
              }}
            </div>
          </div>
        </div>
      </div>
      <div class="item line flex items-center">
        <label>
          <span>{{ $t('lang.txDetail.height') }}</span>
        </label>
        <div class="item-text" v-loading="loading">
          <router-link
            :to="`/blockDetail?height=${data.height}`"
            class="light text-footer-color"
          >
            {{ data.height }}
          </router-link>
        </div>
      </div>
      <div class="item flex items-center">
        <label>
          <span>{{ $t('lang.txDetail.time') }}</span>
        </label>
        <div class="item-text" v-loading="loading">
          {{ data.blockTime | formatTime }}
        </div>
      </div>
      <div class="item line flex items-center">
        <label>
          <span>{{ $t('lang.trade.sender') }}</span>
        </label>
        <div class="item-text" v-loading="loading">
          <router-link
            :to="`/address?address=${data.from}`"
            class="text-footer-color"
          >
            {{ data.from }}
          </router-link>
        </div>
      </div>
      <div class="item flex items-center">
        <label>
          <span>{{ $t('lang.trade.receiver') }}</span>
        </label>
        <div class="item-text" v-loading="loading">
          <router-link
            :to="`/address?address=${data.to}`"
            class="text-footer-color"
          >
            {{ data.to }}
          </router-link>
        </div>
      </div>
      <div class="item line flex items-center">
        <label>
          <span>{{ $t('lang.txDetail.value') }}</span>
        </label>
        <div class="item-text" v-loading="loading">
          {{
            { amount: data.amount, assets: data.assets, tx: data.inData }
              | TradeValue
          }}
        </div>
      </div>
      <div class="item flex items-center">
        <label>
          <span>{{ $t('lang.txDetail.fee') }}</span>
        </label>
        <div class="item-text" v-loading="loading">
          {{ data.fee | filterFee }}
        </div>
      </div>
      <div class="item line flex items-center">
        <label>
          <span>{{ $t('lang.txDetail.random') }}</span>
        </label>
        <div class="item-text" v-loading="loading">
          {{ String(data.nonce) }}
        </div>
      </div>
      <div class="item flex items-center">
        <label>
          <span>{{ $t('lang.txDetail.execer') }}</span>
        </label>
        <div class="item-text" v-loading="loading">{{ data.execer }}</div>
      </div>
      <div class="item line flex items-center">
        <label>
          <span>{{ $t('lang.trade.func') }}</span>
        </label>
        <div class="item-text" v-loading="loading">
          {{ data.actionName === 'unknown' ? 'none' : data.actionName }}
        </div>
      </div>
      <div class="item flex items-center">
        <label>
          <span>{{ $t('lang.txDetail.txType') }}</span>
        </label>
        <div class="item-text" v-loading="loading">{{ data.txType }}</div>
      </div>
      <div class="markdown-data" v-if="data.execer === 'user.write'">
        <!-- <markdown :content="markdownTxt"></markdown> -->
      </div>
      <div class="area line" v-if="data.execer !== 'user.write'">
        <label>
          <span class="text-text-color">{{ $t('lang.txDetail.inData') }}</span>
        </label>
        <div class="item-text" v-loading="loading">
          <pre
            class="preTxt"
            contenteditable="true"
          ><code>{{data.inData | decodeTransferNote}}</code></pre>
        </div>
      </div>
      <div class="area line" v-if="data.execer !== 'user.write'">
        <label>
          <span class="text-text-color">{{ $t('lang.txDetail.outData') }}</span>
        </label>
        <div class="item-text" v-loading="loading">
          <pre class="preTxt" contenteditable="true">
            <code>{{data.outData}}</code>
          </pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import ChainSearch from '@/components/pc/BlockChainBrowser/ChainSearch.vue'
import CopyBtn from '@/components/pc/CopyBtn.vue'
import tradeDetail from '@/mixin/tradeDetail'
import vueTypedMixins from 'vue-typed-mixins'

export default vueTypedMixins(tradeDetail).extend({
  components: {
    ChainSearch,
    CopyBtn,
  },
})
</script>

<style lang="scss" scoped>
.data-table {
  width: 100%;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1f3470;
  font-size: 14px;
  background: white;
  border-radius: 4px;
  border: 1px solid rgba(235, 239, 241, 1);
  .head {
    height: 70px;
    border-bottom: 1px solid #eee;
    span {
      display: inline-block;
      height: 100%;
      margin-left: 32px;
      text-align: center;
      font-size: 18px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #1f3470;
      line-height: 69px;
    }
  }
  .item {
    height: 60px;
    label {
      width: 233px;
      display: flex;
      justify-items: left;
      align-items: center;
      padding-left: 32px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #7c88ad;
      i {
        font-size: 20px;
        color: #b5d2e9;
      }
      span {
        margin-left: 12px;
        font-family: PingFangSC-Regular;
      }
    }
    .item-text {
      .status {
        min-width: 70px;
        height: 30px;
        border-radius: 15px;
        padding: 3px 10px;
        font-size: 14px;
        color: #1f3470;
        i {
          font-size: 14px;
        }
      }
      .success {
        background: rgba(111, 182, 55, 0.1);
        color: rgba(118, 193, 40, 1);
      }
      .faild {
        background: rgba(193, 56, 56, 0.1);
        color: rgba(193, 56, 56, 1);
      }
    }
  }
  .area {
    height: 253px;
    display: flex;
    justify-items: left;
    align-items: flex-start;
    padding-top: 26px;
    label {
      width: 233px;
      display: flex;
      justify-items: left;
      align-items: center;
      padding-left: 32px;
      i {
        font-size: 20px;
        color: #b5d2e9;
      }
      span {
        margin-left: 12px;
        font-family: PingFangSC-Regular;
      }
    }
    .item-text {
      width: 890px;
      border: 1px solid rgba(235, 239, 241, 1);
      background: white;
    }
    .preTxt {
      height: 200px;
      padding: 15px;
      font-family: Verdana;
      overflow-y: auto;
      vertical-align: middle;
      width: 100%;
      word-break: break-all;
    }
    code {
      line-height: 1.38;
      margin-left: -49px;
      font-family: 'Verdana';
    }
    .preTxt {
      border: 1px solid #ebeff1;
      cursor: default;
      overflow-y: scroll;
      // IE下隐藏
      -ms-overflow-style: none;
      // 火狐浏览器隐藏
      scrollbar-color: transparent transparent;
    }
    .preTxt:focus-visible {
      outline: none;
    }
    .preTxt::-webkit-scrollbar {
      width: 5px;
      height: 5px;
      background: #e0e3e6;
    }
    .preTxt::-webkit-scrollbar-thumb {
      border-radius: 50px;
      background: #6368de;
    }
  }
  .markdown-data {
    border-top: 1px solid #eee;
    padding: 40px;
    font-size: 14px;
  }
  .line {
    background: #f9fafc;
  }
}
</style>
