<template>
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color: #1989fa"
    >
      <template #title>
        <van-col style="color: #ffffff">微信二维码缴费</van-col>
      </template>
      <template #left>
        <i
          class="fa fa-arrow-circle-left"
          aria-hidden="true"
          style="color: #ffffff; font-size: 18px"
        ></i>
      </template>
      <template #right>
        <van-icon name="replay" size="18" color="#ffffff" />
      </template>
    </van-nav-bar>

      <van-cell

          border
        >
          <template #default>

            <van-row class="borderTop">
              <van-col span="24">
                <van-row>
                  <van-col span="5" class="title1">业主</van-col>
                  <van-col span="19">{{ info.ownername }}</van-col>
                </van-row>
                 <van-row>
                  <van-col span="5" class="title1">房屋</van-col>
                  <van-col span="19">{{ info.hname }}</van-col>
                </van-row>
               <van-row>
                  <van-col span="5" class="title1">费用类型</van-col>
                  <van-col span="19" >{{info.billitemname}}</van-col>
                </van-row>
                 <van-row>
                  <van-col span="5" class="title1">欠费金额</van-col>
                  <van-col span="19" >{{info.nneedpaymny}}元</van-col>
                </van-row>

                <van-row>
                  <van-col span="24">
                         <van-button type="info" @click="handelPay" :disabled="isDisabledSubmitBtn" >确定缴费</van-button>
                  </van-col>
                </van-row>
              </van-col>

            </van-row>
          </template>
        </van-cell>

  </div>
</template>

<script>
import { GetJSAPIWxPayData, CloseOrder, InsertPay } from '@/common/api/loginApi.js'
export default {
  name: 'login',
  data () {
    return {
      info: {}, // 欠费信息
      payUrl: '',
      isDisabledSubmitBtn: false

    }
  },
  created: function () {
    console.info('created')
    // console.info(this.$util);
    this.$util.persistLogin(this)
    this.GetJiaofeiInfo()
    // this.handelPay()
  },
  methods: {
    GetJiaofeiInfo: function () {
      var that = this
      let info = JSON.parse(that.$cookie.get('jiaofei'))
      this.info = info
    },
    handelPay: function () {
      let that = this
      let data = {
        farwarid: this.info.farerowid,
        money: this.info.nneedpaymny + '',
        ownername: this.info.ownername,
        hname: this.info.hname,
        openid: that.$store.state.wxopenid
        // openid: 'o1T9f6YQLyWKspdUE9g4s60VRP_M'
      }// 根据后端所需传参数
      this.isDisabledSubmitBtn = true // 防止用户点击多次
      GetJSAPIWxPayData(data).then(res => {
        console.info('data', res)
        if (!res.isSuccess) {
          that.$toast(res.errMsg)
        } else {
          if (!that.$util.isEmpty(res.data)) {
            // that.$toast(res.data.package)
            that.weixinPay(res.data)
            // console.info('payUrl',that.payUrl);

            // window.location.href=res.data;
          } else {
            that.$toast('未获取到支付数据')
          }
        }
        // this.weChatParameter=res
        // this.weixinPay()
      })
    },
    // 解决微信内置对象报错
    weixinPay (data) {
      var that = this
      if (typeof WeixinJSBridge === 'undefined') {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(data), false)
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(data))
          document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady(data))
        }
      } else {
        that.onBridgeReady(data)
      }
    },
    // 微信内置浏览器类，weChatParameter对象中的参数是3.步骤代码中从后端获取的数据
    onBridgeReady (data) {
      var that = this
      // var timestamp=Math.round(that.weChatParameter.timeStamp).toString();
      // eslint-disable-next-line no-undef
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
          debug: false,
          'appId': data.appId, // 公众号名称，由商户传入
          'timeStamp': data.timeStamp, // 时间戳，自1970年以来的秒数
          'nonceStr': data.nonceStr, // 随机串
          'package': data.package,
          'signType': data.signType, // 微信签名方式：
          'paySign': data.paySign// 微信签名
          // jsApiList: [
          //   'chooseWXPay'
          // ]
        },
        function (res) {
          // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          // eslint-disable-next-line eqeqeq
          if (res.err_msg == 'get_brand_wcpay_request:ok') { // 支付成功后的操作
            // that.isDisabledSubmitBtn = false
            // 自定义加载图标
            that.$toast.loading({
              message: '生成缴费记录中...',
              forbidClick: true,
              loadingType: 'spinner'
            })
            let data = {
              farwarid: that.info.farerowid,
              money: that.info.nneedpaymny + '',
              ownername: that.info.ownername,
              hname: that.info.hname,
              ownerid: that.$store.state.data.ownerid,
              paytype: '1005'
            }// 根据后端所需传参数

            InsertPay(data).then(res => {
              console.info('data', res)
              if (!res.isSuccess) {
                that.$toast(res.errMsg)
              } else {
                that.$router.push('/Getfdc_pm_revfare')
              }
              // this.weChatParameter=res
              // this.weixinPay()
            })

          // eslint-disable-next-line eqeqeq
          } else if (res.err_msg == 'get_brand_wcpay_request:cancel') { // 取消支付的操作
            CloseOrder(data.outTradeNo).then(res => {
              if (!res.isSuccess) {
                that.$toast(res.errMsg)
              } else {
                that.$toast({
                  message: '取消支付',
                  duration: 2000
                })
              }
            })
            that.isDisabledSubmitBtn = false // 按钮恢复高亮
          } else { // 支付失败的操作
            CloseOrder(data.outTradeNo).then(res => {
              if (!res.isSuccess) {
                that.$toast(res.errMsg)
              } else {
                that.$toast({
                  message: '支付失败',
                  duration: 2000
                })
              }
            })
            that.isDisabledSubmitBtn = false // 按钮恢复高亮
          }
        }
      )
    },
    onClickLeft () {
      // this.$toast('返回')
      console.info('left')
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.go(0)
    },
    qrcode () {
      // eslint-disable-next-line no-unused-vars
      let url = this.payUrl
      // eslint-disable-next-line no-unused-vars
      // eslint-disable-next-line no-undef
      // eslint-disable-next-line no-unused-vars
      // let qrcode = new QRCode('qrcode', {
      //   width: 132,
      //   height: 132,
      //   text: url // 二维码地址
      // })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title1 {
  color: #999;
}
.value1 {
  color: #999;
  font-size: 18px;
}
</style>
