<template>
	<view class="pages">
		<div class="shop_info">
			<h3>门店确认</h3>
			<div class="address">
				<div class="address_1">{{ shopData.name }}</div>
				<div class="address_2">距您{{ shopData.distance }}，请确定门店后下单</div>
			</div>
			<div class="take_order">
				<div class="title">取单时间</div>
				<div class="time">现在下单，预计 <span class="min">{{ duration }}</span> 分钟后取餐</div>
			</div>
		</div>
		<div class="goods_info">
			<h3>商品详情</h3>
			<div class="goods" v-for="item in goods" :key="item.goodsId">
				<div class="goods_item">
					<image mode="aspectFit" v-if="item.pics.thumbnailApplet" class="goods_img"
						:src="item.pics.thumbnailApplet"></image>
					<image v-else class="goods_img" :src="item.pics.thumbnail"></image>

					<div class="goods_text">
						<div class="goods_name">
							<div class="name">{{ item.name }}</div>
							<div class="price">¥{{ setPrice(item.sku.discount) }}</div>
						</div>
						<div class="goods_psce">
							<div class="psce_name">
								<span v-for="rule in item.sku.rules" :key="rule.ruleId">{{ rule.ruleName }}/</span>
							</div>
							<div class="size">x {{ item.num }}</div>
						</div>
					</div>
				</div>
				<!-- <div class="discount">
					<div class="discount_1">
						<div class="name">优惠免减</div>
						<div class="price">- ¥{{ itemReduction(item.sku.discount, item.sku.price, item.num) }}</div>
					</div>
					<div class="concessional_rate">
						<div class="name">特惠价</div>
						<div class="price">¥{{ setPrice(item.sku.discount * item.num) }}</div>
					</div>
				</div> -->
			</div>

			<div class="total">
				<div class="size">共{{ totalNum }}件商品</div>
				<div>
					<span class="paid_in">实付</span>
					<span class="money">￥{{ totalPrice }}</span>
				</div>
			</div>
		</div>
		<div class="Payment_method">
			<div>支付方式</div>
			<div class="type">
				<image mode="aspectFit" src="../../../static/imgs/weixin-3.png" class="icon"></image>
				<span>微信支付</span>
			</div>
		</div>
		<div style="height:150rpx"></div>
		<div class="footer">
			<div class="total">
				<div class="the_sum">
					<span class="name">合计</span>
					<span class="price">￥{{ totalPrice }}</span>
				</div>
				<!-- <div class="sun">
					<div class="price">总优惠￥{{ reduction }}</div>
				</div> -->
			</div>
			<view class="payment" @click="messageAndSave" v-if="userms">
				付款
			</view>
			<button v-if="!userms" class="payment" style="border-radius: 0;" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber">
				付款
			</button>

		</div>
	</view>
</template>

<script>
import { $EventBus } from "@/utils/EventBus";
import Utils from '@/utils/utils'
import Menu from '@/request/menu'
import User from '@/request/user'
import Order from '@/request/order'
export default {
	onShow() {
		if (this.goods) {
			Order.getWaitTine({
				shopId: uni.getStorageSync('shopData').id,
				goods: this.goods
			}).then(({ data }) => {
				this.duration = data.data
			})
		}

	},
	onLoad(option) {
		// 商品详情页点击立即支付进入
		if (option.goodsList) {
			const shopData = uni.getStorageSync('shopData');
			this.shopData = shopData
			this.buyType = 3;
			console.log(uni.getStorageSync('goodsList'));
			this.goods = uni.getStorageSync('goodsList') || [];
			this.payType = '2'
			return
		}

		// 微信扫码进入
		this.option = JSON.stringify(option)
		const { q } = option;
		if (q) {
			User.getLocation((location) => {
				uni.removeStorageSync('shopCarInfo');
				$EventBus.$emit('updateCar');
				// this.buyType = '1';
				let id = decodeURIComponent(q).split('?')[1].split('=')[1];
				Menu.getScreenShopCar(id, location).then(res => {
					const data = JSON.parse(res.data.data);
					console.log(data);
					this.shopData = data.shop;
					this.buyType = data.screenNo;
					this.goods = data.goods.map(item => {
						const data = { ...item, skuId: item.sku.skuId, flag: true }
						Utils.getallNum(data)
						return data
					})
				})
			})
			return
		}

		// 购物车点击进入
		const shopData = uni.getStorageSync('shopData');
		this.shopData = shopData
		this.buyType = 3;
		const shopCarInfo = uni.getStorageSync('shopCarInfo') || []
		this.goods = shopCarInfo.filter(item => item.flag);
		Order.getWaitTine({
			shopId: uni.getStorageSync('shopData').id,
			goods: this.goods
		}).then(({ data }) => {
			this.duration = data.data
		})


		if(!this.userms){
			User.wxLoginAndGetOpenid(true).then(loginInfo=>{
				this.loginInfo = loginInfo
			})
		}
	},
	data() {
		return {
			goods: [],
			buyType: '',
			shopData: {},
			option: '',
			payType: '1',
			duration: '',
			loginInfo: ''
		}
	},
	computed: {
		userms() {
			return this.$store.getters.Authorization;
		},
		totalNum() {
			let totalNum = 0;
			this.goods.map(item => {
				item.flag ? totalNum += item.num : totalNum += 0
			})
			return totalNum
		},
		reduction() {
			let price = 0;
			let discountNum = 0;
			this.goods.forEach(item => {
				const sku = item.sku;
				if (item.flag) {
					discountNum += item.num * sku.discount
					price += item.num * sku.price
				} else {
					discountNum += 0
					price += 0
				}
			})
			return (price - discountNum).toFixed(2)
		},
		totalPrice() {
			let totalPrice = 0;

			this.goods.forEach(item => {
				const sku = item.sku;
				item.flag ? totalPrice += (item.num * sku.discount) : (totalPrice += 0)
			})

			return totalPrice.toFixed(2)
		}
	},
	methods: {
		itemReduction(discount, price, num) {
			return ((price - discount) * num).toFixed(2)
		},
		// 手机号授权登录
		getPhoneNumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				e.loginInfo = this.loginInfo
				User.getPhoneNumber(e);
			} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
				uni.showToast({ title: '已拒绝手机号授权', icon: 'error' })
			}
		},
		messageAndSave() {
			wx.requestSubscribeMessage({
				tmplIds: ['1uErx-15S-3vuopXSvvsxCeM_Jd-1iZC-nXzd2yW3QU', 'Q4HDwBEvpTXpwtZktqWm4SZOTEuQK1x48xjqjD2GqyM', 'Fu_CPIXa0cnJ4EDdVKqFQ3qqKJccMqt2oorI5mfNq74'],
				success: () => {
					uni.setStorageSync('isMessage', 'true')
					User.setAllow(1)
					this.saveReserve()
				},
				fail: () => {
					User.setAllow(2)
					this.saveReserve()
				}
			})
		},
		//结算组装数据发起订单
		async saveReserve() {
			// 组装购物车数据或者立即支付数据
			let list = [];
			if (this.payType == '1') {
				list = uni.getStorageSync('shopCarInfo').filter((v) => v.flag == true);
			} else {
				list = uni.getStorageSync('goodsList').filter((v) => v.flag == true);
			}
			let res = await Utils.AssemblyOrder(this.totalPrice, this.totalNum, this.buyType, list);
			if (res) {
				// 发起订单
				let orderInfo = await Menu.saveReserve(res);
				if (orderInfo && orderInfo.data.code == 200) {
					await Menu.requestPayment(orderInfo.data.data, res, this.buyType);
				}
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.pages {
	padding-top: 1rpx;
}

.shop_info {
	width: 686rpx;
	height: 306rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	margin: 0 auto;
	margin-top: 32rpx;
	padding: 24rpx 32rpx;
	box-sizing: border-box;


	h3 {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #000000;
	}

	.address {
		margin-top: 16rpx;

		.address_1 {

			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.address_2 {
			margin-top: 5rpx;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
	}

	.take_order {
		margin-top: 28rpx;
		padding-top: 28rpx;
		border-top: 1rpx solid #CCCCCC;

		.title {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.time {
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;

			.min {
				color: #006ECF;
				font-size: 28rpx;
				font-weight: 700;
				margin: 0 5rpx;
				display: inline-block;
			}
		}
	}
}

.goods_info {
	width: 686rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	margin: 0 auto;
	margin-top: 32rpx;
	padding: 24rpx 32rpx;
	box-sizing: border-box;


	h3 {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #000000;
	}

	.goods {
		margin-top: 42rpx;
		border-bottom: 1rpx solid #CCCCCC;
		padding-bottom: 20rpx;

		.goods_item {
			display: flex;
			align-items: center;
		}

		.goods_img {
			height: 80rpx;
			width: 80rpx;
			background-color: #eee;
			margin-right: 50rpx;
		}

		.goods_text {
			flex: 1;

			.goods_psce,
			.goods_name {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name {
					font-size: 24rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
				}

				.price {
					font-size: 28rpx;
					font-family: Arial-BoldMT, Arial;
					font-weight: normal;
					color: #000000;
				}

				.psce_name {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.size {
					font-size: 24rpx;
					font-family: ArialMT;
					color: #666666;
				}
			}

			.goods_psce {
				margin-top: 10rpx;
			}
		}


	}

	.discount {
		margin-top: 15rpx;
		padding-top: 15rpx;


		.discount_1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #333333;

			.price {

				font-family: Arial-BoldMT, Arial;
				font-weight: normal;
				color: #EB5F17;
			}
		}

		.concessional_rate {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-top: 18rpx;

			.price {

				font-family: Arial-BoldMT, Arial;
				font-weight: 700;
				color: #000;
			}
		}
	}

	.total {
		display: flex;
		align-items: center;
		display: flex;
		justify-content: space-between;
		margin-top: 52rpx;

		.size {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}

		.paid_in {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 600;
			color: #000000;

		}

		.money {
			font-weight: 600;
			font-size: 32rpx;
			color: #000000;
			vertical-align: middle;
		}
	}
}

.Payment_method {
	width: 686rpx;
	height: 86rpx;
	margin: 32rpx auto 0;
	padding: 0 32rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;

	.type {
		display: flex;
		align-items: center;
		font-weight: 600;

		.icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}
}

.footer {
	height: 92rpx;
	background: #fff;
	position: fixed;
	bottom: 0;
	display: flex;
	width: 100%;

	.total {
		flex: 1;
		padding-left: 32rpx;

		.the_sum {
			line-height: 92rpx;
			.name {
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.price {
				font-size: 28rpx;
				font-family: Arial-BoldMT, Arial;
				font-weight: normal;
				color: #000000;
			}
		}

		.sun {
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF0E00;
			margin-top: 10rpx;
		}
	}

	.payment {
		width: 170rpx;
		height: 100%;
		background: #006ECF;
		text-align: center;
		line-height: 92rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
}
</style>