<template>
  <view>
    <yi-pay-order :pay-amount="payAmount" :xid="xid" @paySuccess="paySuccess"></yi-pay-order>
    <u-modal
      v-model="showModal"
      :content="noteContent"
      show-confirm-button
      show-cancel-button
      confirm-text="继续支付"
      cancel-text="残忍离开"
      :cancel-color="cancelColor"
      :confirm-color="confirmColor"
      @cancel="handleCancel"
      @confirm="handleConfirm"
    ></u-modal>
  </view>
</template>

<script>
export default {
  name: 'orderPay',
  data() {
    return {
      isPaySuccess: false,
      showModal: false,
      noteContent: '你还未完成支付,确定离开吗?',
      cancelColor: '#f33',
      confirmColor: '#1296db',
      payAmount: 0,
      xid: null,
      header: {
        top: 0,
        height: 0,
      },
    };
  },
  onLoad(options) {
    const { payAmount, xid } = options;
    this.payAmount = Number(payAmount);
    this.xid = xid;
  },
  methods: {
    handleGoBack() {
      console.log('%c [handleGoBack]: ', 'color:#1989fa;');
      if (!this.isPaySuccess) {
        this.showModal = true;
      }
    },
    // 离开
    handleCancel() {
      this.showModal = false;
      uni.navigateBack({
        delta: 2,
      });
    },
    // 继续支付
    handleConfirm() {
      this.showModal = false;
    },
    paySuccess(payAmount) {
      this.isPaySuccess = true;
      uni.redirectTo({
        url: `/demo/packageMall/orderPaySuccess?payAmount=${payAmount}`,
      });
    },
  },
};
</script>

<style scoped lang="scss"></style>
