<template>
  <view class="app-content classPage">
    <view class="class_info">
      <view class="class_details">
        <text class="flower_name">{{pageData.name}}</text>
        <text class="flower_price">¥{{pageData.price}}</text>
      </view>
      <view class="class_intro">
        <text class="_intro">{{pageData.target}}</text>
        <text class="_intro">×1</text>
      </view>
    </view>
    <view class="class_fill">
      <view class="fill_name">
        <text class="nickname">昵称</text>
        <input type="text" class="inputText" v-model="dataList.form.nickname" placeholder="请填写昵称" placeholder-style="font-size: 28upx; color: #999;">
        <button class="generate_btn"  @click="getWxAvatar">点击生成</button>
      </view>
      <view class="fill_name">
        <text class="nickname">手机号</text>
        <input type="text" class="inputText" v-model="dataList.form.mobile"  placeholder="请填写手机号" placeholder-style="font-size: 28upx; color: #999;">
        <button class="generate_btn" open-type="getPhoneNumber"  @getphonenumber="getWxMobile">点击生成</button>
      </view>
      <view class="fill_name">
        <text class="nickname">姓名</text>
        <input type="text" class="inputLast" v-model="dataList.form.name" placeholder="请填写姓名" placeholder-style="font-size: 28upx; color: #999;">
      </view>
    </view>
    <view class="footer_bar">
     <text class="item_price">学费：
        <text class="price">
          ¥
          <text style="font-size: 40upx;padding-left: 10upx;">{{pageData.price}}</text>
        </text>
      </text>
      <view class="confirm_btn" @click="confirm">提交</view>
    </view>
  </view>
</template>

<script>
import { pxApplyAdd, pxApplyWxPay } from '@/api/px-class/index'
import weixinPay from '@/utils/pay/wxPay'
import { getWxPhone, getWxInfo } from "@/api/mini";
export default{
  data() {
    return {
      dataList: {
        form: {
          classId: '',
          name: '',
          mobile: '',
          nickname: ''
        }
      },
      orderSn: '',
      pageData: {}
    }
  },
  onLoad(option) {
    this.dataList.form.classId = option.id
    this.pageData = option
  },
  methods: {
    confirm(){
      let that = this
      if(that.dataList.form.nickname === ''){
        that.$msg('请输入昵称')
        return false
      }
      if(that.dataList.form.mobile === ''){
        that.$msg('手机号不能为空')
        return false
      }
       if (!/^1[34578]\d{9}$/.test(that.dataList.form.mobile)){
           that.$msg('请输入正确的手机号')
           return false
       }
         if(that.dataList.form.name === ''){
        that.$msg('请输入姓名')
        return false
      }
      uni.showModal({
        title: '',
        content: '确定支付吗?',
        success: function (res) {
            if (res.confirm) {
                console.log('用户点击确定', );
                pxApplyAdd(that.dataList.form).then(res=>{
                  pxApplyWxPay({orderSn: res.data.orderSn}).then(res =>{
                    console.log(res)
                    weixinPay(res.data, that.successFn, that.errorFn)
                  }).catch(err => { console.log(err, 'err') })
                  console.log(that.dataList.form.classId, 'classId')
                  console.log(res, 'res', pxApplyWxPay)
                }).catch(err => {})
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        }
      });
    },
    successFn() {
      this.pageTo({
        url: '/pages/class/paySuccess',
        type: 2
      })
    },
    errorFn() {
      this.$msg('支付失败')
    },
     // 获取微信手机号
    getWxMobile(e) {
      console.log(e);
      if (e.detail.errMsg === "getPhoneNumber:ok") {
        getWxPhone({
          iv: e.detail.iv,
          encryptedData: e.detail.encryptedData
        }).then(res => {
          console.log("用户信息", res);
          uni.showToast({
            icon: "success"
          });
          this.dataList.form.mobile = res.data.mobile;
        });
      } else {
        this.$msg("获取信息失败！");
      }
    },
    // 获取微信信息
    getWxAvatar() {
      uni.getUserProfile({
        desc:'登录',
        success:(res)=>{
          getWxInfo({ iv: res.iv, encryptedData: res.encryptedData }).then(
            subRes => {
              this.dataList.form.nickname = subRes.data.name;
              uni.showToast({
                icon: "success"
              });
            }
          );
        },
        fail:(res)=>{
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.classPage{
  padding: 20upx;
  &>.class_info{
    border-radius: 10upx;
    padding: 30upx 20upx;
    background-color: #fff;
    &>.class_details{
      display: flex;
      justify-content: space-between;
      &>.flower_name{
        font-size: 36upx;
        font-weight: 700;
        color: #333;
      }
      &>.flower_price{
        font-size: 28px;
        font-weight: bold;
        color: #FF2842;
      }
    }
    &>.class_intro{
      margin-top: 20upx;
      display: flex;
      justify-content: space-between;
      &>._intro{
        font-size: 24px;
        color: #999999;
      }
    }
  }
  &>.class_fill{
    margin-top: 20upx;
    padding: 0 20upx;
    background-color: #fff;
    border-radius: 10upx;
    &>.fill_name{
      height: 88upx;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &>.nickname{
        max-width: 130upx;
        width: 130upx;
        font-size: 28px;
        color: #333333;
      }
      &>.inputText{
        width: calc(100% - 300upx);
        padding: 10upx;
        font-size: 24upx;
      }
      &>.inputLast{
        width: calc(100% - 150upx);
        padding: 10upx;
        font-size: 24upx;
      }
      &>.generate_btn{
        width: 140px;
        height: 50px;
        line-height: 50upx;
        font-size: 24upx;
        text-align: center;
        background: #3385FF;
        border: 1px solid #3385FF;
        padding: 0;
        border-radius: 8px;
        color: #fff;
        border: none;
      }
    }
  }
  &>.footer_bar{
    height: 100upx;
    width: 100vw;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20upx;
    box-sizing: border-box;
    &>.item_price{
      font-size: 24upx;
      .price{
        display: inline-block;
        color: #FF2842;
        font-weight: 700;
      }
    }
    &>.confirm_btn{
      width: 200upx;
      height: 70upx;
      text-align: center;
      line-height: 70upx;
      background: #3385FF;
      border: 1px solid #3385FF;
      border-radius: 8px;
      color: #fff;
      font-size: 32upx;
    }
  }
}
</style>