<template>
  <div class="pay-bg">
    <img src="../../assets/images/pages.png" alt="">
    <div class="pay-btn">
      <div class="num">¥<span>199</span>.00</div>
      <div class="btn" @click="goPay" v-if="orderStatus === 100">立即购买</div>
      <div class="btn active" v-if="orderStatus === 1" @click="goHome">已购买</div>
      <div class="btn" v-if="orderStatus === -1" @click="goMyOrder">待支付</div>
    </div>
    <!-- <van-button type="primary" @click="goPay" class="pay-btn">购买</van-button> -->
    <!-- <pay-h5 :requestParam="requestParam"></pay-h5> -->
    <pay-we-chart :requestParam="requestParam"></pay-we-chart>
  </div>
</template>
<script>
import * as api from '@/api/pay.js'
import { getUser } from '@/api/account'
import { Toast } from 'vant'
export default {
  components: {
    [Toast.name]: Toast
  },
  data() {
    return {
      userId: '',
      requestParam: {
        product_id: '6684359515615264768', // 提前设定
        open_id: '', // 通过微信授权获取
        prepay_id: '', // 通过调用接口获取
        app_id: '', // 提前设定
        app_secret: '' // 提前设定
      },
      orderStatusTime: null,
      orderStatus: 100
    }
  },
  mounted() {
    this.getOpenid()
    clearInterval(this.orderStatusTime)
    this.orderStatusTime = setInterval(() => {
      this.getOrderStatus()
    }, 1000)
  },
  methods: {
    goHome() {
      Toast('您已购买！')
      this.pushHistory()
      window.addEventListener('popstate', function(e) {
        window.location.href = '/'
      }, false)
    },
    pushHistory() {
      const state = {
        title: '首页',
        url: '#'
      }
      window.history.pushState(state, '首页', '#')
    },
    goMyOrder() {
      this.$router.push({
        name: 'buyCourses'
      })
    },
    getOpenid() {
      getUser().then(res => {
        api.getOpenid({ id: res.id, identity: 'transport' }).then(res => {
          if (res.code === 0) {
            this.requestParam.open_id = res.data.openid
          }
        })
      })
    },
    getOrderStatus() {
      api.getOrderStatus().then(res => {
        Toast(res.status)
        this.orderStatus = res.status
      })
    },
    goPay () {
      // this.VueEvent.$emit('pay-wx-h5', {})
      // this.VueEvent.$off('pay-wx-h5-callback').$on('pay-wx-h5-callback', obj => {
      //   if (obj.code === 200) {
      //     this.$router.back()
      //   } else {
      //     // this.$router.go(-2)
      //     Toast(obj.msg)
      //   }
      //   console.log(obj, '======')
      // })
      if (window.__wxjs_environment === 'miniprogram') {
        wx.miniProgram.navigateTo({
          // url: '/pages/pay/index?data=' + JSON.stringify(obj.data),
          url: '/pages/pay/index?data=' + this.requestParam.product_id,
          events: {
            // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
            acceptDataFromOpenedPage: function (data) {
              console.log(data)
            }
          },
          success: function (res) {}
        })
        // clearInterval(this.orderStatusTime)
        // this.orderStatusTime = setInterval(() => {
        //   this.getOrderStatus()
        // }, 1000)
      }
      // this.VueEvent.$emit('pay-wx-chart', {})
      // this.VueEvent.$off('pay-wx-chart-callback').$on('pay-wx-chart-callback', obj => {
      //   if (obj.code === 200) {
      //   } else {
      //     // this.$router.go(-2)
      //     Toast(obj.msg)
      //   }
      //   console.log(obj, '======')
      // })
    }
  },
  beforeMount() {
    window.removeEventListener('popstate', function(e) {}, false)
  }
}
</script>
<style lang="scss" scoped>
.pay-bg{
  width: 100%;
  img{
    width: 100%;
  }
}
.pay-btn{
  position: fixed;
  bottom: 0;
  left: 0;
  width:7.5rem;
  height:1rem;
  background:rgba(255,255,255,1);
  box-shadow:0px 0px 6px 0px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  padding: 0 .4rem;
  .num{
    font-size: .26rem;
    color: #FF6767;
    span{
      font-size: .4rem;
    }
  }
  .btn{
    width:4.65rem;
    height:.7rem;
    background:rgba(255,103,103,1);
    border-radius:.12rem;
    margin-left: auto;
    text-align: center;
    line-height: .7rem;
    color: #fff;
    font-size: .3rem;
  }
  .active{
    background: #ccc;
  }
}
</style>
