<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.usableCouponList&&couponData.usableCouponList.length>0&&chooseCouponObj==''" @click="showCoupon()">
			    <view class="couponLeft">
					<text>券</text>
					<text>{{couponData.usableCouponList[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!=''" @click="showCoupon()">
				<view class="couponLeft">
					<text>券</text>
					<text>{{chooseCouponObj.couponName}}</text>
				</view>
				
				<view class="couponRight">
					<text>-</text>
					<text>{{chooseCouponObj.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>
					<text @click="clickNum(1)" ref="1">1</text>
					<text @click="clickNum(2)" ref="2">2</text>
					<text @click="clickNum(3)" ref="3">3</text>
				</view>
				<view>
					<text @click="clickNum(4)" ref="4">4</text>
					<text @click="clickNum(5)" ref="5">5</text>
					<text @click="clickNum(6)" ref="6">6</text>
				</view>
				<view>
					<text @click="clickNum(7)" ref="7">7</text>
					<text @click="clickNum(8)" ref="8">8</text>
					<text @click="clickNum(9)" ref="9">9</text>
				</view>
				<view>
					<text @click="clickNum(0)" ref="0" style="width: 66.7%;">0</text>
					<text @click="clickNum('.')" ref="." style="width: 33.3%;">.</text>
				</view>
			</view>
			
			<view class="botRight">
				<view class="rightOne" @click="clickEnter()" ref="enter">
					<text class="iconfont icon-im_huige" style="font-size:70rpx;"></text>
				</view>
				<view class="rightTwo" ref="pay" @click="clickPay()">
					<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 {
				buyMoney:"", //输入金额
				companyId: "", //公司Id
				merchantId: "", //商户Id
				name: "", //商家名称
				paySign: "", //签名
				signType: "", //签名方式
				timeStamp: "", //时间戳
				nonceStr: "", //随机字符串
				package: "", //订单详情扩展字符串
				flag: "", //setTimeout函数
				couponData: "", //所有劵数据
				chooseCouponObj: "", //默认选中最优价格优惠券
				ableConpon: "", //没有可用优惠券时，达到一定条件可用，显示达到的条件
				orderSource:8,//1公众号平台、2公众号组合页面1、3公众号组合页面2、4胖丁伙伴app、5第三方自助机、6第三方票房窗口、7平台快捷买单、8扫码支付
			}
		},
		onLoad(option) {
			this.companyId=option.companyId
			this.merchantId=option.merchantId
			if (this.merchantId) { //大商家的有merchantId
			  this.init()
			} else { //小商家没有merchantId
			  this.initTwo()
			}
			this.initCoupon()
		},
		methods: {
			clickNum(i) {//---------------------------------------------------------------------输入数字
			  this.buyMoney += i
			  //#ifdef H5
			  this.$refs[i].$el.style.background="#dddddd"
			  setTimeout(()=>{
				this.$refs[i].$el.style.background=""
			  },200)
			  //#endif
			  clearTimeout(this.flag)
			  this.flag = setTimeout(()=>{
			    this.initCoupon()
			  }, 1500)
			},
			clickEnter(){//---------------------------------------------------------------------退格
				this.buyMoney = this.buyMoney.substr(0, this.buyMoney.length - 1)
				//#ifdef H5
				this.$refs.enter.$el.style.background="#dddddd"
				setTimeout(()=>{
					this.$refs.enter.$el.style.background="" 
				},200)
				//#endif
				clearTimeout(this.flag)
				this.flag = setTimeout(()=>{
				  this.initCoupon()
				}, 1500)
			},
			couponChoose(data) { //---------------------------------------------------------------子组件券选择之后触发的事件
			  this.chooseCouponObj = data
			},
			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"
				    })
			    }
			  })
			},
			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.name = res.data.companyVo.companyName
			    } else {
			        uni.showToast({
					  title:res.message,
					  icon:"none"
					})
			    }
			  })
			},
			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:"oroHZ5D2kemXkyFtTb_KnJMH1fqc" 
			  }
			  this.$request("wechatUser/myPage/usableCouponList",data).then((res) => {
			    if (res.code == "00") {
			      this.couponData = res.data
			      if (res.data.usableCouponList.length > 0) {
			        res.data.usableCouponList.forEach((item) => { //获取最优券
			          savedMoneyList.push(item.savedMoney)
			        })
			        let maxMoney = Math.max.apply(null, savedMoneyList)
			        let index = res.data.usableCouponList.findIndex((item) => {
			          return maxMoney == item.savedMoney
			        })
			        if(index>-1){
			          this.chooseCouponObj = res.data.usableCouponList[index]
			        }
			      } 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)) {
				  return
				}
				let couponList = []
				if (this.chooseCouponObj != '') {
				  couponList = [ //券列表
				    {
				      couponId: this.chooseCouponObj.couponId, //券id
				      couponPrice: this.chooseCouponObj.savedMoney, //券价格
				      isMerchant: this.chooseCouponObj.createSource, //是否是商户的券
				      myCouponId: this.chooseCouponObj.id, //领取人编号
				      couponType:this.chooseCouponObj.couponType//券类型
				    }
				  ]
				}
				let data = {
				   companyId: this.companyId,
				   merchantId: this.merchantId,
				   userId:uni.getStorageSync("openid"),
				   orderMoney: parseFloat(this.buyMoney),
				   payType: this.payType, //支付类型,
				   orderSource:this.orderSource,//订单来源 8扫码支付
				   couponList,//券列表
				}
				// this.$refs.pay.$el.style.cssText="background:#cccccc;"
				this.$request("orderc/order/codePay", data).then((res) => {
				  // setTimeout(() => {
				  //   this.$refs.pay.$el.style.cssText="background:#1dce2e;"
				  // },1000)
				  if(res.code=="00") {
				    if (res.data.errorMessage) {
						uni.showToast({
							title:res.data.errorMessage,
							icon:"none"
					    })
				      return
				    }
				    //微信入参
				    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.goPay()
				  } else {
				    uni.showToast({
						title:res.message,
						icon:"none"
					})
				  }
				}).catch((err) => {
				  // this.$refs.pay.$el.style.cssText="background:#1dce2e;"
				})
			},
			goPay(){//------------------------------------------------------------------------------去支付
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp:this.timeStamp,
				    nonceStr:this.nonceStr,
				    package:this.package,
				    signType:this.signType,
				    paySign:this.paySign,
				    success: function (res) {
				        uni.redirectTo({
				            url:"../paySuccess/paySuccess"
				        })
				    },
				    fail: function (err) {
				        uni.showToast({
							title:err.errMsg,
							icon:"none"
						})
				    }
				})
			}
		},
		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.$refs.pay.$el.style.cssText="background:#1dce2e;"
			// } else {
			// 	this.$refs.pay.$el.style.cssText="background:#cccccc;"
			// }
		  }
		}
	}
</script>

<style lang="scss">
	.bigBox{background:#f5f5f5;height: 100%;}
	/*上部分*/
	.top{background: #FFFFFF;}
	.topName{font-size:28rpx;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 35rpx 24rpx;display: flex;justify-content:space-between;align-items: center;}
	.moneyText{color: #FF3C00;font-size:28rpx;font-weight: bold;}
	.moneyNumber text:nth-child(2){font-size: 58rpx;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:60rpx 24rpx 0 24rpx;font-size: 22rpx;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 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;background: #1dce2e;display: flex;flex-direction:column;align-items:center;justify-content: center;}	
	@keyframes dis{
	  from{
	    opacity: 0;
	  }
	  to{
	    opacity: 1;
	  }
	}
</style>
