<template>
	<view :style="viewColor">
    <!--具体内容-->
		<view class='content-box'>
      <!-- 顶部内容 -->
      <view class="top">
        <view class="left">
          <view class="name">{{ service_info.merchant_type == 1 ? '酒道馆' : '商户' }}：{{ service_info.mer_name || '' }}</view>
        </view>
      </view>
      <view class="top">
        <view class="left">
          <view class="name">操作员：{{ service_info.nickname }}</view>
        </view>
      </view>
      <!-- 买单金额 -->
      <view class="money">
        <view class="top-bg-line"></view>
        <view class="money-box">
          <view class="title">提货商品总价值</view>
          <view class="input-box">
            <view class="unit">¥</view>
            <input class="money-input" :value="pay_info.total_money" readonly disabled type='number' />
          </view>
          <view class="info-box">
            <view class="info-title">剩余{{ service_info.merchant_type == 1 ? '酒卡' : '菜卡' }}额度</view>
            <view class="info-value">{{ pointUserInfo.available }}</view>
          </view>
          <view class="info-box">
            <view class="info-title">剩余酒水卡积分</view>
            <view class="info-value">{{ pointUserInfo.available_integral }}</view>
          </view>
          <view class="info-box" v-if="pay_info.use_integral > 0">
            <view class="info-title">使用酒水卡积分</view>
            <view class="info-value">{{ pay_info.use_integral }}</view>
          </view>
          <view class="info-box" v-if="pay_info.diff_money > 0">
            <view class="info-title">差价</view>
            <view class="info-value">{{ pay_info.diff_money }}</view>
          </view>
          <view class="info-box" v-if="pay_info.diff_money_pay > 0">
            <view class="info-title">实际支付差价</view>
            <view class="info-value">{{ pay_info.diff_money_pay }}</view>
          </view>
        </view>
      </view>
      <!--支付方式-->
      <view class="pay-type" v-if="pay_info.diff_money_pay > 0">
        <pay :payType="pay_info.pay_type" @change="changePayType"></pay>
      </view>
      <!--提交按钮-->
      <view class="pay-btn" v-if="pay_info.total_money > 0" @click="confirmPayment">确认兑换</view>
      <view class="pay-btn not-btn" v-else>确认兑换</view>
		</view>
    <!--授权登录-->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>

<script>

import { pointUserInfo,confirmExchange } from '@/api/exchange.js';
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import emptyPage from '@/components/emptyPage.vue';
import {getUserInfo} from "@/api/user";
import {getStaffInfo} from "@/api/service";
import pay from "@/components/payment/pay";

const app = getApp();
export default {
  components: {
    authorize,
    emptyPage,
    pay
  },
  data() {
    return {
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      pointUserInfo: {},
      // 信息
      service_id: 0,
      service_info: {},
      default_total_money: 0,
      // 提交信息
      pay_info: {
        // 兑换信息
        total_money: 0.00,
        use_integral: 0.00,
        diff_money: 0.00,
        diff_money_pay: 0.00,
        // 支付信息
        pay_type: 'weixin',
        // #ifdef H5
        return_url: 'http://' + window.location.host + '/pages/users/order_list/index',
        // #endif
      },
    };
  },
  computed: {
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
  },
  onLoad(options) {
    if(options.scene){
      console.log('转换前参数：',options.scene)
      var scene = this.$util.getUrlParams(decodeURIComponent(options.scene));
      // console.log("接收参数",scene)
      this.service_id = scene.sid || 0;
      this.default_total_money = Number(scene.tmy) || 0;
    }
    // 判断：是否存在指定信息
    if(Number(this.service_id) <= 0 && Number(this.default_total_money) <= 0){
      this.$util.Tips({
        title: '非法访问，信息参数错误！',
      },{tab:1,url:'/pages/user/index'});
    }
    // 判断：是否登录
    if (!this.isLogin) {
      // 未登录  授权登录
      this.isAuto = true;
      this.isShowAuth = true
    }else{
      // 已登录  获取信息
      this.init();
    }
  },
  onReachBottom: function () {},
  watch: {
    'pay_info.total_money': {
      handler(val) {
        let totalMoney = this.pay_info.total_money.toFixed(2);
        // console.log('总价值', totalMoney)
        // 判断额度是否足够
        // console.log('总价值', [Number(totalMoney) , Number(this.pointUserInfo.available)])
        if(Number(totalMoney) > Number(this.pointUserInfo.available)){
          this.$util.Tips({
            title: '总价值不能超过剩余额度'
          });
          this.pay_info.total_money = 0;
          return false;
        }
        // 计算使用的相关信息
        // console.log('可用酒水卡积分',Number(this.pointUserInfo.available_integral))
        if(Number(totalMoney) > Number(this.pointUserInfo.available_integral)){
          // 酒水卡积分不足
          this.pay_info.use_integral = Number(this.pointUserInfo.available_integral);
          this.pay_info.diff_money = (Number(totalMoney) - Number(this.pay_info.use_integral)).toFixed(2);
          this.pay_info.diff_money_pay = (Number(this.pay_info.diff_money) * Number(this.pointUserInfo.diff_rate) / 100).toFixed(2);
        }else{
          // 酒水卡积分充足
          this.pay_info.use_integral = Number(totalMoney);
          this.pay_info.diff_money_pay = this.pay_info.diff_money = 0;
        }
      },
      deep: false
    },
  },
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authColse(e) {
      this.isShowAuth = e
    },
    // 授权成功 获取用户信息
    init () {
      let _this = this;
      // 获取持有信息
      this.getService();
    },
    // 获取用户持有信息
    getUserInfo(){
      let _this = this;
      let params = {
        quota_type: _this.service_info.merchant_type == 1 ? 1 : 2
      };
      pointUserInfo(params).then(res => {
          _this.pointUserInfo = res.data || {};
          _this.pay_info.total_money = _this.default_total_money || 0;
      }).catch(err => {
        this.$util.Tips({ title: err });
      });
    },
    // 获取员工及商户信息
    getService(){
      let _this = this;
      getStaffInfo({ service_id: _this.service_id }).then(res => {
        _this.service_info = res.data || {};
        this.getUserInfo();
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },
    // 确认付款
    confirmPayment(){
      let _this = this;
      let payInfo = Object.assign({},_this.pay_info);
      payInfo.service_id = _this.service_id;
      payInfo.quota_type = 2;// 由于后台处理一下 这里固定为2
      // 订单支付相关内容
      console.log('支付类型',payInfo.pay_type)
      if (payInfo.pay_type == 'weixin') {
        // #ifdef H5
        payInfo.pay_type = _this.$wechat.isWeixin() ? 'weixin' : 'h5'
        // #endif
        // #ifdef MP
        payInfo.pay_type = 'routine'
        // #endif
        // #ifdef APP-PLUS
        payInfo.pay_type = 'weixin'
        // #endif
      }
      // 发起请求
      uni.showLoading({
        title: '处理中...',
        mask: true
      });
      confirmExchange(payInfo).then(res => {
        uni.hideLoading();
        if(payInfo.diff_money_pay > 0){
          let status = res.data.status,
              orderId = res.data.result.order_id,
              callback_key = res.data.result.pay_key,
              jsConfig = res.data.result.config,
              goPages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=' + res.message;
          _this.orderPay = true;
          uni.hideLoading();
          switch (status) {
            case 'ORDER_EXIST':
            case 'EXTEND_ORDER':
            case 'PAY_ERROR':
            case 'error':
              return _this.$util.Tips({
                title: res.message
              }, {
                tab: 5,
                url: goPages
              });
              break;
            case 'success':
              return _this.$util.Tips({
                title: res.message,
                icon: 'success'
              }, {
                tab: 5,
                url: goPages
              });
              break;
            case 'alipay':
            case "alipayQr":
              uni.navigateTo({
                url: '/pages/order_pay_back/index?keyCode=' + callback_key + '&url=' +
                    jsConfig
              })
              return;
              break;
              // #ifndef MP
            case "wechat":
            case "weixin":
            case "weixinApp":
              jsConfig.timeStamp = jsConfig.timestamp;
              // #ifndef APP-PLUS
              this.$wechat.pay(jsConfig).then(res => {
                return _this.$util.Tips({
                  title: res.message,
                  icon: 'success'
                }, {
                  tab: 4,
                  url: goPages
                });
              }).catch(res => {
                if (res.errMsg == 'chooseWXPay:cancel') return _this.$util.Tips({
                  title: '取消支付'
                }, {
                  tab: 5,
                  url: goPages + '&status=0'
                });
              })
              // #endif
              // #ifdef APP-PLUS
              let mp_pay_name=''
              if(uni.requestOrderPayment){
                mp_pay_name='requestOrderPayment'
              }else{
                mp_pay_name='requestPayment'
              }
              uni[mp_pay_name]({
                provider: 'wxpay',
                orderInfo: jsConfig,
                success: (e) => {
                  let url = '/pages/order_pay_status/index?order_id=' + orderId +
                      '&msg=支付成功';
                  return _this.$util.Tips({
                    title: '支付成功',
                    icon: 'success'
                  }, {
                    tab: 4,
                    url: url
                  });
                },
                fail: (e) => {
                  let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
                  return _this.$util.Tips({
                    title: '取消支付',
                  }, {
                    tab: 4,
                    url: url
                  });
                },
                complete: () => {
                  let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
                  return _this.$util.Tips({
                    title: '',
                  }, {
                    tab: 4,
                    url: url
                  });
                },
              });
              // #endif
              break;
              // #endif
              // #ifdef MP
            case "routine":
              jsConfig.timeStamp = jsConfig.timestamp;
              _this.toPay = true;
              let mp_pay_name=''
              if(uni.requestOrderPayment){
                mp_pay_name='requestOrderPayment'
              }else{
                mp_pay_name='requestPayment'
              }
              uni[mp_pay_name]({
                ...jsConfig,
                success: function(res) {
                  uni.hideLoading();
                  return _this.$util.Tips({
                    title: '支付成功',
                    icon: 'success'
                  }, {
                    tab: 5,
                    url: goPages
                  });
                },
                fail: function(e) {
                  let pages = '/pages/order_pay_status/index?order_id=' +
                      orderId + '&msg=取消支付'
                  return _this.$util.Tips({
                    title: '取消支付'
                  }, {
                    tab: 5,
                    url: pages + '&status=0'
                  });
                },
              })
              break;
              // #endif
            case "balance":
              //余额
              return _this.$util.Tips({
                title: res.msg
              }, {
                tab: 5,
                url: goPages + '&status=1'
              });
              break;
              // #ifdef H5
            case 'h5':
              let host = window.location.protocol + "//" + window.location.host;
              let url = `${host}/pages/order_pay_status/index?order_id=${orderId}&msg=${res.message}`
              let eUrl = encodeURIComponent(url)
              let jsurl = jsConfig.mweb_url || jsConfig.h5_url
              let locations = `${jsurl}&redirect_url=${eUrl}`
              setTimeout(() => {
                location.href = locations;
              }, 100);
              break;
              // #endif
              // #ifdef APP-PLUS
            case 'alipayApp':
              uni.requestPayment({
                provider: 'alipay',
                orderInfo: jsConfig,
                success: (e) => {
                  return _this.$util.Tips({
                    title: '支付成功',
                    icon: 'success'
                  }, {
                    tab: 5,
                    url: goPages
                  });
                },
                fail: (e) => {
                  let pages = '/pages/order_pay_status/index?order_id=' +
                      orderId + '&msg=支付失败'
                  return _this.$util.Tips({
                    title: '支付失败'
                  }, {
                    tab: 5,
                    url: pages
                  });
                },
                complete: () => {
                  uni.hideLoading();
                  let pages = '/pages/order_pay_status/index?order_id=' +
                      orderId + '&msg=取消支付'
                  return _this.$util.Tips({
                    title: ''
                  }, {
                    tab: 5,
                    url: pages
                  });
                },
              });
              break;
              // #endif
            default:
              let pages = '/pages/order_pay_status/index?order_id=' +
                  orderId + '&msg=取消支付'
              return _this.$util.Tips({
                title: '取消支付'
              }, {
                tab: 5,
                url: pages + '&status=0'
              });
          }
        }else{
          this.$util.Tips({
            title: '操作成功！',
            icon: 'success'
          },{tab:1,url:'/pages/user/index'});
        }
      }).catch(err => {
        uni.hideLoading();
        this.$util.Tips({
          title: err
        });
      });
    },
    // 跳转
    goMenuPage(url) {
      console.log(url)
      if (this.isLogin) {
        uni.navigateTo({
          url
        })
      } else {
        this.openAuto()
      }
    },
    // 修改支付方式
    changePayType(value){
      this.pay_info.pay_type = value;
    },

  },
}
</script>

<style scoped lang="scss">
.content-box{
  width: 100vw;
  min-height: 100vh;
  background-color: orange;
  padding: 20rpx;
  background: linear-gradient(to bottom, #1b79ff, #f6f6f6) no-repeat;
  background-size: 100% 300rpx;
  background-color: #f6f6f6;

  // 公共内容
  .box-title{
    margin: 30rpx 0;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    padding-left: 20rpx;
    font-weight: bold;
    position: relative;
  }
  .box-title:after{
    content: "";
    position: absolute;
    left: 0;
    top: calc((50rpx - 30rpx) / 2);
    width: 10rpx;
    height: 30rpx;
    background: #1777ff;
  }
  // 顶部内容
  .top{
    width: 100%;
    height: 90rpx;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    .left{
      width: calc(100% - 150rpx);
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      .image{
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        margin-right: 15rpx;
      }
      .name{
        max-width: calc(100% - (70rpx + 15rpx + 80rpx + 15rpx));
        font-size: 30rpx;
        font-weight: bold;
        color: #FFFFFF;
      }
      .change-btn{
        width: 80rpx;
        height: 40rpx;
        text-align: center;
        font-size: 24rpx;
        border-radius: 40rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        background-color: #409eff;
        color: #fff;
        margin-left: 15rpx;
      }
    }
    .right{
      width: 140rpx;
      height: 46rpx;
      line-height: 44rpx;
      border-radius: 45rpx;
      text-align: center;
      font-size: 26rpx;
      border: 2rpx solid #ffffff;
      color: #FFFFFF;
    }
  }
  // 买单金额
  .money{
    position: relative;
    padding: 15rpx;
    .top-bg-line{
      width: 100%;
      background-color: #1256ad;
      height: 20rpx;
      border-radius: 50rpx;
      position: absolute;
      left: 0;
      top: 0;
    }
    .money-box{
      background: #FFFFFF;
      position: relative;
      width: 100%;
      top: -5rpx;
      border-radius: 15rpx;
      padding: 20rpx;
      box-shadow: 0px 3px 5px 0px #ececec;
      .title{
        height: 60rpx;
        line-height: 60rpx;
        font-size: 26rpx;
        font-weight: bold;
      }
      .input-box{
        height: 70rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-end;
        font-size: 50rpx;
        font-weight: bold;
        margin: 20rpx 0 30rpx 0;
        .unit{
          margin-right: 15rpx;
        }
        .money-input{
          height: 70rpx;
        }
      }
      .info-box{
        width: 100%;
        height: 60rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        .info-title{
          font-size: 30rpx;
          font-weight: bold;
        }
        .info-value{
          font-size: 30rpx;
        }
      }
    }
  }
  // 确认支付
  .pay-btn{
    width: calc(100% - (20rpx * 2));
    background: #1777ff;
    color: #FFFFFF;
    border-radius: 15rpx;
    font-size: 30rpx;
    text-align: center;
    height: 70rpx;
    line-height: 70rpx;
    position: absolute;
    left: 20rpx;
    bottom: 150rpx;
  }
  .not-btn{
    background-color: #909399;
    color: #fff;
  }
}
</style>
