<template>
  <BasePage>
    <div class="merchanttradedetail">
      <div class="bg"></div>
      <div class="line"></div>
      <div class="container">
        <div class="orderbox">
          <div class="orderheader" v-if="data.TradeStates == 0">
            <img src="/img/remark-i1.png">
            <span class="state" :class="getStateClass(data.TradeStates)">待付款</span>
          </div>
          <div class="orderheader" v-if="data.TradeStates == 1 || data.TradeStates == 2">
            <img src="/img/remark-i2.png">
            <span class="state" :class="getStateClass(data.TradeStates)">待处理</span>
          </div>
          <div class="orderheader" v-if="data.TradeStates == 3 || data.TradeStates == 4">
            <img src="/img/remark-i4.png ">
            <span class="state" :class="getStateClass(data.TradeStates)">已完成</span>
          </div>
          <div class="ordercontent">
            <div class="orderitem">
              <span class="label">用户账号</span>
              <span class="r">{{ data.Phone }}</span>
            </div>
            <div class="orderitem">
              <span class="label">商品名称</span>
              <span class="r">{{ data.SkuSpecName }}</span>
            </div>
          </div>
          <div class="ordercontent">
            <div class="orderitem" @click="$copyText(data.TradeCode); $showSuccessToast('复制成功')">
              <span class="label">订单编号</span>
              <span class="r box box-align-center">{{ data.TradeCode }}
                <img class="copy" src="/img/copy-b.png"></span>
            </div>
            <div class="orderitem">
              <span class="label">下单时间</span>
              <span class="r">{{ data.CTime }}</span>
            </div>
            <div class="orderitem" v-if="data.PayTime">
              <span class="label">付款时间</span>
              <span class="r">{{ data.PayTime }}</span>
            </div>
          </div>
          <div class="ordercontent" v-if="data.PayTime">
            <div class="orderitem">
              <span class="label">支付方式</span>
              <span class="r">{{ PayMethod[data.PayMethod] }}</span>
            </div>
            <div class="orderitem">
              <span class="label">商品总额</span>
              <span class="r">{{ data.OriginAmount.toFixed(2) }}</span>
            </div>
            <div class="orderitem">
              <span class="label">商家实收</span>
              <span class="r price">{{ data.Amount.toFixed(2) }}</span>
            </div>
            <p class="remark r" v-if="data.Deduct">
              (余额支付{{ data.Amount.toFixed(2) }}，积分抵扣{{ data.Deduct.toFixed(2) }})
            </p>
          </div>
        </div>
      </div>
    </div>
  </BasePage>
</template>

<script>
export default {
  name: 'MerchantTradeDetail',
  mounted() {
    this.init();
  },
  data() {
    return {
      PayMethod: { 1: '微信支付', 2: '支付宝', 3: '银行卡' },
      data: {
        TradeCode: 'T20240418001',
        TradeStates: 4,
        Phone: '13800138001',
        SkuSpecName: '年卡',
        CTime: '2024-04-18 10:30:00',
        PayTime: '2024-04-18 10:35:00',
        PayMethod: 1,
        OriginAmount: 2999.00,
        Amount: 2899.00,
        Deduct: 100.00
      },
    }
  },
  methods: {
    init() {
    },
    getStateClass(state) {
      switch (state) {
        case 4:
          return 'green';
        case 3:
          return 'green';
        case 2:
          return 'yellow';
        case 1:
          return 'yellow';
        case 0:
          return 'red';
        default:
          return '';
      }
    }
  },
  computed: {
  },

}
</script>
