<template>
	<view class="bigBox">
		<view class="top">
			<view class="topName">
				<text class="topIcon">
					<text class="iconfont icon-tubiaolunkuo-"></text>
				</text>
				<text>{{name}}</text>
			</view>
			<view class="topMoney">
				<text class="moneyText">金额</text>
				<view class="moneyNumber">
					<text class="iconfont icon-fl-renminbi" style="font-size: 56rpx;"></text>
					<text>{{buyMoney}}</text>
					<text></text>
				</view>
			</view>
			<!-- -----------------------------有可用优惠券,并且未选中----------------------------------------------------- -->
			<view class="topCoupon" v-if="couponData.masterSlaveCouponList&&couponData.masterSlaveCouponList.length>0&&chooseCouponObj==''" @click="showCoupon()">
			    <view class="couponLeft">
					<text>券</text>
					<text>{{couponData.masterSlaveCouponList[0].couponName}}</text>
				</view>
				
				<view class="couponRight">
					<text>未选优惠券</text>
					<text class="iconfont icon-you" style="font-size:32rpx;"></text>
				</view>
			</view>
			<!-- -----------------------------有可用优惠券----------------------------------------------------- -->
			<view class="topCoupon" v-if="chooseCouponObj!=''&&savedMoney>0" @click="showCoupon()">
				<view class="couponLeft">
					<text>券</text>
					<text>{{chooseCouponObj.couponName}}</text>
				</view>
				
				<view class="couponRight">
					<text>-</text>
					<text>{{parseFloat(savedMoney.toFixed(2))}}</text>
					<text class="iconfont icon-you" style="font-size:32rpx;"></text>
				</view>
			</view>
			<!-- -----------------------------------------------可用优惠券条件--------------------------------------- -->
			<view class="topCoupon" v-if="ableConpon!=''" @click="showCoupon()">
				<view class="couponLeft">
					<text>券</text>
					<text>{{ableConpon.couponName}}</text>
				</view>
				
				<view class="couponRight">
					<text>{{ableConpon.couponRule}}</text>
					<text class="iconfont icon-you" style="font-size:32rpx;"></text>
				</view>
			</view>
		</view>
		
		<view class="middle">
			友情提示：请核对以上付款金额、付款商户等信息与交易一致。经您确认支付的金额，商家不会退回亦无赔偿义务。
		</view>
		
		<view class="bottom">
			<view class="botLeft">
				<view v-for="(item,index) of leftList" :key="index">
					<text @click="clickNum(items.text,index,a)" v-for="(items,a) of item.child" :key="a" :style="{'background':items.background}">{{items.text}}</text>
				</view>
			</view>
			
			<view class="botRight">
				<view class="rightOne" @click="clickEnter()" :style="{'background':spaceBackground}">
					<text class="iconfont icon-im_huige" style="font-size:70rpx;"></text>
				</view>
				<view class="rightTwo" ref="pay" @click="clickPay()" :style="{'background':payBackground}">
					<view>立即</view>
					<view>支付</view>
				</view>
			</view>
		</view>
		<!-------------------------------------------券弹窗------------------------------>
		 <orderCoupon :couponData="couponData" ref="orderCoupon" @couponChoose="couponChoose" :chooseCouponObj="chooseCouponObj"></orderCoupon>
		 
	</view>
	
</template>

<script>
	import orderCoupon from "@/components/orderCoupon.vue"
	export default {
		components:{
			orderCoupon
		},
		data() {
			return {
				enterUrl:"",//进入页面路由
				buyMoney:"", //输入金额
				companyId: "", //公司Id
				merchantId: "", //商户Id
				name: "", //商家名称
				payType:"",//支付类型，微信小程序42，支付宝小程序33
				paySign: "", //签名
				signType: "", //签名方式
				timeStamp: "", //时间戳
				nonceStr: "", //随机字符串
				package: "", //订单详情扩展字符串
				orderInfo:"",//支付宝订单号
				flag: "", //setTimeout函数
				couponData: "", //所有劵数据
				chooseCouponObj: "", //默认选中最优价格优惠券
				savedMoney:0,//优惠金额
				ableConpon: "", //没有可用优惠券时，达到一定条件可用，显示达到的条件
				orderSource:8,//1公众号平台、2公众号组合页面1、3公众号组合页面2、4胖丁伙伴app、5第三方自助机、6第三方票房窗口、7平台快捷买单、8扫码支付
				background:"",//普通按钮背景颜色
				spaceBackground:"",//回格按钮背景颜色
				payBackground:"#1dce2e",//支付背景颜色
				leftList:[//左侧按钮数据
					{
						child:[
							{text:1,background:""},
							{text:2,background:""},
							{text:3,background:""}
						]
					},
					{
						child:[
							{text:4,background:""},
							{text:5,background:""},
							{text:6,background:""},
						]
					},
					{
						child:[
							{text:7,background:""},
							{text:8,background:""},
							{text:9,background:""},
						]
					},
					{
						child:[
							{text:0,background:""},
							{text:'.',background:""},
						]
					}
				],
				orderId:"",//订单Id
				paydJumpUrl:"",//页面跳转路径
				companyAttribute:"",//等于5时为出租车
				timer:null,//定时器
			}
		},
		onLoad(option) {
			//#ifdef MP-WEIXIN
			this.enterUrl=option.q
			this.payType = 42
			//#endif
			
			//#ifdef MP-ALIPAY
				this.enterUrl=uni.getStorageSync("alipayQrCode")
				uni.removeStorageSync('alipayQrCode')//临时解决出租车扫码之后跳转到组合票时，参数会有问题，有时间再根本解决
				this.payType = 33
			//#endif
			if(this.enterUrl){//扫普通二维码进入
				this.merchantId=this.getUrlKey("merchantId")
				this.companyId=this.getUrlKey("companyId")
			}else{//扫小程序二维码进入
				this.merchantId=option.merchantId
				this.companyId=option.companyId
			}
			if(uni.getStorageSync("openid")){
				this.openid=uni.getStorageSync("openid")
				this.getUserBrowse()
				if (this.merchantId) { //大商家的有merchantId
				  this.init()
				} else { //小商家没有merchantId
				  this.initTwo()
				}
				this.initCoupon()
			}else{
				this.login()
			}
		},
		// 一般页面用onUnload
		// tabbar页面用onHide
		onUnload() {
			if(this.timer) {  
				clearTimeout(this.timer)
				this.timer = null
			}  
		},
		methods: {
			getUserBrowse(){//---获取浏览记录
			  let queryUrl=this.$commonjs.getCurrentPageUrl()
			  let data={
			    openid:uni.getStorageSync("openid") ,//用户Id
			    userName:"",//用户昵称
			    pageType:4,//页面类型(0首页，1商户页，2产品页，3售票页，4付款页，5付款完成页，6行记页，7评论页，8咨询页，9劵中心页，11订单页，12订单详情页，13IC卡出行页，14电子门票页，15常用信息页，16其他页)
			    queryUrl,//页面全地址
			    merchantType:""//商户类型1景区，2酒店，3餐饮，4特产
			  }
			  this.$request("wechatUser/wxUser/saveUserBrowse",data).then((res)=>{
			
			  })
			},
			login(){//---登录
				let _this=this
				uni.getProvider({
					service: 'oauth',
					success(proRes){
						uni.login({
						  provider:proRes.provider[0],
						  success: function (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
										companyId:uni.getStorageSync('enterOptions').query.companyId||'',
										appid:uni.getStorageSync('appid')||''
									}
									_this.$request('wechat/wx/getUserInfoByCode',data).then(res => {
										if(res.code=='00'){
											_this.openid=res.data.openid
											uni.setStorageSync('openid',_this.openid)
											_this.getUserBrowse()
											if (_this.merchantId) { //大商家的有merchantId
											  _this.init()
											} else { //小商家没有merchantId
											  _this.initTwo()
											}
											_this.initCoupon()
											//用于获取token等信息
											let userId=res.data.userId||""
											let openid=res.data.openid||""
											let datas={openid,source,userId}
											_this.$request("wechatUser/login/findWxUserAndLogin",datas).then((res)=>{
											  if(res.code=="00"){
											    let token=res.data.token||""
												uni.setStorageSync('token',token)
											    let createUserId=res.data.personId||""
												uni.setStorageSync('createUserId',createUserId)
											    let userId=res.data.userId||""
												uni.setStorageSync('userId',userId)
											  }else{
											    uni.showToast({
											    	title:res.message,
											    	icon:"none"
											    })
											  }
											}).catch((err)=>{
											  uni.showToast({
											  	title:"登录失败",
											  	icon:"none"
											  })
												_this.timer = setTimeout(() => {
												  _this.login()
												}, 2000)
											})
										}else{
											uni.showToast({
												title:res.message,
												icon:"none"
											})
										}
									}).catch((err)=>{
										  uni.showToast({
										  	title:"登录失败",
										  	icon:"none"
										  })
											_this.timer = setTimeout(() => {
											  _this.login()
											}, 2000)
									})
								}
						   }
						})
					}
				})
			},
			getUrlKey(name){//---获取url
			  return(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(decodeURIComponent(this.enterUrl)) || [, ""])[1].replace(/\+/g, '%20') || "";
			},
			clickNum(i,index,a) {//---输入数字
			  this.buyMoney += i
			  this.leftList[index].child[a].background="#dddddd"
			  setTimeout(()=>{
				this.leftList[index].child[a].background=""
			  },200)
			  clearTimeout(this.flag)
			  this.flag = setTimeout(()=>{
			    this.initCoupon()
			  }, 1500)
			},
			clickEnter(){//---退格
				this.buyMoney = this.buyMoney.substr(0, this.buyMoney.length - 1)
				this.spaceBackground="#dddddd"
				setTimeout(()=>{
					this.spaceBackground=""
				},200)
				clearTimeout(this.flag)
				this.flag = setTimeout(()=>{
				  this.initCoupon()
				}, 1500)
			},
			couponChoose(data) { //---子组件券选择之后触发的事件
				if(data){
					this.chooseCouponObj = data
					this.savedMoney=this.chooseCouponObj.savedMoney||0
				}else{
					this.chooseCouponObj = ""
					this.savedMoney=0
				}
			  
			},
			showCoupon() { //---展示券列表
			  this.$refs.orderCoupon.showCoupon()
			},
			init() { //---初始化获取商家名称，大商家
			  let data = {
			    "merchantId": this.merchantId,
			    "companyId": this.companyId,
			  }
			  uni.showLoading({title: '加载中',mask:true})
			  this.$request("scenic/order/findCodePayInfo",data).then((res) => {
				  uni.hideLoading()
			    if (res.code =="00") {
			      this.name = res.data.name
			    } else {
			        uni.showToast({
					  title:res.message,
					  icon:"none"
				    })
			    }
			  }).catch((err)=>{
				  uni.hideLoading()
			  })
			},
			initTwo() { //---初始化获取商家名称,没有merchantId的小商家
			  let data = {
			    "id": this.companyId,
			  }
			  uni.showLoading({title: '加载中',mask:true})
			  this.$request("user/company/detail", data).then((res) => {
				  uni.hideLoading()
			    if (res.code=="00"){
				  this.companyAttribute=res.data.companyVo.companyAttribute
				  this.paydJumpUrl=res.data.paydJumpUrl
				  if(this.companyAttribute==5){//出租车显示联系人姓名，其他显示公司名称
				  	this.name = res.data.companyVo.contactName 			  
				  }else{
				  	this.name = res.data.companyVo.companyName 
				  }
			    } else {
			        uni.showToast({
					  title:res.message,
					  icon:"none"
					})
			    }
			  }).catch((err)=>{
				  uni.hideLoading()
			  })
			},
			initCoupon() { //---加载优惠券
			  let savedMoneyList = []
			  this.chooseCouponObj = ""
			  this.ableConpon = ""
			  let data = {
			    money:parseFloat(this.buyMoney)||0, //订单总价，不算券，和现金红包
			    merchantId:this.merchantId, //商户Id
			    companyId:this.companyId,//公司Id
			    orderSource:this.orderSource,//订单来源 8扫码支付
			    openid:this.openid
			  }
			  this.$request("wechatUser/myPage/usableCouponList",data).then((res) =>{
			    if (res.code == "00") {
			      this.couponData = res.data
			      let masterSlaveCouponList=res.data.masterSlaveCouponList
			      if (masterSlaveCouponList&&masterSlaveCouponList.length>0) {
			        masterSlaveCouponList.forEach((item) => { //获取最优券
			          savedMoneyList.push(item.savedMoney)
			        })
			        let maxMoney = Math.max.apply(null, savedMoneyList)
			        let arr=masterSlaveCouponList.filter((item)=>{//找到最大值的数组
			          return item.savedMoney==maxMoney
			        })
			        if(arr.length==1){
			          this.chooseCouponObj=arr[0]
			        }else{
								//如果数组有多个时
			          let index=arr.findIndex((item)=>{//如果有多个，找到是否有平台券，平台劵优先
			            return item.createSource==1
			          })
			          if(index>-1){
			            this.chooseCouponObj=arr[index]
			          }else{
			            this.chooseCouponObj=arr[0]
			          }
			        }
			        this.savedMoney=this.chooseCouponObj.savedMoney
			      } else {
			        if (res.data.unusableCouponList.length > 0) {
			          res.data.unusableCouponList.forEach((item, i) => { //没有可用优惠券，有达到条件可以用的优惠券，先显示条件，达到条件时显示可用优惠券
			            if (item.isProduct == 1) {
			              this.ableConpon = item
			            }
			          })
			        }
			      }
			    }
			  })
			},
			clickPay(){//---点击立即支付，获取支付需要的参数
				if (!parseFloat(this.buyMoney)) {
					uni.showToast({
						title:"请输入正确金额",
						icon:"none"
					})
					return
				}
				let couponList = []
				if (this.chooseCouponObj != '') {
				  if(this.chooseCouponObj.slaveList.length>0){//有从卷取值从卷，没有从卷取值主劵
				    couponList=[//券列表
				    	{
				    		couponId:this.chooseCouponObj.slaveCouponId,//券id
				    		isMerchant:this.chooseCouponObj.slaveCreateSource,//是否是商户的券
				    		myCouponId:this.chooseCouponObj.slaveId,//领取人编号
								couponType:this.chooseCouponObj.couponType,//券类型
								couponPrice:this.chooseCouponObj.savedMoney,//券价格
								couponCompanyId:this.chooseCouponObj.companyId,//公司Id
				    	}
				    ]
				  }else{
				  	couponList=[
				  		{
								couponId:this.chooseCouponObj.couponId,//券id
								isMerchant:this.chooseCouponObj.createSource,//是否是商户的券
								myCouponId:this.chooseCouponObj.id,//领取人编号
				  	    couponType:this.chooseCouponObj.couponType,//券类型
				        couponPrice:this.chooseCouponObj.savedMoney,//券价格
								couponCompanyId:this.chooseCouponObj.companyId,//公司Id
				  		}
				  	]
				  }
				}
				let data = {
				   companyId: this.companyId,
				   merchantId: this.merchantId,
				   userId:this.openid,
				   orderMoney: parseFloat(this.buyMoney),
				   payType: this.payType, //支付类型,
				   orderSource:this.orderSource,//订单来源 8扫码支付
				   couponList,//券列表
				}
				this.payBackground="#cccccc"
				//重新加载优惠券
				this.initCoupon()
				this.$request("orderc/order/codePay", data).then((res) => {
					setTimeout(() => {
					this.payBackground="#1dce2e"
					},1000)
					if(res.code=="00") {
						if (res.data.errorMessage) {
						uni.showToast({
							title:res.data.errorMessage,
							icon:"none"
							})
							return
						}
						this.orderId=res.data.id
						//微信入参
						this.signType = res.data.signType
						this.paySign = res.data.sign
						this.timeStamp = res.data.timestamp
						this.nonceStr = res.data.noncestr
						this.package = res.data.package
						//支付宝入参
						this.orderInfo = res.data.payInfo || ""
						this.goPay()
						} else {
							uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				}).catch((err) => {
				  this.payBackground="#1dce2e"
				})
			},
			goPay(){//---去支付
				let _this=this
				// #ifdef MP-WEIXIN
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp:this.timeStamp,
				    nonceStr:this.nonceStr,
				    package:this.package,
				    signType:this.signType,
				    paySign:this.paySign,
				    success: function (res) {
						if(_this.companyAttribute==5){//出租车跳转分销组合票页面
							uni.navigateTo({
							    url:_this.paydJumpUrl
							})
						}else{
							uni.navigateTo({
							    url:"/pages/payment/paySuccess/paySuccess?orderId="+_this.orderId
							})
						}
				    },
				    fail: function (err) {
				        uni.showToast({
							title:err.errMsg,
							icon:"none"
						})
				    }
				})
				//#endif
				
				// #ifdef MP-ALIPAY
				uni.requestPayment({
					provider: 'alipay', // 服务提供商 支付宝支付: alipay   微信支付: wxpay
					orderInfo: this.orderInfo, // 支付宝订单号
					success: function (res) {
						if(_this.companyAttribute==5){//出租车跳转分销组合票页面
							uni.navigateTo({
							    url:_this.paydJumpUrl
							})
						}else{
							uni.navigateTo({
							    url:"/pages/payment/paySuccess/paySuccess?orderId="+_this.orderId
							})
						}
					},
					fail: function (err) {
						uni.showToast({
							title:err.errMsg,
							icon:"none"
						})
					}
				})
				// #endif
			}
		},
		watch: {
		  buyMoney(val, oldVal) {
		    if (val == "." && oldVal == "") { //首位数是小数点自动加上0
		      this.buyMoney = 0 + "."
		    }
		    if (val == "0" && oldVal == "") { //首位数是0自动加上小数点
		      this.buyMoney = 0 + "."
		    }
			if (val.length == 2) { //防止回退之后出现01,02等状况
			  if (val.substr(0, 1) == 0 && val.substr(1, 2) != ".") {
			    this.buyMoney = val.substr(1, 2)
			  }
			}
		    if (isNaN(val) && val != ".") { //出现非数字，输入无效
		      this.buyMoney = oldVal
		    }
		    var x = String(this.buyMoney).indexOf('.') + 1; //小数点的位置
		    var y = String(this.buyMoney).length - x; //小数的位数
		    if (y > 2 && x > 0) {
		      this.buyMoney = oldVal
		    }
			if (parseFloat(this.buyMoney)) {
				this.payBackground="#1dce2e"
			} else {
				this.payBackground="#cccccc"
			}
		  }
		}
	}
</script>

<style lang="scss">
	.bigBox{background:#f5f5f5;height: 100%;}
	/*上部分*/
	.top{background: #FFFFFF;}
	.topName{font-size:30rpx;font-weight: bold;padding-top: 50rpx;display: flex;align-items: center;justify-content: center;}
	.topIcon{display:inline-flex;margin-right:10rpx;width:50rpx;height:50rpx;border-radius:50%;background:#FF8B57;align-items:center;justify-content:center;}
	.icon-tubiaolunkuo-{font-size:36rpx;color: #FFFFFF;font-weight: 400;}
	.topMoney{padding:80rpx 24rpx 24rpx 24rpx;display: flex;justify-content:space-between;align-items: center;}
	.moneyText{color: #FF3C00;font-size:32rpx;font-weight: bold;}
	.moneyNumber text:nth-child(2){font-size:62rpx;font-weight: bold;position: relative;left: -6rpx;}
	.moneyNumber text:last-child{animation: dis 1.5s infinite;transition: 1s;width: 1px;height:56rpx;display: inline-block;background: #333333;position: relative;top:8rpx;}
	.topCoupon{display: flex;height: 90rpx;border-top:1px solid $dividing-ine;align-items:center;padding:0 24rpx;justify-content: space-between;}
	.couponLeft{font-size:24rpx;}
	.couponLeft text:first-child{margin-right:10rpx;display: inline-block;width:30rpx;height:30rpx;background: #f9690e;color: #FFFFFF;text-align: center;line-height:28rpx;border-radius:4rpx;}
	.couponRight{position:relative;left:8rpx;}
	.couponRight text:first-child{font-size:32rpx;color:#f9690e;}
	.couponRight text:nth-child(2){font-size: 32rpx;color: #F9690E;font-weight:bold;}
	/*中间部分*/
	.middle{padding:50rpx 24rpx 0 24rpx;font-size: 24rpx;color: #999999;line-height: 40rpx;}	
	/*下部分*/
	.bottom{position:absolute;bottom:0;height:40%;background: #FFFFFF;width:100%;display: flex;border-top:1px solid #dddddd;font-size:50rpx;}
	.botLeft{width:75%;}
	.botLeft view{height:25%;display: flex;border-bottom:1px solid #dddddd;}
	.botLeft view:last-child{border:none;}
	.botLeft view:last-child text:first-child{width:66.7%;}
	.botLeft view:last-child text:last-child{width: 33.3%;}
	.botLeft view text{flex:1;height:100%;display:inline-flex;align-items: center;justify-content: center;border-right:1px solid #dddddd;}
	.botLeft view:last-child text{flex:initial;}
	.botRight{width:25%;}
	.rightOne{height: 25%;display: flex;align-items:center;justify-content: center;border-bottom:1px solid #dddddd;}
	.rightTwo{height: 75%;border:none;color: #FFFFFF;display: flex;flex-direction:column;align-items:center;justify-content: center;}	
	@keyframes dis{
	  from{
	    opacity: 0;
	  }
	  to{
	    opacity: 1;
	  }
	}
</style>
