<template>
  <view :style="viewColor">
    <!--具体内容-->
    <view class='content-box'>
      <!--买单金额-->
      <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="payment_current.price | toFixedTwo" readonly disabled />
          </view>
        </view>
      </view>
      <!--赠送内容-->
      <view class="give">
        <view class="box-title">赠送额度</view>
        <view class="give-content">
          <view class="give-box">赠送冠名品牌额度：<view class="give-quota">{{ payment_current.title_quota | toFixedTwo}}</view></view>
          <view class="give-box">赠送其他品牌额度：<view class="give-quota">{{ payment_current.other_quota | toFixedTwo}}</view></view>
          <view class="give-box change-btn" v-if="Object.values(payment_list).length > 1" @click="showChangePopup">切换支付项</view>
        </view>
      </view>
      <!--支付方式-->
      <view class="pay-type">
        <view class="box-title">支付方式</view>
        <view class="box-content">
          <radio-group name="pay_type" @change="changePayType">
            <view class="pay-label" v-for="(item,index) in pay_list" :key="index" v-if="item.payStatus==1">
              <label>
                <view class="pay-item">
                  <view class="left">
                    <view :class="['iconfont','animated',item.icon]"></view>
                    <view class="pay-item-info">
                      <view class="pay-name">{{ item.name }}</view>
                      <view class='tip'>
                        {{item.title}}
                        <block v-if="item.value == 'balance'">
                          {{now_money}}
                        </block>
                      </view>
                    </view>
                  </view>
                  <view class="right">
                    <radio :value="item.value" :checked="item.value == pay_info.pay_type ? true : false" />
                  </view>
                </view>
              </label>
            </view>
          </radio-group>
        </view>
      </view>
      <!--支付按钮-->
      <view class="pay-btn" v-if="agent_id > 0" @click="confirmPayment">确认支付</view>
      <view class="pay-btn not-btn" v-else>确认支付</view>
    </view>
    <!--授权登录-->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
    <!--支付项目选择-->
    <uni-popup ref="paymentListPopup" type="bottom">
      <view class="payment-list-content">
        <view class="list">
          <view class="box" v-for="(item,index) in payment_list" :key="index">
            <view class="left">
              <view class="price">¥{{ item.price | toFixedTwo}}</view>
              <view class="quota-box">赠送冠名品牌额度：<view class="quota-num">{{ item.title_quota | toFixedTwo }}</view></view>
              <view class="quota-box">赠送其他品牌额度：<view class="quota-num">{{ item.other_quota | toFixedTwo }}</view></view>
            </view>
            <view class="selected-btn" @click="changePayment(index)">选中</view>
          </view>
        </view>
      </view>
    </uni-popup>



  </view>
</template>

<script>
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import emptyPage from '@/components/emptyPage.vue';
import {getUserInfo} from "@/api/user";
import {deliveryPaymentList, deliveryCreateOrder} from "@/api/agent";

const app = getApp();
export default {
  components: {
    authorize,
    emptyPage,
  },
  data() {
    return {
      agent_id: '',
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      //支付相关
      pay_list: [
        {
          "name": "微信支付",
          "icon": "icon-weixin2",
          value: 'weixin',
          title: '微信快捷支付',
          payStatus: 1,
        },
        {
          name: "支付宝支付",
          icon: "icon-icon34",
          // #ifdef H5 || APP-PLUS
          value: 'alipay',
          // #endif
          // #ifdef MP
          value: 'alipayQr',
          // #endif
          title: '支付宝支付',
          payStatus: this.$store.getters.globalData.alipay_open
        },
        {
          "name": "余额支付",
          "icon": "icon-icon-test",
          value: 'balance',
          title: '可用余额:',
          payStatus: this.$store.getters.globalData.yue_pay_status,
        },
        {
          "name": "线下支付",
          "icon": "icon-yinhangqia",
          value: 'offline',
          title: '线下支付',
          payStatus: 2,
        },
      ],
      now_money: 0,
      pay_info: {
        money: 0.00,// 买单金额
        pay_type: 'weixin',
        // #ifdef H5
        return_url: 'http://' + window.location.host + '/pages/users/order_list/index',
        // #endif
      },
      // 缴费信息
      payment_list: {},
      payment_index: '',
      payment_current: {},

    };
  },
  computed: {
    ...mapGetters(['isLogin', 'userInfo', 'viewColor'])
  },
  filters: {
    toFixedTwo(value) {
      value = value || 0;
      value = Number(value);

      return value.toFixed(2);
    }
  },
  onLoad(options) {
    this.agent_id = options.agent_id || 0;
    // 判断：agent_id <= 0 抛出错误，返回代理中心
    if(Number(this.agent_id) <= 0){
      this.$util.Tips({
        title: '非法访问，信息不存在！',
      },{tab:5,url:`/pages/agent/centerV2?agent_id=${this.agent_id}`});
      return false;
    }
    // 判断：是否登录
    if (!this.isLogin) {
      // 未登录  授权登录
      this.isAuto = true;
      this.isShowAuth = true
    }else{
      // 已登录  获取信息
      this.init();
    }
  },
  onReachBottom: function () {},
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authClose(e) {
      this.isShowAuth = e
    },
    // 授权成功 获取用户信息
    init () {
      let _this = this;
      // 获取用户信息
      getUserInfo().then(res => {
        _this.now_money = res.data.now_money
      });
      // 获取用户缴费列表
      this.getPaymentList();
    },
    // 获取缴费项列表
    getPaymentList(){
      let _this = this;
      deliveryPaymentList().then(res => {
        let data = res.data || {};
        _this.payment_list = data || {};
        _this.payment_index = 0;
        _this.payment_current = data[_this.payment_index] || {};
        // 判断：如果不存在任何缴费项目 报错并且返回
        if(Object.values(data).length <= 0){
          this.$util.Tips({
            title: '不存在任何支付项，请联系管理员！',
          },{tab:5,url:`/pages/agent/centerV2?agent_id=${_this.agent_id}`});
          return false;
        }
      });
    },
    // 点击显示切换支付项弹框
    showChangePopup(){
      this.$refs.paymentListPopup.open('bottom');
    },
    // 点击切换支付项
    changePayment(index){
      this.payment_index = index;
      this.$set(this, 'payment_current', this.payment_list[this.payment_index] || {});
      this.$refs.paymentListPopup.close();
    },
    // 修改支付方式
    changePayType(e){
      this.pay_info.pay_type = e.detail.value || e.target.value;
    },
    // 确认付款
    confirmPayment(){
      let _this = this;
      let paymentCurrentInfo = Object.assign({}, _this.payment_current);
      let payInfo = Object.assign({},_this.pay_info);
      payInfo.agent_id = _this.agent_id;
      payInfo.money = Number(paymentCurrentInfo.price).toFixed(2);
      payInfo.title_quota = Number(paymentCurrentInfo.title_quota).toFixed(2);
      payInfo.other_quota = Number(paymentCurrentInfo.other_quota).toFixed(2);
      // 发起支付
      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});
      deliveryCreateOrder(payInfo).then(res => {
        if (res.status == 200) {
          let backUrl = `/pages/agent/delivery/payment_record?agent_id=${_this.agent_id}`;
          let backTab = 5;
          if(Number(paymentCurrentInfo.price) > 0){
            let status = res.data.status,
                orderId = res.data.result.order_id,
                callback_key = res.data.result.pay_key,
                jsConfig = res.data.result.config;
            // let goPages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=' + res.message;
            let goPages = backUrl;
            switch (status) {
              case 'ORDER_EXIST':
              case 'EXTEND_ORDER':
              case 'PAY_ERROR':
              case 'error':
                return _this.$util.Tips({
                  title: res.message
                }, {
                  tab: backTab,
                  url: goPages
                });
                break;
              case 'success':
                return _this.$util.Tips({
                  title: res.message,
                  icon: 'success'
                }, {
                  tab: backTab,
                  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: backTab,
                    url: goPages
                  });
                }).catch(res => {
                  if (res.errMsg == 'chooseWXPay:cancel') return _this.$util.Tips({
                    title: '取消支付'
                  }, {
                    tab: backTab,
                    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: backTab,
                      url: backUrl
                    });
                  },
                  fail: (e) => {
                    // let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
                    return _this.$util.Tips({
                      title: '取消支付',
                    }, {
                      tab: backTab,
                      url: backUrl
                    });
                  },
                  complete: () => {
                    // let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
                    return _this.$util.Tips({
                      title: '',
                    }, {
                      tab: backTab,
                      url: backUrl
                    });
                  },
                });
                // #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: backTab,
                      url: goPages
                    });
                  },
                  fail: function(e) {
                    // let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付'
                    return _this.$util.Tips({
                      title: '取消支付'
                    }, {
                      tab: backTab,
                      // url: pages + '&status=0'
                      url: backUrl
                    });
                  },
                })
                break;
                // #endif
              case "balance":
                //余额
                return _this.$util.Tips({
                  title: res.msg
                }, {
                  tab: backTab,
                  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(backUrl)
                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: backTab,
                      url: goPages
                    });
                  },
                  fail: (e) => {
                    // let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=支付失败'
                    return _this.$util.Tips({
                      title: '支付失败'
                    }, {
                      tab: backTab,
                      url: backUrl
                    });
                  },
                  complete: () => {
                    uni.hideLoading();
                    // let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付'
                    return _this.$util.Tips({
                      title: ''
                    }, {
                      tab: backTab,
                      url: backUrl
                    });
                  },
                });
                break;
                // #endif
              default:
                // let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付'
                return _this.$util.Tips({
                  title: '取消支付'
                }, {
                  tab: backTab,
                  // url: pages + '&status=0'
                  url: backUrl
                });
            }
          }else{
            _this.$util.Tips({
              title: '操作成功！',
            },{
              tab: backTab,
              url: backUrl
            });
          }
        }
      }).catch(err => {
        uni.hideLoading();
        this.$util.Tips({title: err});
      });
    },


  },
}
</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;
  }
  // 买单金额
  .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;
      }
    }
  }
  // 赠送额度
  .give{
    .give-content{
      width: 100%;
      display: inline-flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      .give-box{
        display: inline-flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
        width: 100%;
        height: 50rpx;
        line-height: 50rpx;
        color: #C3C3C3;
        font-size: 30rpx;
        .give-quota{
          color: #f70e05;
        }
      }
      .change-btn{
        color: #1b79ff;
      }
    }
  }
  // 支付方式
  .pay-type{

    .box-content{
      .pay-label:not(:last-child){
        margin-bottom: 20rpx;
      }
      .pay-item{
        height: 120rpx;
        padding: 20rpx;
        width: 100%;
        border: 2rpx solid #d9dce4;
        border-radius: 15rpx;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-around;
        .left{
          width: calc(100% - 80rpx);
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;
          .animated{
            width: 44rpx;
            height: 44rpx;
            border-radius: 50%;
            text-align: center;
            line-height: 44rpx;
            background-color: #fe960f;
            color: #fff;
            font-size: 30rpx;
            margin-right: 15rpx;
          }
          .icon-weixin2 {
            background-color: #41b035;
          }
          .icon-icon34 {
            background-color: #4295D5;
          }
          .pay-item-info{
            .pay-name{
              text-align: left;
              border-right: 1px solid #eee;
              justify-content: left;
            }
            .tip{
              text-align: left;
              font-size: 26rpx;
              color: #aaa;
            }
          }
        }
        .right{
          width: 80rpx;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-end;
        }
      }
    }
  }
  // 确认支付
  .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;
  }
}

.payment-list-content{
  background: #FFFFFF;
  width: 100vw!important;
  height: 80vh!important;
  padding: 15rpx;
  border-top-right-radius: 20rpx;
  border-top-left-radius: 20rpx;

  .list{
    overflow: auto;
    height: calc(100% - 60rpx);
    .box{
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 0;
      width: 100%;
      .left{
        width: calc(100% - 110rpx);
        display: inline-flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        .price{
          width: 100%;
          font-size: 36rpx;
          height: 70rpx;
          line-height: 70rpx;
          color: #fb0000;
        }
        .quota-box{
          width: 100%;
          font-size: 28rpx;
          text-align: left;
          height: 40rpx;
          line-height: 40rpx;
          display: inline-flex;
          flex-direction: row;
          align-items: center;
          flex-wrap: nowrap;
          justify-content: flex-start;
          color: #818181;
          .quota-num{
            color: #f70e05;
          }
        }
      }
      .selected-btn{
        width: 100rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        font-size: 26rpx;
        background-color: #67c23a;
        color: #fff;
        border-radius: 50rpx;
      }
    }
    .box:not(:last-child){
      border-bottom: 2rpx solid #f6f6f6;
    }
  }
}
</style>
