<template>
  <div>
    <div v-if="isSuccess" class="card">
      <div class="info">
        <cr-image
          width="100px"
          height="100px"
          class="info__image"
          src="https://img.lkbang.net/xcx/pay-success.png"
        />
        <div class="info__desc">
          <p class="info__text">订单支付成功!</p>
          <p v-if="money" class="info__text info__money">实付¥{{ money }}</p>
          <p v-if="freeAmount > 0" class="info__text info__free">已优惠¥{{ freeAmount }}</p>
        </div>
      </div>
      <p class="tips">
        拼团成功即可退款0元拿，拼团失败立即退款
      </p>
      <div class="actions">
        <cr-button shape="circle" type="default" @click="goOrderList(payStatus)"
          >我的拼团</cr-button
        >
        <cr-button
          shape="circle"
          class="actions__back"
          :plain="true"
          type="primary"
          @click="goPage(1)"
          >查看订单</cr-button
        >
      </div>
    </div>
    <div v-else class="card">
      <div class="info">
        <cr-image
          width="100px"
          height="100px"
          class="info__image"
          src="https://img.lkbang.net/xcx/pay-fail.png"
        />
        <p class="info__text">订单支付失败!</p>
      </div>
      <p class="tips">
        {{ reason }}
      </p>
      <cr-button type="primary" shape="circle" class="info_button" @click="goPage(0)"
        >重新支付</cr-button
      >
    </div>

    <div class="activity">
      <cr-image src="@/assets/images/groupBuy/activity.png" />
    </div>

    <div v-if="isSuccess && couponList.length" class="coupon-box">
      <p class="coupon-tip">本单已享以下权益</p>
      <div class="coupon-wrap">
        <CouponCard
          v-for="coupon in couponList"
          :key="coupon.id"
          :value="coupon"
          class="coupon-item"
          @click="goViewCouponDetail"
        />
      </div>
    </div>
    <Goods />
  </div>
</template>
<script>
import cookies from '@/service/cookieStorage.service';
import { goUrlExtends } from './extends';
import CouponCard from './components/CouponCard.vue';
import { getCouponList } from '@/api/pay.api';
import Goods from '@/components/RecoGoods/RecoGoods.vue';
export default {
  components: {
    Goods,
    CouponCard
  },
  extends: goUrlExtends,
  data() {
    return {
      money: '00.00',
      orderNo: null,
      isSuccess: false,
      freeAmount: 0,
      payStatus: '',
      couponList: [],
      payStatusName: '',
      payMethodName: '',
      payTrackInfo: {},
      skuID: ''
    };
  },
  created() {
    const { orderNo, reason } = this.$route.query;
    const { success } = this.$route.meta;
    const amount = cookies.get('amount') || {};
    this.payTrackInfo = cookies.get('payTrackInfo') || {};
    this.skuID = String(cookies.get('skuID')) || '';
    this.money = amount.finalAmt;
    this.orderNo = orderNo;
    this.reason = reason || '';
    this.isSuccess = success || false;
    this.freeAmount = amount.freeAmount;
    this.payStatus = success ? '订单支付成功' : '订单支付失败';
    this.payStatusName = success ? '支付成功' : '支付失败';
    this.$track?.registeredEvents('h5_RechargeResultPageExposure', {
      pay_status: this.payStatus
    });
    this.$track?.registeredEvents('H5_2BPaymentPageExposure', {
      order_no: orderNo,
      pay_result: this.payStatus,
      vcc_state: this.payTrackInfo.vcc_state,
      pay_method: this.payTrackInfo.pay_method,
      pay_amount: amount.finalAmt
    });
    this.getCouponList();
    this.payMethod();
  },
  methods: {
    payMethod() {
      const name = this.payTrackInfo.pay_method;
      switch (name) {
        case 1:
          this.payMethodName = '享花卡';
          break;
        case 2:
          this.payMethodName = '微信';
          break;
        case 3:
          this.payMethodName = '支付宝';
          break;
        default:
          '';
      }
    },
    // goPay() {
    //   this.$track?.registeredEvents('h5_RechargeResultPageClick', {
    //     commodity_id: this.skuID,
    //     order_number: this.orderNo,
    //     pay_method: this.payMethodName,
    //     pay_status: this.payStatusName,
    //     buttons_name: '重新支付'
    //   });
    //   this.$router.replace({ name: 'pay', query: { orderNo: this.orderNo } });
    // },
    goPage(type) {
      const name = type ? '查看订单' : '重新支付';
      this.$track?.registeredEvents('H5_2B_PaymentResultPageBtnClick', {
        commodity_id: this.skuID,
        order_number: this.orderNo,
        pay_method: this.payMethodName,
        pay_status: this.payStatusName,
        buttons_name: name
      });
      if (type == 1) {
        this.$router.replace({ name: 'orderList', params: { state: 0 } });
      } else {
        this.$router.replace({ name: 'pay', query: { orderNo: this.orderNo } });
      }
    },
    async getCouponList() {
      const [data] = await getCouponList({ orderNo: this.orderNo, paySuccess: true });
      console.log(data);
      if (data) {
        this.couponList = data.couponList || [];
      }
    },
    goViewCouponDetail() {
      this.$router.push('/');
    }
  }
};
</script>
<style lang="less" scoped>
.card {
  margin: @padding-sm;
  background-color: @white;
  border-radius: @border-radius-sm;
  padding: 28px @padding-sm @padding-sm @padding-sm;

  .info {
    display: flex;
    justify-content: center;
    align-items: center;

    &__image {
      width: 100px;
      height: 100px;
    }

    &__text {
      .text-16;
      margin-left: @padding-md;
    }

    &__desc {
      display: flex;
      flex-direction: column;
    }

    &__money {
      margin-top: @padding-xs;
    }
    &__free {
      .text-13;
      margin-top: @padding-xs;
      color: @font-color-light;
    }
  }

  .tips {
    .text-12;
    text-align: center;
    margin-top: @padding-lg;
    color: @font-color-light;
  }

  .actions {
    display: flex;
    flex-direction: row;
    margin-top: @padding-lg;
    justify-content: space-between;
    &__back {
      color: @cherry-color-error;
      border: 1px solid @cherry-color-error;
    }

    &__order {
      @primary-bg();
      margin-left: @padding-sm;
    }

    button {
      // flex: 1;
      .text-16;
      width: 161px;
    }
  }
  .info_button {
    width: 100%;
  }
}
.activity {
  margin: @padding-sm;
  height: 64px;
}

.coupon-box {
  box-sizing: border-box;
  margin: @padding-sm;
  background-color: @white;
  border-radius: @border-radius-sm;
  padding: @padding-sm;
  height: 150px;
  overflow: hidden;
}
.coupon-tip {
  .text-14;
  font-family: PingFangSC-Medium;
  .text-14;
  color: #ff4735;
  letter-spacing: 0;
  margin-bottom: @padding-unit;
}
.coupon-wrap {
  display: flex;
  flex-direction: row;
  height: 120px;
  width: 327px;
  padding: 0;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.coupon-item {
  display: inline-flex;
}
.goods {
  background-color: #fff;
  box-sizing: border-box;
  // width: 100%;
  margin: @padding-sm;
  padding: @padding-sm;
}
</style>
