<template>
  <div v-show="payForVip" >
    <div class="box-shade" :style="{'height':height}">
    </div>
    <div class="content">
      <!-- <button target="miniProgram" path="pages/pay/index" :extra-data="minJson" app-id="wxa9fc47caa941b0a7" envVersion="develop" @complete="complete" @fail="complete">客无忧</button> -->
      <image class="becomeVip" mode="aspectFit" src="https://eshangtech.com/ShopICO/payforVip.png" />
      <div class="payfor-btn" @click="isUser"></div>
      <div class="agreement" @click="goAgreement"></div>
      <image class="vip-close" mode="aspectFit" src="https://eshangtech.com/ShopICO/vip-close.png" @click="close" />
      <div class="aready-btn" v-show="user.ISPLUS===1">
        您的首充优惠已到，快去使用吧！
        <div class="see-btn" @click="goDiscovery">查看我的券包</div>
      </div>
     
    </div>
  </div>
</template>

<script>
import {mapGetters, mapMutations} from 'vuex'
export default {
  data () {
    return {
      minJson: {}
    }
  },
  computed: {
    ...mapGetters(['user', 'payForVip']),
    height () {
      let systemInfo = mpvue.getStorageSync('systemInfo')
      return systemInfo.windowHeight + 'px'
    }
  },
  methods: {

    ...mapMutations({
      closePop: 'payForVip'
    }),
    close () {
      this.closePop(false)
    },
    goAgreement () {
      mpvue.navigateTo({url: '/pages/payAgreement/main'})
    },
    isUser () {
      if (!this.user.MEMBERSHIP_MOBILEPHONE) {
        mpvue.navigateTo({url: '/pages/register/main'})
      } else {
        this.payfor()
      }
    },
    payfor () {
      let _this = this

      _this.$api.postCoop({
        action_type: 'ScanOrder',
        salebillType: 2000
      }).then(rs => {
        if (rs.ResultCode === '100') {
          _this.getOrderInfo(rs.Data)
        } else {
          mpvue.showToast({title: rs.ResultDesc, icon: 'none'})
        }
      })
    },
    getMember () {
      let _this = this
      _this.$api.getCoop({
        action_type: 'GetMembershipInfo',
        // memberShipId: this.user.MEMBERSHIP_ID,
        WechatUserId: this.user.WechatUserId,
        RegisterType: 0
      }).then(function (data) {
        if (data.ResultCode === '100') {
          let _data = data.Data
          _this.user.MEMBERSHIP_LEVEL_TEXT = _data.MEMBERSHIP_LEVEL_TEXT || ''
          _this.user.COUPON_COUNT = _data.COUPON_COUNT || ''
          _this.user.PENDORDER_COUNT = _data.PENDORDER_COUNT || ''
          _this.user.RESERVATION_COUNT = _data.RESERVATION_COUNT || ''
          _this.user.ACCOUNT_BALANCE = _data.ACCOUNT_BALANCE || ''
          _this.user.ISPLUS = _data.ISPLUS || ''
          _this.user.INDUSTRY_MEMBERSHIP_ID = _data.INDUSTRY_MEMBERSHIP_ID || ''
          _this.user.MEMBERSHIP_TYPE = _data.MEMBERSHIP_TYPE || ''
          _this.user.MEMBERSHIP_LEVEL = _data.MEMBERSHIP_LEVEL || ''
          _this.user.InviteCode = _data.InviteCode || ''
          _this.user.MEMBERSHIP_MOBILEPHONE = _data.MEMBERSHIP_MOBILEPHONE || ''
          _this.user.MEMBERSHIP_POINT = _data.MEMBERSHIP_POINT || ''

          _this.$store.commit('setUser', _this.user)
          // if (_this.user.ISPLUS === 0 && _this.isFirst === 1) {
          //   _this.becomeVip = true
          //   _this.isFirst = 0
          // }
        }
      })
    },
    goDiscovery () {
      this.close(false)
      // mpvue.navigateToMiniProgram({
      //   path: 'pages/pay/index',
      //   extraData: {
      //     foo: 'bar'
      //   },
      //   appId: 'wxa9fc47caa941b0a7',
      //   envVersion: 'develop',
      //   success (data) {
      //     console.log(data)
      //   },
      //   fail (data) {
      //     console.log(data)
      //   }
      // })
      mpvue.navigateTo({url: '/pages/homeFn/myCoupon/main'})
    },
    // 获取后台信息调取微信支付
    getOrderInfo (obj) {
      let _this = this
      _this.$api.postCoop({
        action_type: 'JsApiPay',
        action_data: 1,
        action_record: _this.user.WECHATAPP_OPENID,
        TOTAL_FEE: obj.ORDER_AMOUNT,
        OFFPRICE: 0,
        payType: 2,
        SALEBILL_ID: obj.SALEBILL_ID,
        SALEBILL_CODE: obj.SALEBILL_CODE
      }).then(res => {
        if (res) {
          mpvue.requestPayment({
            appId: res.appid, // appid
            timeStamp: res.timeStamp + '', // 时间戳，自1970年以来的秒数
            nonceStr: res.nonceStr, // 随机串
            package: res.package,
            signType: res.signType, // 微信签名方式
            paySign: res.paySign, // 微信签名
            success (res) {
              if (res.errMsg === 'requestPayment:ok') {
                mpvue.showToast({
                  title: '开通成功',
                  icon: 'success',
                  duration: 2000
                })
                setTimeout(() => {
                  _this.$api.postCoop({
                    action_type: 'EndPay',
                    action_data: obj.SALEBILL_CODE,
                    action_record: 1
                  }).then(res => {
                    // _this.close(false)
                    _this.getMember()
                  })
                }, 1000)
              }
            },
            fail (res) {
              console.log(res)
              if (res.errMsg === 'requestPayment:fail cancel') {
                mpvue.showToast({
                  title: '支付取消',
                  icon: 'none',
                  duration: 2000
                })
              }
            },
            complete (res) {}
          })
        } else {
          mpvue.showToast({
            title: '网络异常，请稍后再试',
            icon: 'none',
            duration: 2000
          })
        }
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.box-shade
  width 100%
  position absolute
  overflow hidden
  top 0
  left 0
  background-color #000
  opacity .8
  z-index 1
.content
  position absolute
  transform translate(-50%,-50%)
  top 50%
  left 50%
  width 690rpx
  z-index 2
  box-sizing border-box
  height 1000rpx
  overflow hidden
  .payfor-btn
    
    height 100rpx
    width 606rpx
    position relative
    top -230rpx
    margin 0 auto
  .becomeVip
    height 846rpx
    width 690rpx
  .vip-close
    height 64rpx
    width 64rpx
    position relative
    top -70rpx
    margin 0 auto 
    display block
  .agreement
    height 35rpx
    width 300rpx
    position relative
    top -165rpx
    margin 0 auto
  .aready-btn
    background-color #fff
    height 242rpx
    width 613rpx
    position relative
    top -450rpx
    margin 0 auto
    text-align center
    color #854e1e
    font-size 32rpx
  .see-btn
    height 100rpx
    width 606rpx
    margin 20rpx auto
    border-radius 50rpx
    line-height 100rpx
    color #f0dccf
    background linear-gradient(to right ,#1f1f1f,#62605f)
</style>


