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

      <div class="state box-tb box-align-center" v-else>
        <img :src="data.state >= 3 ? '/img/checked.png' : '/img/loading.png'" alt="">
        <b style="margin:2.4vw 0 0;">交易完成</b>
      </div>

      <div class="containar" v-if="type !== 'user'">
        <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" v-if="data.payway">
            <span>支付方式：</span>
            <p>{{ data.payway }}</p>
          </div>
          <div class="detail">
            <span>交易单号：</span>
            <p>{{ data.ordernum }}<span @click.stop="copyOrdernum">｜复制</span></p>
          </div>

          <hr>

          <div class="detail">
            <span>买单商品总额：</span>
            <p>¥{{ data.ordermoney?.toFixed(2) }}</p>
          </div>
          <div class="detail" v-if="data.payjifen > 0">
            <span>用户积分抵扣：</span>
            <p>-{{ data.payjifen?.toFixed(2) }}积分</p>
          </div>
          <div class="detail" v-if="data.payquan > 0">
            <span>会员卡余额抵扣：</span>
            <p>-¥{{ data.payquan?.toFixed(2) }}</p>
          </div>
          <div class="detail">
            <span>用户实付金额：</span>
            <p>¥{{ data.paymoney?.toFixed(2) }}</p>
          </div>
          <div class="detail" v-if="data.discountratio">
            <span>商家惠利比例：</span>
            <p>{{ data.discountratio }}%</p>
          </div>
          <hr>


          <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 class="containar" v-else>
        <div class="line"></div>
        <div class="details_box">
          <div class="detail">
            <span>商户名称：</span>
            <p>{{ data.shopname }}</p>
          </div>
          <div class="detail" v-if="type === '2'">
            <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" v-if="data.payway">
            <span>支付方式：</span>
            <p>{{ data.payway }}</p>
          </div>
          <div class="detail">
            <span>交易单号：</span>
            <p>{{ data.ordernum }}<span @click.stop="copyOrdernum">｜复制</span></p>
          </div>

          <hr>

          <div class="detail">
            <span>商品总额：</span>
            <p>¥{{ data.ordermoney?.toFixed(2) }}</p>
          </div>
          <div class="detail" v-if="data.payjifen">
            <span>积分抵扣：</span>
            <p>-{{ data.payjifen?.toFixed(2) }}积分</p>
          </div>
          <div class="detail" v-if="data.payquan">
            <span>会员卡余额抵扣：</span>
            <p>-{{ data.payquan?.toFixed(2) }}积分</p>
          </div>
          <div class="detail">
            <span>实付金额：</span>
            <p class="red">¥{{ data.paymoney?.toFixed(2) }}</p>
          </div>
          <div class="detail" v-if="data.discountratio">
            <span>惠利比例：</span>
            <p>{{ data.discountratio }}%</p>
          </div>
        </div>
      </div>
    </div>
  </BasePage>
</template>

<script>
export default {
  name: 'MerchantTradeDetail',
  data() {
    return {
      data: {},
      type: this.$route.query.type,
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const ordernum = this.$route.query.id;
      const typeParam = this.$route.query.type;
      const type = typeParam === 'user' ? '2' : (typeParam || '1');
      const api = type === '2'
        ? `/v1/client/FOrdersshopClient/${ordernum}`
        : `/v1/client/DShopsClient/order/${ordernum}`;
      this.$get(api).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>