<template>
  <div>
    <b-card title="Baisc">
      <b-table-simple>
        <b-tr>
          <b-td style="width:200px">
            {{ 'txhash' }}
          </b-td><b-td>{{ tx.txhash }}</b-td>
        </b-tr>
        <b-tr>
          <b-td>
            {{ 'status' }}
          </b-td><b-td> <b-badge
            v-if="tx.code===0"
            variant="light-success"
          >
            Success
          </b-badge><b-badge
            v-else
            variant="light-danger"
          >
            Failed
          </b-badge><b v-if="tx.code > 0"> {{ tx.raw_log }}</b> </b-td>
        </b-tr>
        <b-tr>
          <b-td>
            {{ 'height' }}
          </b-td><b-td>{{ tx.height }}</b-td>
        </b-tr>
        <b-tr>
          <b-td>
            {{ 'timestamp' }}
          </b-td><b-td>{{ formatTime(tx.timestamp) }}</b-td>
        </b-tr>
        <b-tr>
          <b-td>
            {{ 'gas_used' }}
          </b-td><b-td>{{ tx.gas_used }}</b-td>
        </b-tr>
        <b-tr>
          <b-td>
            {{ 'gas_wanted' }}
          </b-td><b-td>{{ tx.gas_wanted }}</b-td>
        </b-tr>
        <b-tr>
          <b-td>
            {{ 'gas' }}
          </b-td><b-td>{{ tx.tx.gas }}</b-td>
        </b-tr>
        <b-tr>
          <b-td>
            {{ 'fee' }}
          </b-td><b-td>{{ formattoken(tx.tx.fee) }}</b-td>
        </b-tr>
        <b-tr>
          <b-td>
            {{ 'memo' }}
          </b-td><b-td>{{ tx.tx.memo }}</b-td>
        </b-tr>
        <b-tr>
          <b-td>
            {{ 'timeout_height' }}
          </b-td><b-td>{{ tx.tx.timeout_height }}</b-td>
        </b-tr>
      </b-table-simple>
    </b-card>

    <b-card
      v-if="tx.tx.messages"
      :title="`Messages (total: ${tx.tx.messages.length})`"
    >
      <b-card-body
        v-for="(item, i) in tx.tx.messages "
        id="message"
        :key="i"
        class="message"
      >
        <object-field-component :tablefield="item" />
      </b-card-body>
    </b-card>
  </div>
</template>

<script>
import {
  BCard, BTableSimple, BTr, BTd, BBadge, BCardBody,
} from 'bootstrap-vue'
import { toDay, tokenFormatter } from '@/libs/data'
import ObjectFieldComponent from './ObjectFieldComponent.vue'

export default {
  components: {
    BCard,
    BCardBody,
    BTableSimple,
    BTr,
    BTd,
    BBadge,
    ObjectFieldComponent,
  },
  data() {
    return {
      tx: { tx: {} },
    }
  },
  created() {
    const { hash } = this.$route.params
    this.$http.getTxs(hash).then(res => {
      this.tx = res
    })
  },
  methods: {
    formattoken: v => tokenFormatter(v),
    formatTime: v => toDay(v),
  },
}
</script>

<style>
#message {
    border-top-width: 2px;
    border-top-style: double;
}
#message table.table-hover tr td:hover {
    border-width: 1px;
    border: double;
    border-radius: 0.5px;
}
</style>
