<template>
  <BasePage>
    <div class="merchanttradedetail">
      <div class="state" :class="getStateClass(data.state)">
        <img :src="data.state >= 3 ? '/img/checked.png' : '/img/loading.png'" alt="">
        <b>{{ data.statename }}</b>
      </div>

      <div class="containar">
        <div class="line"></div>
        <div class="details_box">
          <div class="detail">
            <span>用户账号：</span>
            <p>{{ $formatCellphone(data.usercellphone) }}</p>
          </div>
          <div class="detail">
            <span>下单时间：</span>
            <p>{{ $formatGMT(data.addtime, 'yyyy-MM-dd HH:mm:ss') }}</p>
          </div>
          <div class="detail">
            <span>付款时间：</span>
            <p>{{ $formatGMT(data.paytime, 'yyyy-MM-dd HH:mm:ss') }}</p>
          </div>
          <div class="detail">
            <span>交易单号：</span>
            <p>{{ data.ordernum }} <van-icon name="copy" @click="copyOrdernum" /></p>
          </div>

          <hr>

          <div class="detail">
            <span>买单商品总额：</span>
            <p>¥{{ data.ordermoney }}</p>
          </div>
          <div class="detail" v-if="data.payjifen">
            <span>用户积分抵扣：</span>
            <p>{{ data.payjifen }}积分</p>
          </div>
          <div class="detail" v-if="data.payquan">
            <span>会员卡余额抵扣：</span>
            <p>¥{{ data.payquan }}</p>
          </div>
          <div class="detail">
            <span>用户实付金额：</span>
            <p>¥{{ data.paymoney }}</p>
          </div>

          <hr>

          <div class="detail" v-if="data.discountratio">
            <span>商家让利比例：</span>
            <p>{{ data.discountratio }}%</p>
          </div>
          <div class="detail">
            <span>商家让利金额：</span>
            <p>¥{{ data.discount }}</p>
          </div>
          <div class="detail">
            <span>商家应收金额：</span>
            <p class="red">¥{{ data.income }}</p>
          </div>
        </div>
      </div>
    </div>
  </BasePage>
</template>

<script>
export default {
  name: 'MerchantTradeDetail',
  data() {
    return {
      data: {}
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const ordernum = this.$route.query.id;
      this.$get(`/v1/client/DShopsClient/order/${ordernum}`).then(res => {
        this.data = res.data || {};
      }).catch(err => {
        this.$showFailToast(err.message || '加载失败');
      });
    },
    copyOrdernum() {
      if (this.data.ordernum) {
        this.$copyText(this.data.ordernum).then(() => {
          this.$showSuccessToast('已复制');
        });
      }
    },
    getStateClass(state) {
      switch (state) {
        case 4:
        case 3:
          return 'green';
        case 2:
        case 1:
          return 'yellow';
        case 0:
          return 'red';
        default:
          return '';
      }
    }
  },
}
</script>