<template>
  <div></div>
</template>

<script>
import * as api from '../api.js'

export default {
  name: 'wxPay',
  props: {
    productId: { type: String, required: true }
  },
  data() {
    return {
      openId: '',
      order: { options: {} }
    }
  },
  computed: {
    // 用户信息
    user() {
      return this.$store.state.user
    },
    // 是否登录
    isLogin() {
      return this.$store.state.isLogin
    }
  },
  methods: {
    // 获取openid
    getOpenId() {
      api.getOpenId({ id: this.user.id, identity: 'transport' }).then(response => {
        this.openId = response.data.openid
        // 生成订单
        this.genOrder()
      })
    },
    // 生成订单
    genOrder() {
      const params = {
        product_id: this.productId,
        open_id: this.openId,
        type: 'certs-h5'
      }
      api.genOrder(params).then(response => {
        this.order = response.data
        // 调起微信支付
        this.wxPay()
      })
    },
    // 微信支付
    wxPay() {
      const options = this.order.options
      wx.chooseWXPay({
        timestamp: options.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: options.nonceStr, // 支付签名随机串，不长于 32 位
        package: `prepay_id=${this.order.prepay_id}`, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        signType: options.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: options.paySign, // 支付签名
        success: res => {
          this.$toast('支付成功')
          // 支付成功后的回调函数
          this.$emit('success', res)
        },
        fail: error => {
          this.$toast('支付失败')
          this.$emti('fail', error)
        }
      })
    },
    pay() {
      this.getOpenId()
    }
  }
}
</script>
