<template>
  <div class="page" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <van-sticky>
      <div class="header">
        <div class="back">
          <backIcon/>
        </div>
        <!-- 资金记录 -->
        {{ $t('account.l9') }}
      </div>
    </van-sticky>
    <div class="page" v-if="info.ordernum">
      <div class="box flex">
        <!-- <div>金额(美元)</div> -->
        <div>{{ $t('account.l40') }}({{ $t('common.l20') }})</div>
        <div class="amount">{{ $numToThousand((info.amount)) }}</div>
      </div>
      <div class="box1">
        <div class="col flex">
          <div class="label">
            <!-- 交易编号 -->
            {{ $t('account.l41') }}
          </div>
          <div class="val">{{ info.ordernum }}</div>
        </div>
        <div class="col flex">
          <div class="label">
            <!-- 交易类型 -->
            {{ $t('account.l43') }}
          </div>
          <div class="val">{{ getType(info) }}</div>
        </div>
        <div class="col flex">
          <div class="label">
            <!-- 发起时间 -->
            {{ $t('account.l42') }}
          </div>
          <div class="val">{{ info.insert_datetime }}</div>
        </div>
        <div class="col flex" v-if="info.complete_datetime">
          <div class="label">
            <!-- 完成时间 -->
            {{ $t('account.l48') }}
          </div>
          <div class="val">{{ info.complete_datetime }}</div>
        </div>
        <template v-if="info.type == 100">
          <div class="col flex" v-if="info.path == 1">
            <div class="label">
              <!-- 入账账户 -->
              {{ $t('account.l124') }}
            </div>
            <div class="val">
              <!-- 美元钱包账户 -->
              {{ serverName[info.to.server] || $t('account.l1') }}  
            </div>
          </div>
          <div class="col flex" v-if="info.path == 2">
            <div class="label">
              <!-- 取款账户 -->
              {{ $t('inform.l48') }}
            </div>
            <div class="val">
              <!-- 美元钱包账户 -->
              {{ $t('account.l1') }}  
            </div>
          </div>
        </template>
        <div class="col flex">
          <div class="label">
            <!-- 手续费 -->
            {{ $t('exchange.l20') }}
          </div>
          <div class="val">{{ $handleDigits(info.fee) }} USD</div>
        </div>
        <template v-if="info.type == 100 && info.path == 1">
          <div class="col flex" v-if="!info.from.dc">
            <div class="label">
              <!-- 汇率 -->
              {{ $t('account.l125') }}
            </div>
            <div class="val">{{ info.pay_rate }}</div>
          </div>
          <div class="col flex">
            <div class="label">
              <!-- 数量 -->
              {{ $t('common.l25') }}
            </div>
            <div class="val">{{ $numToThousand(($bigDecimal.multiply(info.pay_rate, (info.amount + info.fee)))) }} {{ info.pay_currency }}</div>
          </div>
          <template v-if="info.from.dc">
            <div class="col flex">
              <div class="label">
                <!-- 链名称 -->
                {{ $t('account.l126') }}
              </div>
              <div class="val">{{ info.voucher.chain }}</div>
            </div>
            <div class="col flex">
              <div class="label">
                <!-- 接收地址 -->
                {{ $t('account.l127') }}
              </div>
              <div class="val">{{ info.voucher.address }}</div>
            </div>
            <div class="col flex">
              <div class="label">
                <!-- 交易哈希 -->
                {{ $t('account.l128') }}
              </div>
              <div class="val">{{ info.voucher.hxid }}</div>
            </div>
          </template>
          <div class="col flex" v-else>
            <div class="label">
              <!-- 交易通道 -->
              {{ $t('account.l44') }}
            </div>
            <div class="val">{{ getMethod(info) }}</div>
          </div>
        </template>
        <template v-if="info.type == 100 && info.path == 2">
          <div class="col flex" v-if="info.to.account">
            <div class="label">
              <!-- 汇率 -->
              {{ $t('account.l125') }}
            </div>
            <div class="val">{{ info.arrive_rate }}</div>
          </div>
          <div class="col flex">
            <div class="label">
              <!-- 数量 -->
              {{ $t('common.l25') }}
            </div>
            <div class="val" v-if="info.to.account">{{ $numToThousand(($bigDecimal.multiply(info.arrive_rate, (info.amount - info.fee)))) }} {{ info.arrive_currency }}</div>
            <div class="val" v-else>{{ $numToThousand(((info.amount - info.fee))) }} {{ getCurrency(info.arrive_currency) }}</div>
          </div>
          <template v-if="!info.to.account">
            <div class="col flex">
              <div class="label">
                <!-- 链名称 -->
                {{ $t('account.l126') }}
              </div>
              <div class="val">{{ info.to.currency }}</div>
            </div>
            <div class="col flex">
              <div class="label">
                <!-- 接收地址 -->
                {{ $t('account.l127') }}
              </div>
              <div class="val">{{ info.to.address }}</div>
            </div>
          </template>
          <div class="col flex" v-else>
            <div class="label">
              <!-- 收款账户 -->
              {{ $t('account.l45') }}
            </div>
            <div class="val" v-if="info.to.account">{{ info.to.bankName }} ({{ getAccount(info.to.account) }})</div>
          </div>
          <div class="col flex" v-if="info.to.account">
            <div class="label">
              <!-- 交易通道 -->
              {{ $t('account.l44') }}
            </div>
            <div class="val">{{ getMethod(info) }}</div>
          </div>
        </template>
        <div class="col flex" v-if="info.type != 100">
          <div class="label">
            <!-- 交易通道 -->
            {{ $t('account.l44') }}
          </div>
          <div class="val">{{ getMethod(info) }}</div>
        </div>
        <div class="col flex">
          <div class="label">
            <!-- 状态 -->
            {{ $t('common.l34') }}
          </div>
          <div class="val">{{ statusText[info.status] }}</div>
        </div>
        <div class="col flex" v-if="info.status == 3 && info.bak">
          <div class="label">
            <!-- 附言 -->
            {{ $t('account.l47') }}
          </div>
          <div class="val">{{ info.bak }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCashRecordList, getPayRecordList } from "@/api/list";
export default {
  data () {
    return {
      ordernum: '',
      info: {},
      showPopover: false,
      statusText: {
        // '1': '未支付',
        // '2': '待审核',
        // '3': '已驳回',
        // '4': '处理中',
        // '5': '已撤销',
        // '100': '已完成',
        '1': this.$t('ajax.201'),
        '2': this.$t('ajax.350'),
        '3': this.$t('ajax.408'),
        '4': this.$t('ajax.401'),
        '5': this.$t('ajax.404'),
        '6': this.$t('ajax.401'),
        '100': this.$t('ajax.403'),
      },
    }
  },
  computed: {
    payName() {
      return {
        // '1': '银行汇款',
        // '2': '国际电汇',
        // '3': '数字货币',
        '1': this.$t('account.l31'),
        '2': this.$t('account.l32'),
        '3': this.$t('account.l33'),
      }
    },
  },
  created () {
    this.ordernum = this.$route.params.ordernum
    this.type = this.$route.params.type
    if (this.type == 1) {
      this.getPayRecordList()
      return
    }
    this.getCashRecordList()
  },
  methods: {
    getCashRecordList() {
      this.fullscreenLoading = true
      getCashRecordList({
        ordernum: this.ordernum
      }).then(res => {
        var list = res.list || []
        var info = list[0] || {}
        info.from = info.from ? JSON.parse(info.from) : {}
        info.to = info.to ? JSON.parse(info.to) : {}
        info.voucher = info.voucher ? JSON.parse(info.voucher) : {}
        this.info = info
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false;
      })
    },
    getPayRecordList() {
      this.fullscreenLoading = true
      getPayRecordList({
        ordernum: this.ordernum
      }).then(res => {
        var list = res.list || []
        var info = list[0] || {}
        info.from = info.from ? JSON.parse(info.from) : {}
        info.to = info.to ? JSON.parse(info.to) : {}
        info.voucher = info.voucher ? JSON.parse(info.voucher) : {}
        this.info = info
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false;
      })
    },
    getMethod(item) {
      if (item.type == 100 || this.type == 1) {
        // 第三方支付
        return (item.pay_type > 100 ? this.$t('account.l30') : this.payName[item.pay_type]) || '--'
      }
      if (item.type == 200) {
        // return 'OTC USD支付'
        return this.$t('account.l49')
      }
      if (item.type == 300) {
        // 期权
        return this.$t('home.l5')
      }
      if ([1,2,3,4,5].indexOf(item.type) !== -1) {
        if (item.path == 1) {
          var text = {
            // 'HK': '港元兑换美元',
            // 'SZ': '人民币兑换美元',
            // 'CFD': 'USD支付',
            'HK': this.$t('account.l50'),
            'CN': this.$t('account.l51'),
            'SH': this.$t('account.l51'),
            'SZ': this.$t('account.l51'),
            'US': this.$t('account.l52'),
            'follow': this.$t('account.l52'),
            'CFD': this.$t('account.l52'),
          }
          return text[item.from.server]
        }
        if (item.path == 2) {
          var text = {
            // 'HK': '美元兑换港元',
            // 'CN': '美元兑换人民币',
            // 'CFD': 'USD支付',
            'HK': this.$t('account.l53'),
            'CN': this.$t('account.l54'),
            'SH': this.$t('account.l54'),
            'SZ': this.$t('account.l54'),
            'US': this.$t('account.l52'),
            'follow': this.$t('account.l52'),
            'CFD': this.$t('account.l52'),
          }
          return text[item.to.server]
        }
      }
    },
    getType(item) {
      if (this.type == 1) {
        // 存款
        return this.$t('home.l13')
      }
      if (item.type == 100 && item.path == 2) {
        // 取款
        return this.$t('home.l14')
      }
      if (item.type == 200) {
        // 外部转账
        return this.$t('account.l8')
      }
      if (item.type == 300) {
        // 期权
        return this.$t('account.l55')
      }
      if ([1,2,3,4,5].indexOf(item.type) !== -1) {
        // 兑换
        return this.$t('account.l28')
      }
    },
    getAccount(val) {
      if (val) {
        return `***${val.slice(val.length - 3)}`
      }
    },
    getCurrency(val) {
      if (val) {
        return val.split('-')[0]
      }
    }
  }
}
</script>
<style lang="less" scoped>
.header {
  position: relative;
  font-size: 18px;
  font-weight: 600;
  background-color: var(--bg-);
  padding: 14px 0 10px;
  text-align: center;
  .back {
    position: absolute;
    top: 11px;
    left: 9px;
  }
  .right {
    position: absolute;
    top: 14px;
    right: 12px;
    column-gap: 21px;
  }
  .search {
    width: 19px;
  }
  .more {
    width: 20px;
    display: block;
  }
}
.page {
  background-color: #F9FAFB;
}
.box {
  justify-content: center;
  flex-direction: column;
  padding: 36px 16px 24px;
  border-bottom: 1px solid #EDEDED;
  background-color: var(--bg-);
  .icon {
    width: 45px;
    margin-bottom: 8px;
  }
  .amount {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 15px;
    &.red {
      color: #D62619;
    }
    &.green {
      color: #359E82;
    }
  }
  .balance {
    font-size: 16px;
    color: #828282;
  }
}
.box1 {
  background-color: var(--bg-);
  margin-bottom: 5px;
  padding: 23px 16px 21px;
}
.box2 {
  background-color: var(--bg-);
  padding: 19px 16px;
}
.col {
  justify-content: space-between;
  line-height: 20px;
  align-items: flex-start;
  &+.col {
    margin-top: 13px;
  }
  .label {
    color: #929292;
  }
  .val {
    color: #333333;
    flex: 1;
    min-width: 10%;
    max-width: 100%;
    padding-left: 12px;
    text-align: right;
    word-break: break-all;
  }
}
.popover-body {
  .item {
    cursor: pointer;
    height: 42px;
    padding-left: 16px;
    color: #2C2C2C;
    font-size: 14px;
    width: 122px;
    line-height: 1;
    &+.item {
      border-top: 1px solid #E9E9E9;
    }
  }
  .icon14 {
    width: 22px;
    margin-right: 8px;
  }
}
</style>