<template>
  <!-- 各种回调页面 -->
  <div class="app-content awaitPayYe awaitPayYe">
    <div class="callback-wrap">
      <div class="bg_01"></div>
      <div class="callback-blo">
        <!-- 使用icon -->
        <!-- 待支付 -->
        <block>
          <div class="icon">
            <i class="iconfont icondaizhifu"></i>
          </div>
        </block>
        <view class="wait">待付款</view>
        <!-- 待支付 -->
        <block>
          <div class="price">
            <span>￥</span>
            <span class="app-size-36 app-bold">{{ realPrice || '0.00'}}</span>
          </div>
          <div class="order-num app-color-3">订单号: {{ orderSn || ''}}</div>
        </block>
        <block>
          <div class="call-one-btn">
            <button
              class="button-com green pay-wx"
              @click="postponePay"
              v-if="type === '2'"
            >延期支付</button>
            <button
              class="button-com green pay-wx"
              @click="_wxPay"
              v-if="type ==='1' || type === '2'"
            >微信支付</button>
            <button
              class="button-com green pay-wx"
              @click="_balancePay"
              v-if="type === '2'"
            >余额支付</button>
          </div>
        </block>
      </div>
    </div>
    <!-- 键盘 -->
    <keyboard-module
      :show="keyShow"
      @comfirm="hideKeyFn"
      @clickKey="clickKeyFn"
      :psdShow="true"
      :type="_type"
      @closeKey="closeKeyFn"
    />
    <alert-module>
      <div class="go-login-module">
        <div>请先设置支付密码！</div>
      </div>
    </alert-module>
  </div>
</template>

<script>
import { purchaseClearCreateOrder, purchaseClearWxPay, purchaseBalancePay, purchaseDebtPay, purchaseWxPay } from "@/api/purchase/index";
import keyboardModule from './components/keyboard'
import { mapGetters } from "vuex";
import wexinPay from "@/utils/pay/wxPay";
export default {
  name: "callback",
  components: {
    keyboardModule
  },
  data () {
    return {
      options: {},
      type: '',
      keyShow: false,
      modalForm: {
        payPassword: ''
      },
      psdKey: '',
      orderSn: '',
      realPrice: '',
      _type: '1',
      pageId: ''
    };
  },
  onLoad (options) {
    this.orderSn = options.orderSn;
    this.realPrice = options.realPrice;
    this.type = options.type
  },
  computed: {
    ...mapGetters(["getLoginInfo", 'getDictionariesInfo']),
  },
  mounted () {
    // this.getWeChat()
  },
  methods: {
    // 延期支付
    postponePay () {
      let that = this
      uni.showModal({
				title: '提示',
				content: '确认延期支付？',
				success: function (res) {
					if (res.confirm) {
            console.log(that.orderSn)
						purchaseDebtPay({ orderSn: that.orderSn }).then(res => {
              console.log(res)
              that.pageTo({
                url: '/pagesPurchase/particulars?id=' + res.data.id,
                type: 2
              })
            }).catch(err => { console.log(err) })
					}
				}
			});
      
    },
    // getWeChat () {
    //   purchaseClearCreateOrder({ id: this.options.id }).then(res => {
    //     this.options = res.data
    //     this.orderSn = res.data.orderSn
    //   }).catch(err => { console.log(err) })
    // },
    _wxPay () {
      let Fn = this.type === '1' ? purchaseClearWxPay({ orderSn: this.orderSn }) : this.type === '2' ? purchaseWxPay({ orderSn: this.orderSn }) : null
      Fn.then(res => {
        console.log(res, 128)
        this.pageId = res.data.id
        wexinPay(res.data, this.getSuccess, this.getError)
      }).catch(err => { console.log(err) })
    },
    getSuccess () {
      this.pageTo({
        url: '/pagesPurchase/particulars?id=' + this.pageId,
        type: 2
      })
    },
    // 关闭键盘
    closeKeyFn () {
      this.keyShow = false
    },
    getError () {
    },
    _balancePay () {
      let self = this
      if (this.getLoginInfo.payPassword) {
        self.keyShow = true
      } else {
        uni.showModal({
          title: '',
          content: '请先设置支付密码',
          success: function (res) {
            if (res.confirm) {
              self.pageTo({
                url: '/pagesPurchase/setPsd'
              })
            }
          }
        });
      }
    },
    // 点击数字键盘
    clickKeyFn (val) {
      this.psdKey = val
      console.log(this.psdKey)
    },
    // 点击了完成
    hideKeyFn () {
      if (this.psdKey.length === 6) {
        let data = {
          orderSn: this.orderSn,
          password: this.psdKey
        }
        purchaseBalancePay(data).then(res => {
          this.pageTo({
            url: '/pagesPurchase/particulars?id=' + res.data.id,
            type: 2
          })
        }).catch(err => { console.log(err) })
      } else {
        this.$msg('请输入六位数支付密码')
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.app-content {
  .callback-wrap {
    padding-top: 50px;
    // background-image: url("../../src/static/images/callback/bg.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: relative;
    .bg_01 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 290upx;
      background: #3385ff;
      border-radius: 0rpx 0rpx 83rpx 83rpx;
      z-index: 1;
    }
    .callback-blo {
      position: absolute;
      z-index: 9;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      margin: 0 auto;
      padding: 70px 0;
      background-color: #fff;
      box-shadow: 2px 2px 16px 0px rgba(181, 181, 181, 0.29);
      border-radius: 10px;
      text-align: center;
      // 使用icon
      .icon {
        .iconfont {
          font-size: 170px;
        }
      }
      // 一个按钮
      .call-one-btn {
        .button-com {
          width: 80%;
          padding-top: 22px;
          padding-bottom: 22px;
          font-size: 32px;
          margin-top: 40px;
        }
      }
    }
  }
}
// 待支付 - 公共
.awaitPayWx,
.awaitPayYe {
  .status-text {
    margin-top: 22px;
    margin-bottom: 52px;
    color: #ffa92e;
  }
  .surplus {
    margin-top: 22px;
    margin-bottom: 38px;
  }
  .icon {
    .iconfont {
      color: #ffa92e;
    }
  }
}
// 待确认样式
.wait {
  color: #ffa92e;
  font-size: 40upx;
  font-weight: 700;
  margin: 20upx 0;
}
</style>
