<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.l71') }}
        <div class="flex right">
          <img class="search" @click="$router.push('/search')" src="/img/icon/search.svg" alt="极度证券"/>
          <van-popover
            v-model="showPopover"
            placement="bottom-end"
            trigger="click"
          >
            <div class="popover-body">
              <div class="item flex" @click="goDepositUrl('/deposit')">
                <img class="icon14" src="/img/account/icon14.png" alt="极度证券">
                <div>
                  <!-- 存款 -->
                  {{ $t('home.l13') }}
                </div>
              </div>
              <div class="item flex" @click="$router.push('/convert')">
                <img class="icon14" src="/img/account/icon15.png" alt="极度证券">
                <div>
                  <!-- 划转 -->
                  {{ $t('home.l15') }}
                </div>
              </div>
              <div class="item flex" @click="$router.push('/chat')">
                <img class="icon14" src="/img/account/icon17.png" alt="极度证券">
                <div>
                  <!-- 客服 -->
                  {{ $t('home.l16') }}
                </div>
              </div>
              <div class="item flex" @click="$router.replace('/')">
                <img class="icon14" src="/img/account/icon16.png" alt="极度证券">
                <div>
                  <!-- 首页 -->
                  {{ $t('tab.tab1') }}
                </div>
              </div>
            </div>
            <template #reference>
              <img class="more" src="/img/icon/more.png" alt="极度证券"/>
            </template>
          </van-popover>
        </div>
      </div>
    </van-sticky>
    <div class="page" v-if="info.ordernum">
      <div class="box flex">
        <img v-if="info.path == 1" class="icon" src="/img/account/icon19.png" alt="极度证券">
        <img v-if="info.path == 2" class="icon" src="/img/account/icon20.png" alt="极度证券">
        <div class="amount" :class="{red: info.path == 1, green: info.path == 2}">{{info.path == 1 ? '+' : '-'}}{{ $numToThousand((info.amount)) }}</div>
        <div class="balance">
          <!-- 余额 -->
          {{ $t('common.l33') }}:{{ $numToThousand((info.balance)) }}</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('product.l82') }}
          </div>
          <div class="val">{{ info.insert_datetime }}</div>
        </div>
        <div class="col flex">
          <div class="label">
            <!-- 交易金额 -->
            {{ $t('exchange.l45') }}
          </div>
          <div class="val" v-if="info.path == 1">{{ $numToThousand(Number($bigDecimal.multiply($bigDecimal.add(info.amount, info.fee), info.pay_rate)).toFixed(2)) }}</div>
          <div class="val" v-if="info.path == 2">{{ $numToThousand(Number($bigDecimal.multiply($bigDecimal.subtract(info.amount, info.fee), info.arrive_rate)).toFixed(2)) }}</div>
        </div>
        <div class="col flex">
          <div class="label">
            <!-- 交易币种 -->
            {{ $t('account.l56') }}
          </div>
          <div class="val" v-if="info.path == 1">{{ info.pay_currency }}</div>
          <div class="val" v-if="info.path == 2">{{ info.arrive_currency }}</div>
        </div>
        <div class="col flex">
          <div class="label">
            <!-- 记账金额 -->
            {{ $t('account.l72') }}
          </div>
          <div class="val">{{ $numToThousand((info.amount)) }}</div>
        </div>
        <div class="col flex">
          <div class="label">
            <!-- 记账币种 -->
            {{ $t('account.l73') }}
          </div>
          <div class="val">USD</div>
        </div>
      </div>
      <div class="box2">
        <div class="col flex">
          <div class="label">
            <!-- 交易类型 -->
            {{ $t('account.l43') }}
          </div>
          <div class="val">{{ getType(info) }}</div>
        </div>
        <div class="col flex" v-if="info.type != 400 && info.type != 900">
          <div class="label">
            <!-- 交易通道 -->
            {{ $t('account.l44') }}
          </div>
          <div class="val">{{ getMethod(info) }}</div>
        </div>
        <div class="col flex" v-if="info.type == 300">
          <div class="label">
            <!-- 交易对方 -->
            {{ $t('account.l74') }}
          </div>
          <div class="val">
            <!-- 期权订单 -->
            {{ $t('account.l75') }}
          </div>
        </div>
        <div class="col flex" v-if="info.type != 400 && info.type != 900">
          <div class="label">
            <!-- 交易附言 -->
            {{ $t('account.l76') }}
          </div>
          <div class="val">{{ info.bak || '--' }}</div>
        </div>
      </div>
    </div>
    <van-popup v-model="depositPopShow" position="right" :style="{ width: '100%' }">
      <depositPop :url="depositUrl" @cancel="depositPopShow = false" />
    </van-popup>
  </div>
</template>
<script>
import { getCashRecordList } from "@/api/list";
import selectDepositPop from "@/mixins/selectDepositPop";
export default {
  data () {
    return {
      ordernum: '',
      info: {},
      showPopover: false
    }
  },
  mixins: [selectDepositPop],
  computed: {
    payName() {
      return {
        // '1': '银行汇款',
        // '2': '国际电汇',
        // '3': '数字货币',
        // '4': '数字货币',
        '1': this.$t('account.l31'),
        '2': this.$t('account.l32'),
        '3': this.$t('account.l33'),
        '4': this.$t('account.l33'),
      }
    },
  },
  created () {
    this.ordernum = this.$route.params.ordernum
    this.ordernum && 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) : {}
        this.info = info
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false;
      })
    },
    getMethod(item) {
      if (item.type == 100) {
        // 第三方支付
        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 '期权'
        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'),
            'CFD': this.$t('account.l52'),
            'follow': 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'),
            'CFD': this.$t('account.l52'),
            'follow': this.$t('account.l52'),
          }
          return text[item.to.server]
        }
      }
    },
    getType(item) {
      if (item.type == 100 && item.path == 1) {
        // 存款
        return this.$t('home.l13')
      }
      if (item.type == 100 && item.path == 2) {
        // 取款
        return this.$t('home.l14')
      }
      var text = {
        // '1': '兑换',
        // '2': '兑换',
        // '3': '兑换',
        // '4': '兑换',
        // '200': '外部转账',
        // '300': '期权',
        // '400': '现金券奖励',
        // '900': '佣金',
        // '1000': '销售佣金',
        '1': this.$t('account.l28'),
        '2': this.$t('account.l28'),
        '3': this.$t('account.l28'),
        '4': this.$t('account.l28'),
        '5': this.$t('account.l28'),
        '200': this.$t('account.l8'),
        '300': this.$t('account.l55'),
        '400': this.$t('account.l77'),
        '900': this.$t('account.l78'),
        '1000': this.$t('account.l121'),
      }
      return text[item.type]
    },
  }
}
</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;
  &+.col {
    margin-top: 13px;
  }
  .label {
    color: #929292;
  }
  .val {
    color: #333333;
    flex: 1;
    min-width: 10%;
    max-width: 100%;
    padding-left: 12px;
    text-align: right;
  }
}
.popover-body {
  .item {
    cursor: pointer;
    height: 42px;
    padding-left: 16px;
    padding-right: 8px;
    color: #2C2C2C;
    font-size: 14px;
    min-width: 122px;
    max-width: 180px;
    line-height: 1;
    &+.item {
      border-top: 1px solid #E9E9E9;
    }
  }
  .icon14 {
    width: 22px;
    margin-right: 8px;
  }
}
</style>