<template>
	<u-popup :show="showPop" :round="20" @close="showPop = false" closeable>
		<view class="son-wrap">
			<view class="middle" v-show="orderList.length>0">
				<view class="middle-wrap">
					<view  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="middle-money">
						<view> 实际支付 </view>
						<view>
							<text style="font-size:28rpx;">¥</text>
							{{ pdOrderMoney }} 
						</view>
					</view>
					<view class="middle-image">
						<!-- #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 v-show="errorMessage1||errorMessage2">
				错误1：{{errorMessage1}}
				错误2：{{errorMessage2}}
			</view>
			<view class="bottom">
				<view class="bottom-left">
					<text>实付款 </text>
					<text v-show="pdOrderMoney"> 
						<text style="font-size: 28rpx;">¥</text>
						{{pdOrderMoney}}
					</text>
				</view>
				<view class="bottom-right">
					<u-icon name="chat" size="40" @click="makePhone()"></u-icon>
					<text @click="goPay()" :style="{ background: background }">去支付</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
  props:['orderId'],
  data() {
    return {
      showPop:false,//控制弹窗显示隐藏
      orderList:[], //订单列表
      pdOrderMoney: '', //实际总价
      totalMoney: '', //原价总价
      errorMessage1: '', //错误信息1，接口成功返回的错误信息
      errorMessage2: '', //错误信息2，接口失败返回的错误信息
      payType: '', //支付类型
      timeStamp: '', //微信支付参数
      nonceStr: '',//微信支付参数
      package: '',//微信支付参数
      signType: '',//微信支付参数
      paySign: '',//微信支付参数
      orderInfo: '', //支付宝订单号
      background: '', //去支付的背景颜色
      openid: '', //用户Id
      afterBuyUrl:'/pages/my/order/electronicTicket/electronicTicket', //支付成功后地址跳转,默认单票跳详情
      albumOrderdetail:'',//是否跳影集订单详情
    }
  },
  created() {
    //#ifdef MP-WEIXIN
    this.payType = 42
    //#endif

    //#ifdef MP-ALIPAY
    this.payType = 33
    //#endif
    this.openid = uni.getStorageSync('openid') || ''
    this.initDetail()
  },
  methods: {
    //---拨打电话
    makePhone() {
		  uni.makePhoneCall({
		    phoneNumber:'400-072-0368'
		  })
    },
    //---初始化产品信息，以及获取支付需要的参数
    initDetail() {
      let data = {
        orderId: this.orderId, //订单Id
        userId: this.openid, //用户Id
        payType: this.payType //支付类型
      }
      uni.showLoading({
        mask:true
      })
      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.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
            })
          }
          this.errorMessage1 = res.data.errorMessage
          this.totalMoney = res.data.totalMoney
          this.orderList = res.data.orderList||[]
          if (this.orderList.length==0||res.data.orderPageShowFlag==0) {
            this.orderList=[]
            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'
          })
          this.errorMessage2=res.message
        }
      })
    },
    //----去支付
    goPay() {
      if (this.errorMessage1) {
        uni.showToast({
          title: this.errorMessage1,
          icon: 'none'
        })
        return
      }
      this.background = '#E6E6E6'
      setTimeout(() => {
        this.background = '#3688FF'
      }, 1000)
      // #ifdef MP-WEIXIN
      if(!this.timeStamp||!this.nonceStr||!this.package||!this.signType||!this.paySign){
        uni.showToast({
				  title: '缺少支付参数',
				  icon: 'none'
        })
        return
      }
      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
          })
        },
        fail: function(err) {
          uni.showToast({
            title: err.errMsg,
            icon: 'none'
          })
        }
      })
      //#endif

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

<style scoped>
.son-wrap {
	height:65vh;
}
.middle {
	padding: 30rpx 24rpx 0 24rpx;
}
.middle-wrap {
	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;
}
.middle-money {
	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;
}
.middle-money view:nth-child(2) {
	font-size: 24rpx;
	color: #666666;
}
.middle-money view:nth-child(2) {
	font-size: 36rpx;
	color: #f9690e;
	font-weight: bold;
}
.middle-image {
	margin-top: 50rpx;
	display: flex;
	align-items: center;
}
.middle-image > image:first-child {
	margin: 0 20rpx 0 10rpx;
}
.middle-image > view {
	flex: 1;
}
.bottom {
	position: fixed;
	bottom: 0;
	height: 100rpx;
	background: #ffffff;
	border-top: 1px solid #e5e5e5;
	width: 100%;
	display: flex;
	align-items: center;
}
.bottom-left {
	border-right: 1px solid #cccccc;
	padding-left: 40rpx;
	width: 40%;
}
.bottom-left text:nth-child(2) {
	font-size: 40rpx;
	color: #f9690e;
	margin-left: 10rpx;
	font-weight: bold;
}
.bottom-right {
	padding-left:30rpx;
	display: flex;
	width: 60%;
	padding-right:30rpx;
	align-items: center;
}
.bottom-right text:nth-child(2) {
	flex: 1;
	height: 70rpx;
	display: inline-block;
	text-align: center;
	line-height: 70rpx;
	background: #3688FF;
	color: #ffffff;
	margin-left: 30rpx;
	border-radius: 20rpx;
	font-size: 32rpx;
	font-weight: bold;
}
</style>