<template>
	<view class="bg">
		<view class="box">
			<view class="info">
				<image class="img" :src="showImg(info.image)" mode=""></image>
				<view class="main">
					<view class="title text-overflowRows">
						{{info.title}}
					</view>
					<view class="main-bottom">
						<view class="price">
							{{info.money/100}}
						</view>
						<view class="num-box">
							<view class="del" @click="reduce">-</view>
							<view class="num">{{num}}</view>
							<view class="add" @click="plus">+</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 优惠券 -->
			<navigator :url="'/subPackages/order/orderCoupon?allprice='+ allprice*100 + '&sku_ids='+ info.id" class="tickets-box flex-between msg-box">
			    <div class="order-title">优惠券</div>
			    <div class="coupon-btn" v-if="coupon==''">
					请选择
				</div>
			    <div class="coupon-price" v-else>
					<span v-if="coupon.percent == 0">-￥{{coupon.discounts/100}}</span>
					<span v-else>-{{coupon.percent}}%</span>
					<span style="margin:0 31rpx 0 8rpx;color: #6C7A94;">></span>
				</div>
			 </navigator>
			<view class="name-box">
				<view class="left-text">
					联系人：
				</view>
				<input type="text" placeholder="输入您的名字" v-model="reserve_name" />
			</view>
			<view class="phone-box">
				<view class="" style="display: flex;">
					<view class="left-text">
						手机号：
					</view>
					<input type="number" v-model="reserve_phone" maxlength="11"  />
				</view>
				<image class="cha" @click="cha" v-if="reserve_phone!= ''" :src="showImg('/uploads/20240827/5e5970926e92a2109da55bfe32a47e4b.png')" mode=""></image>
			</view>
		</view>
		
		<view class="bottom">
			<view class="center">
				<view class="totalText">
					合计：
				</view>
				<view class="totalPrice">
					￥{{ allprice }}
				</view>
			</view>
			<view class="order" @click="order">
				去支付
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				coupon:"",
				reserve_name: '',
				reserve_phone: '',
				info:null,
				detail:null,//商品的信息
				allprice: 0,
				num:0,
			}
		},
		onShow() {
			this.coupon = this.$store.state.user.coupon
			console.log('传过来的优惠券',this.coupon);
			this.total()
		},
		onLoad(option) {
			this.$store.commit("choseCoupon", "");
			this.info = this.$store.state.user.foodInfo
			// this.info = JSON.parse(uni.getStorageSync('order'))
			// this.detail = JSON.parse(uni.getStorageSync('detail'));
			this.num = this.info.buyNum?this.info.buyNum:1
			if (!this.info) {
				uni.navigateBack();
			}
			console.log(this.info);
			this.total()
		},
		methods: {
			cha() {
				this.reserve_phone = ''
			},
			order() {
				if (!this.reserve_name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return;
				}
				if (!this.reserve_phone) {
					uni.showToast({
						title: '请输入电话',
						icon: 'none'
					});
					return;
				}
				let goods = [];
				let goodsItem = {
					specifications_id: this.info.id,
					num: this.num,
				};
				goods.push(goodsItem);
				let data = {
					goods: goods,
					coupon: this.coupon ? this.coupon.id : null,
					is_post: this.info.is_post,
					reserve_name: this.reserve_name,
					reserve_phone: this.reserve_phone
				};
				this.Post(
					{
						method: 'POST',
						data: JSON.stringify(data)
					},
					'/api/order/place'
				).then(res => {
					if (res.code == 1) {
						this.Post(
							{
								order_id: res.data.order_id,
								type: 'miniprogram',
								platform: 'miniprogram'
							},
							'/api/pay/unify'
						).then(res => {
							if (res.data) {
								uni.requestPayment({
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									paySign: res.data.paySign,
									signType: res.data.signType,
									timeStamp: res.data.timeStamp,
									complete() {
										uni.navigateTo({
											url: '/subPackages/order/trades'
										});
									}
								});
							}
						});
					}
				});
			},
			plus() {
				this.num = Number(this.num);
				this.coupon = ''
				this.$nextTick(() => {
					this.num += 1;
					this.total()
				});
			},
			reduce() {
				this.num = Number(this.num);
				this.coupon = ''
				if (this.num > 1) {
					this.$nextTick(() => {
						this.num -= 1;
						this.total()
					});
				}
			},
			// 总价
			total() {
				let price = 0
				if (this.coupon) {
					if (this.coupon.percent == 0) {
						price = this.info.money * this.num - this.coupon.discounts
					} else{
						price = this.info.money * this.num - ((this.info.money * this.num + this.post) * this.coupon.percent)
					}
				} else{
					price = this.info.money * this.num
				}
				price < 0 ? 0 : price
				this.allprice = price / 100
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		background: #F7F7F7;
		min-height: 100vh;
		padding: 26rpx 25.33rpx 168rpx;
	}
	
	.box {
		width: 699rpx;
		// height: 553rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		padding: 28rpx 21.33rpx 0;
	}
	
	.bottom {
		height: 148rpx;
	    background: #FFFFFF;
	    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(6, 0, 1, 0.1);
	    padding: 20.67rpx 26.67rpx 40.67rpx;
	    position: fixed;
	    left: 0;
	    right: 0;
	    bottom: 0;
		display: flex;
		justify-content: space-between;
	}
	
	.img {
		width: 167rpx;
		height: 160rpx;
		background: #666666;
		border-radius: 7rpx;
		margin-right: 29.33rpx;
		flex-shrink: 0;
	}
	
	.info {
		display: flex;
		margin-bottom: 22rpx;
	}
	
	.main {
		padding-top: 8.67rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.title {
		width: 429rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 33rpx;
		color: #333333;
	}
	
	.main-bottom {
		display: flex;
		justify-content: space-between;
	}
	
	.num-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.price {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 33rpx;
		color: #000000;
	}
	.price::before {
		content: "￥";
		font-size: 24rpx;
	}
	
	.del {
		width: 47rpx;
		height: 47rpx;
		background: #E8E8E8;
		border-radius: 50%;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 34rpx;
		color: #999999;
		text-align: center;
		line-height: 47rpx;
	}
	
	.add {
		width: 47rpx;
		height: 47rpx;
		background: #71B580;
		border-radius: 50%;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 34rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 47rpx;
	}
	
	.num {
		margin: 0 29rpx;
	}
	
	.msg-box {
		padding: 42rpx 0;
		border-bottom: 1rpx solid #CCC;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.name-box {
		padding: 42rpx 0;
		display: flex;
		border-bottom: 1rpx solid #CCC;
	}
	
	.phone-box {
		padding: 42rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.rightIcon {
		width: 10.67rpx;
		height: 20rpx;
		margin-left: 19.33rpx;
	}
	
	.left-text {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 31rpx;
		color: #000000;
	}
	
	.coupon {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 27rpx;
		color: #999999;
	}
	
	.cha {
		width: 26rpx;
		height: 25.33rpx;
	}
	
	input {
		margin-left: 20rpx;
	}
	
	.totalText {
		margin-right: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 29rpx;
		color: #333333;
	}
	
	.totalPrice {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #F84A56;
	}
	
	.order {
		width: 267rpx;
		height: 87rpx;
		background: #F84A56;
		border-radius: 43rpx;
		font-family: PingFang;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 87rpx;
	}
	
	.center {
		display: flex;
		align-items: center;
	}
	
	.coupon-btn {
		width: 140rpx;
		height: 57rpx;
		border: 1px solid #333333;
		border-radius: 29rpx;
		font-size: 28rpx;
		font-family: PingFangSC;
		font-weight: 400;
		color: #000000;
		text-align: center;
		line-height: 57rpx;
		
		.select {
			padding: 10rpx 18rpx;
			background: #ED9230;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #fff;
		}
	}
	
	.coupon-price {
		color:#DD0000;
		font-size: 30rpx;
		font-weight: 500;
	}
	

</style>
