<template>
	<view v-show="bodyShow">
		<view class="middle">
			<view class="main">
				<view v-if="orderList.length>0" v-for="item of orderList" :key="item.id" class="product">
					<view>
						<text> {{ item.merchantName }}（{{ item.productName }}） </text>

						<text>
							<text style="font-size:24rpx;">¥</text>{{ item.unitPrice }} <text>x</text> {{ item.orderNum }}
							<text style="margin-top:10rpx;font-size:22rpx;display:block;color:#f45803;" v-if="item.depositReceived"> 押金：{{ item.depositReceived }} </text>
						</text>
					</view>
					<view class="coupon" v-if="item.pdDiscountMoney">
						<text> 券 </text> <text> <text style="font-size:24rpx;">-¥</text>{{ item.pdDiscountMoney }} </text>
					</view>
				</view>
				<view class="mainP3">
					<text> 实际支付 </text>
					<text>
						<!--<i>
						¥{{totalMoney}}
					</i>-->
						<text> <text style="font-size:28rpx;">¥</text>{{ pdOrderMoney }} </text>
					</text>
				</view>
				<view class="mainview">
					<!-- #ifdef MP-WEIXIN -->
					<image src="@/static/img/orderPayment/weixin.png" style="width:70rpx;height:62rpx;" /> <view> 微信支付 </view>
					<!-- #endif -->

					<!-- #ifdef MP-ALIPAY -->
					<image src="@/static/img/orderPayment/alipayLogo.png" style="width:70rpx;height:62rpx;" /> <view> 支付宝支付 </view>
					<!-- #endif -->
					<image src="@/static/img/orderPayment/input.png" style="width:32rpx;height: 32rpx;" />
				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="bottomFirst">
				<text> 实付款 </text>

				<text> <text>¥</text>{{ pdOrderMoney }} </text>
			</view>

			<view class="bottomLast">
				<text href="tel:400-072-0368"> <!-- <img src="@/assets/img/combination/kefu11.png" style="width: 0.31rpx;" /> --> </text>
				<text @click="goPay()" :style="{ background: background }">去支付</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      orderList:[], //订单列表
      pdOrderMoney: '', //实际总价
      totalMoney: '', //原价总价
      errorMessage: '', //错误信息
      bodyShow: false, //控制初始化数据成功显示
      payType: '', //支付类型
      timeStamp: '', //支付参数
      nonceStr: '',
      package: '',
      signType: '',
      paySign: '',
      orderInfo: '', //支付宝订单号
      background: '', //去支付的背景颜色
      orderId: '', //订单Id
      openid: '', //用户Id
      afterBuyUrl:'/pages/my/order/electronicTicket/electronicTicket', //支付成功后地址跳转,默认单票跳详情
      ifyukuaiCode: '' ,//是否是渝快码跳入，渝快码跳入需要在H5端另外走流程
      albumOrderdetail:'',//是否跳影集订单详情
    }
  },
  onLoad(option) {
    //#ifdef MP-WEIXIN
    this.payType = 42
    //#endif

    //#ifdef MP-ALIPAY
    this.payType = 33
    //#endif
    this.orderId=this.$commonjs.getKey(option,'orderId')
    this.ifyukuaiCode = option.ifyukuaiCode||''
    this.albumOrderdetail=option.albumOrderdetail||''
    this.openid = uni.getStorageSync('openid') || ''
    if (this.openid) {
      this.initDetail()
    } else {
      this.login() //极个别手机从公众号跳转回来没有openid,再次获取openid
    }
  },
  methods: {
    login() {
      //---登录
      uni.getProvider({
        service: 'oauth',
        success:proRes=>{
          uni.login({
            provider: proRes.provider[0],
            success: res=>{
              if (res.code) {
                let source = ''
                if (proRes.provider[0] == 'weixin') {
                  source = 3
                } else if (proRes.provider[0] == 'alipay') {
                  source = 4
                }
                let data = {
                  code: res.code,
                  source, //微信小程序3，支付宝小程序4
                  appid:uni.getStorageSync('appid')||''
                }
                if(uni.getStorageSync('enterOptions').query){
								  data.companyId=uni.getStorageSync('enterOptions').query.companyId||''
                }
                this.$request('wechat/wx/getUserInfoByCode', data).then(res => {
                  if (res.code == '00') {
                    this.openid = res.data.openid
                    uni.setStorageSync('openid', this.openid)
                    this.initDetail()
                  } else {
                    uni.showToast({
                      title: res.message,
                      icon: 'none'
                    })
                  }
                }).catch(err => {
                  uni.showToast({
                    title: '登录失败',
                    icon: 'none'
                  })
                })
              }
            }
          })
        }
      })
    },
    initDetail() {
      //---初始化产品信息，以及获取支付需要的参数
      let data = {
        orderId: this.orderId, //订单Id
        userId: this.openid, //用户Id
        payType: this.payType //支付类型
      }
      this.$request('orderc/order/findOrderInfo', data).then(res => {
        if (res.code == '00') {
          if(this.albumOrderdetail==1){
            //主要跳转影集订单详情，暂时是前端写死
            this.afterBuyUrl='/pages/album/albumOrderdetail/albumOrderdetail'
          }else{
            if(res.data.orderType=='10'){
						  //组合票和联票跳订单列表
						  this.afterBuyUrl='/pages/my/order/orderList/orderList'
            }
          }
          
          this.bodyShow = true
          //支付参数开始
          this.timeStamp = res.data.timestamp
          this.nonceStr = res.data.noncestr
          this.package = res.data.package
          this.signType = res.data.signType
          this.paySign = res.data.sign
          //支付宝入参
          this.orderInfo = res.data.payInfo || ''
          //支付参数结束
          this.pdOrderMoney = res.data.pdOrderMoney
          if (this.pdOrderMoney == 0 && res.data.subOrderType == -1){
            uni.navigateTo({
              url: '/pages/payment/paySuccess/paySuccess?orderId=' + this.orderId+'&afterBuyUrl=' + this.afterBuyUrl + '&ifyukuaiCode=' + this.ifyukuaiCode
            })
          }
          this.errorMessage = res.data.errorMessage
          this.totalMoney = res.data.totalMoney
          this.orderList = res.data.orderList||[]
          if (this.orderList.length==0) {
            this.orderList.push({
              merchantName:res.data.merchantName,
              productName:res.data.productName,
              unitPrice:res.data.unitPrice,
              orderNum:res.data.orderNum,
              depositReceived:res.data.depositReceived,
              pdDiscountMoney:res.data.pdDiscountMoney,
              endPlayDate:res.data.endPlayDate
            })
          }
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      })
    },
    goPay() {
      //-------------------------------------------------------去支付
      if (this.errorMessage) {
        uni.showToast({
          title: this.errorMessage,
          icon: 'none'
        })
        return
      }
      this.background = '#E6E6E6'
      setTimeout(() => {
        this.background = 'f9690e'
      }, 1000)

      // #ifdef MP-WEIXIN
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: this.timeStamp,
        nonceStr: this.nonceStr,
        package: this.package,
        signType: this.signType,
        paySign: this.paySign,
        success:res=>{
          uni.navigateTo({
            url: '/pages/payment/paySuccess/paySuccess?orderId=' + this.orderId+'&afterBuyUrl=' + this.afterBuyUrl + '&ifyukuaiCode=' + this.ifyukuaiCode
          })
        },
        fail: function(err) {
          uni.showToast({
            title: err.errMsg,
            icon: 'none'
          })
        }
      })
      //#endif

      // #ifdef MP-ALIPAY
      uni.requestPayment({
        provider: 'alipay', // 服务提供商 支付宝支付: alipay   微信支付: wxpay
        orderInfo: this.orderInfo, // 支付宝订单号
        success: res=> {
          uni.navigateTo({
            url: '/pages/payment/paySuccess/paySuccess?orderId=' + this.orderId+'&afterBuyUrl=' + this.afterBuyUrl + '&ifyukuaiCode=' + this.ifyukuaiCode
          })
        },
        fail: function(err) {
          uni.showToast({
            title: err.errMsg,
            icon: 'none'
          })
        }
      })
      // #endif
    }
  }
}
</script>

<style>
.bigBox {
	height: 100%;
	background: #fafafc;
}
.middle {
	padding: 30rpx 24rpx 0 24rpx;
}
.main {
	padding: 10rpx 24rpx 20rpx 24rpx;
	background: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 0 15rpx #e6e6e8;
}
.product {
	border-bottom: 1px solid #e5e5e5;
	padding: 25rpx 0;
}
.product view {
	color: #000000;
	padding-left: 10rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
.product view text:first-child {
	flex: 1;
}
.product view text:nth-child(2) {
	color: #666666;
	font-size: 28rpx;
	text-align: right;
}
.product view.coupon {
	color: #f9690e;
	margin-top: 10rpx;
}
.product view.coupon text {
	font-size: 30rpx;
}
.mainP3 {
	height: 120rpx;
	color: #000000;
	border-bottom: 1px solid #e5e5e5;
	padding: 25rpx 0 25rpx 10rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	justify-content: space-between;
}
.mainP3 text:nth-child(2) {
	font-size: 24rpx;
	color: #666666;
}
.mainP3 text:nth-child(2) text:nth-child(1) {
	font-size: 36rpx;
	color: #f9690e;
	margin-left: 20rpx;
	font-weight: bold;
}
.mainview {
	margin-top: 50rpx;
	display: flex;
	align-items: center;
}
.mainview > image:first-child {
	margin: 0 20rpx 0 10rpx;
}
.mainview > view {
	flex: 1;
}
.bottom {
	position: fixed;
	bottom: 0;
	height: 100rpx;
	background: #ffffff;
	border-top: 1px solid #e5e5e5;
	width: 100%;
	display: flex;
	align-items: center;
}
.bottomFirst {
	border-right: 1px solid #cccccc;
	padding-left: 40rpx;
	width: 40%;
	box-sizing: border-box;
}
.bottomFirst text:nth-child(2) {
	font-size: 40rpx;
	color: #f9690e;
	margin-left: 10rpx;
	font-weight: bold;
}
.bottomFirst text:nth-child(2) text {
	font-size: 28rpx;
}
.bottomLast {
	padding-left: 20rpx;
	display: flex;
	width: 60%;
	padding-right: 20rpx;
	box-sizing: border-box;
	align-items: center;
}
.bottomLast text:first-child {
	display: block;
	text-align: center;
	width: 60rpx;
}
.bottomLast text:first-child text {
	margin-top: 10rpx;
	display: inline-block;
	font-size: 24rpx;
	color: #666666;
}
.bottomLast text:nth-child(2) {
	flex: 1;
	height: 70rpx;
	display: inline-block;
	text-align: center;
	line-height: 70rpx;
	background: #f9690e;
	color: #ffffff;
	margin-left: 30rpx;
	border-radius: 20rpx;
	font-size: 32rpx;
}
</style>
