<template>
	<view :style="viewColor">
    <!--具体内容-->
		<view class='content-box'>
      <!--顶部内容-->
      <view class="top">
        <view class="left">
          <image class="image" :src="mer_info.mer_avatar || '/static/images/f.png'"></image>
          <view class="name" @click="merShowPopup">{{ mer_info.mer_name || '请选择门店' }}</view>
          <view class="change-btn" @click="merShowPopup" v-if="mer_info.mer_id > 0 && default_mer_id <= 0">切换</view>
        </view>
        <view class="right" @click="goMenuPage('/pages/users/online_payment/payment/record')">消费记录</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" v-model.number="pay_info.money" type='number' step="0.01" placeholder="0.00" />
          </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="mer_info.mer_id > 0 && pay_info.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>
    <!--店铺选择-->
    <uni-popup ref="selectedMer" type="center">
      <view class="mer-content">
        <view class="search-content">
          <input class="money-input" v-model="mer_search.search_text" type='text' placeholder="商户名称/商户地址" />
          <view class="search-btn" @click="getMerList">搜索</view>
          <view class="close-btn" @click="merClosePopup">取消</view>
        </view>
        <view class="mer-list">
          <view class="mer-box" v-for="(item,index) in mer_list" :key="index">
            <view class="left">
              <image class="image" :src="item.mer_avatar || '/static/images/f.png'"></image>
              <view class="mer-info">
                <view class="mer-name">{{ item.mer_name }}</view>
                <view class="mer-address">{{ item.mer_address }}</view>
              </view>
            </view>
            <view class="selected-btn" @click="selectedMer(item)">选中</view>
          </view>
        </view>
      </view>
    </uni-popup>


	</view>
</template>

<script>

import {searchMer,onlinePayment} from '@/api/exchange.js';
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import emptyPage from '@/components/emptyPage.vue';
import spread from "@/libs/spread";
import {getUserInfo} from "@/api/user";

const app = getApp();
export default {
  components: {
    authorize,
    emptyPage,
  },
  data() {
    return {
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      // 商户相关
      mer_info:{},
      mer_list: {},
      mer_search: {
        mer_id: 0,
        search_text: '',
      },
      // 买单相关
      pay_info: {
        money: 0.00,// 买单金额
        pay_type: 'weixin',
        // #ifdef H5
        return_url: 'http://' + window.location.host + '/pages/users/order_list/index',
        // #endif
      },
      default_mer_id: 0,
      //支付方式
      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,

    };
  },
  computed: {
    ...mapGetters(['isLogin', 'userInfo', 'viewColor'])
  },
  onLoad(options) {
    // 二维码参数接收
    if(options.scene){
      // console.log("接收参数 - 未转义",options.scene)
      var scene = this.$util.getUrlParams(decodeURIComponent(options.scene));
      // console.log("接收参数 - 转义后",scene)
      this.default_mer_id = scene.mer_id || 0;
      this.mer_search.mer_id = scene.mer_id || 0;
    }
    // 判断：是否登录
    if (!this.isLogin) {
      // 未登录  授权登录
      this.isAuto = true;
      this.isShowAuth = true
    }else{
      // 已登录  获取信息
      this.init();
    }
    // 关系处理
    if(options.spread) spread(options.spread, this.isLogin)
  },
  onReachBottom: function () {},
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authColse(e) {
      this.isShowAuth = e
    },
    // 授权成功 获取用户信息
    init () {
      let _this = this;
      // 门店选择初始化
      let merId = _this.mer_info.mer_id || 0;
      if(merId <= 0) _this.merShowPopup();
      // 获取用户信息
      getUserInfo().then(res => {
        _this.now_money = res.data.now_money
      });
    },
    // 门店选择 - 显示弹框
    merShowPopup(){
      this.$refs.selectedMer.open('center');
      if(Object.keys(this.mer_list).length <= 0) this.getMerList();
    },
    // 门店选择 - 隐藏弹框
    merClosePopup(){
      this.$refs.selectedMer.close();
    },
    // 门店选择 - 获取门店列表
    getMerList(){
      let _this = this;
      searchMer(this.mer_search)
          .then(res => {
            _this.mer_list = res.data || {};
            // 判断：是否存在默认商户  存在则使用默认商户，且不可变更
            if(Number(_this.default_mer_id) > 0 && Object.values(_this.mer_list).length === 1){
              this.selectedMer(_this.mer_list[0]);
            }
          })
          .catch(err => {
            this.$util.Tips({
              title: err
            });
          });
    },
    // 门店选择 - 门店选中
    selectedMer(item){
      this.mer_info = item;
      this.merClosePopup();
    },
    // 修改支付方式
    changePayType(e){
      this.pay_info.pay_type = e.detail.value || e.target.value;
    },
    // 确认付款
    confirmPayment(){
      let _this = this;
      let payInfo = Object.assign({},_this.pay_info);
      payInfo.mer_id = _this.mer_info.mer_id;
      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
      });
      onlinePayment(payInfo)
          .then(res => {
            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'
                });
            }
          })
          .catch(err => {
            uni.hideLoading();
            this.$util.Tips({
              title: err
            });
          });
    },
    // 跳转
    goMenuPage(url) {
      console.log(url)
      if (this.isLogin) {
        uni.navigateTo({
          url
        })
      } else {
        this.openAuto()
      }
    },

  },
  // #ifdef MP
  // 分享给好友
  onShareAppMessage () {
    let pages = getCurrentPages();
    let page = pages[pages.length - 1]
    let shareData = {
      title: '在线买单',
      path: page.$page.fullPath || '/' + page.route,
    };
    // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
    if (this.isLogin) shareData.path = shareData.path + '?spread=' + this.uid;
    // 返回最终的分享配置信息
    return shareData
  },
  // 分享到朋友圈
  onShareTimeline() {
    let shareData = {
      title: '在线买单',
      query: {},
    };
    // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
    if (this.isLogin) shareData.query.spread = this.uid;
    // 返回最终的分享配置信息
    return shareData
  },
  // #endif
}
</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;
      }
    }
  }
  // 支付方式
  .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;
  }
}
.mer-content{
  background: #FFFFFF;
  width: 90vw!important;
  height: 90vh!important;
  padding: 15rpx;
  border-radius: 20rpx;

  .search-content{
    width: 100%;
    height: 60rpx;
    line-height: 60rpx;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    .money-input{
      width: calc(100% - (100rpx * 2)) !important;
      height: 60rpx;
      line-height: 60rpx;
    }
    .search-btn{
      width: 100rpx;
      text-align: center;
      font-size: 28rpx;
      background-color: #409eff;
      color: #fff;
    }
    .close-btn{
      width: 100rpx;
      text-align: center;
      font-size: 28rpx;
      background-color: #f56c6c;
      color: #fff;
    }
  }
  .mer-list{
    overflow: auto;
    height: calc(100% - 60rpx);
    .mer-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: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        .image{
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
          margin-right: 15rpx;
        }
        .mer-info{
          width: calc(100% - 90rpx);
          .mer-name{
            height: 50rpx;
            line-height: 50rpx;
            font-size: 30rpx;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .mer-address{
            height: 40rpx;
            line-height: 40rpx;
            font-size: 26rpx;
            color: #cccccc;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .selected-btn{
        width: 100rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        font-size: 28rpx;
        background-color: #67c23a;
        color: #fff;
        border-radius: 50rpx;
      }
    }
    .mer-box:not(:last-child){
      border: 2rpx solid #f6f6f6;
    }
  }
}
</style>
