<template>
	<view class="container">

		<view class='address-box'>
			<view class='address-left'>
				<view class="left-top">
					<u-icon name="map" color="#000" size="18" bold></u-icon>
					<view class="top-name"> 阿娟 18285564342 </view>
				</view>
				<view class="left-bottom">地址：贵州省贵阳市观山湖区高新区</view>
			</view>
			<view class='address-right'>
				<u-icon name="arrow-right" color="#000" size="14" bold></u-icon>
			</view>
		</view>

		<view class="content-box">
			<view class="message-box">
				<view class="goods-title"> {{ init_list.merchantDTO.name }} </view>
				<u-line margin='20rpx 0'></u-line>
				<view class="goods-item" v-for="(item,index) of init_list.cartItems" :key='item.goodsId'>
					<view class="item-left">
						<image class="left-img" src="@/static/QR57a.jpg"></image>
						<view class="left-text">
							<view class="text-name">{{ item.goodsName }}</view>
							<view class="text-number">×{{ item.quantity }}</view>
							<view class="price-box">
								<view class="price-box-left">
									<p class="price "> ￥{{ item.price }}</p>
									<span class="false-price">￥{{ item.originalPrice ? item.originalPrice : 0}}</span>
								</view>
								<view class="price-box-right">
									<u-number-box v-model="item.quantity"
										@change="valChange(item,$event)"></u-number-box>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="message-box">
				<view class="title"> 服务流程 </view>
				<view class="process-box">
					<view class="process-item" v-for="(itme,index) of 4">
						<view class="item-box">
							<view class="item-top"></view>
							<view class="item-bottom">线上开单</view>
						</view>
						<view class="gap-box" v-if="index != 3">
							<u-gap height="1" bgColor="#C1D1FF"></u-gap>
						</view>
					</view>
				</view>
			</view>

			<view class="message-box">
				<view class="message-item">
					<view class="item-left"> 订单总价 </view>
					<view class=" flex-end red-color" style="align-items: center;">
						<p style="margin-right: 20rpx; font-size: 36rpx; font-weight: bold;">
							￥{{ orderParams.price.toFixed(2) }}</p>
						<p style="text-decoration: line-through;font-style: italic;">(
							已优惠￥{{ orderParams.discountPrice.toFixed(2) }} )</p>
					</view>
				</view>
			</view>

			<view class="message-box">
				<view class="message-item">
					<view class="item-left"> 支付方式 </view>
					<view class="item-right flex-end">
						<span>在线支付</span>
						<image class="right-img" src="@/static/order/ic_order_weixin.png"></image>
					</view>
				</view>
			</view>

			<view class="message-box">
				<view class="message-name"> 购买须知 </view>
				<view class="message-text">
					<view class="text-item">
						<view class="text-left">开发票</view>
						<view class="text-right">到店后由商家开具</view>
					</view>
					<view class="text-item">
						<view class="text-left">退款时限</view>
						<view class="text-right">订单核销码有效期60天，过期后自动退款未使用/未到期前随时可退</view>
					</view>
					<view class="text-item">
						<view class="text-left">退款时限</view>
						<view class="text-right">商品/服务信息和预订服务由门店提传，为了更好保障您的权益，建议您使用线上支付，以便门店店与您产严生纠纷时能更好协助解决纠纷。</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btn-box">
			<view class="btn" @click="handlerSettleBtn">
				结算
			</view>
		</view>
	</view>
</template>

<script>
	import {
		generateOrder,
		getCartList,
		generateConfirmOrder,
		editGoodsNumb
	} from "@/api/client/business.js"
	import {
		successfulPayment
	} from "@/api/client/order.js"
	import {
		changeTime
	} from "@/utils/date"
	export default {
		data() {
			return {
				coupon_show: false,
				coupon_list: [],
				init_list: {
					cartItems: [],
					merchantDTO: []
				},
				phoneNumber: null, // 订购电话
				goodsRemark: '', // 备注
				merchantId: null
			}
		},
		mounted() {
			this.handlerInitList()
		},
		onLoad(option) {
			this.merchantId = option.ids
		},
		computed: {
			orderParams() {
				let price = 0
				let originalPrice = 0
				let discountPrice = 0
				if (this.init_list.cartItems) {
					this.init_list.cartItems.map(rs => {
						price += Number((rs.price).toFixed(2) * rs.quantity)
						originalPrice += Number((rs.originalPrice).toFixed(2) * rs.quantity)
					})
					discountPrice = originalPrice - price
				}
				return {
					price,
					discountPrice
				}
			}
		},
		methods: {
			// 初始化列表接口
			handlerInitList() {
				getCartList(this.merchantId).then(res => {
					this.init_list.cartItems = res.data.cartItems
					this.init_list.merchantDTO = res.data.merchantDTO
				})
			},

			// 结算按钮
			handlerSettleBtn() {
				let params = {
					payType: '2',
					cartIds: [],
					merchantId: this.init_list.merchantDTO.id
				}
				this.init_list.cartItems.map(rs => {
					params.cartIds.push(rs.goodsId)
				})
				generateOrder(params).then(res => {
					if (res.code === 'OK') {
						this.handlerCallOrderBack(res.data.order.id)
					} else {
						uni.showToast({
							title: res.msg,
						})
						return
					}
				})
			},
			// 支付回调
			handlerCallOrderBack(id) {
				successfulPayment(id, {
					payType: 2
				}).then(res => {
					if (res.code == 'OK') {
						uni.navigateTo({
							url: '/pagesHome/marketer/settleStatus'
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						return
					}
				})
			},

			close() {
				this.coupon_show = false
			},
			// 点击展示优惠券pop
			openCouponshow() {
				this.coupon_show = true
			},
			// 选择优惠券 点击确定按钮
			handlerSelectCoupon() {
				this.coupon_show = false
			},
			valChange(item, e) {
				editGoodsNumb(item.id, {
					quantity: e.value
				}).then(res => {
					console.log('@@@2res', res)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: linear-gradient(to bottom, #bacff5, #F2F4FA, #fff);
		padding: 24rpx 32rpx 150rpx;
		font-size: 28rpx;

		.address-box {
			border-radius: 16rpx;
			background-color: #fff;
			padding: 32rpx;
			margin-bottom: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
			.address-left {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.left-top {
					display: flex;
					.top-name {
						color: #333333;
						font-weight: bold;
						margin-left: 12rpx;
					}
				}
				.left-bottom {
					color: #999999;
					font-size: 24rpx;
					margin-top: 8rpx;
				}
			}
		}
		.content-box {
			.message-box {
				padding: 24rpx;
				border-radius: 16rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);

				.message-item {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item-left {
						font-size: 32rpx;
						font-weight: bold;

					}

					.item-right {
						width: 60%;
						align-items: center;

						.right-img {
							width: 50rpx;
							height: 50rpx;
							margin-left: 20rpx;
						}
					}
				}

				.couon-box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.coupon-left {
						display: flex;
						align-items: center;
						font-size: 30rpx;

						.img {
							width: 50rpx;
							height: 50rpx;
							margin-right: 20rpx;
						}
					}

					.coupon-right {
						display: flex;
						align-items: center;
					}
				}

				.goods-title {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
				}

				.goods-item {
					margin-bottom: 30rpx;
					display: flex;
					align-items: center;
					width: 100%;

					.item-left {
						display: flex;

						.left-img {
							width: 160rpx;
							height: 160rpx;
							border-radius: 10rpx;
						}

						.left-text {
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							margin-left: 20rpx;
							width: 452rpx;

							.text-name {
								font-weight: bold;
								font-size: 30rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								color: #333333;
							}

							.price-box {
								display: flex;
								justify-content: space-between;
								align-items: center;
								width: 100%;

								.price-box-left {
									display: flex;
									align-items: center;

									.price {
										font-size: 32rpx;
										font-weight: bold;
										margin-right: 20rpx;
										color: #333333;
									}

									.false-price {
										color: #999999;
										text-decoration: line-through;
										font-size: 24rpx;
									}
								}

								.price-box-right {}
							}
						}
					}
				}

				.message-name {
					font-size: 32rpx;
					font-weight: bold;
				}

				.message-text {
					margin-top: 20rpx;

					.text-item {
						display: flex;
						margin-bottom: 18rpx;
						width: 100%;

						.text-left {
							color: #333333;
							font-size: 26rpx;
							width: 18%;
						}

						.text-right {
							color: #999999;
							font-size: 24rpx;
							margin-left: 16rpx;
							width: 80%;
							display: flex;
							text-align: left;
						}
					}
				}
			}

			.title {
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
			}

			.process-box {
				display: flex;
				justify-content: space-around;
				margin-top: 24rpx;

				.process-item {
					display: flex;

					.item-box {
						text-align: center;

						.item-top {
							width: 80rpx;
							height: 80rpx;
							background: linear-gradient(180deg, #E0E6FF 0%, #FFFFFF 100%);
							border-radius: 50%;
							margin: 0 auto;
						}

						.item-bottom {
							color: #333333;
							margin-top: 16rpx;
						}
					}

					.gap-box {
						width: 56rpx;
						margin-top: 25%;
					}

				}
			}
		}
	}

	.flex-end {
		display: flex;
		justify-content: flex-end;
	}

	::v-deep .u-border {
		border-style: none !important;
	}



	.pop-box {
		height: 850rpx;
		background-color: #F4F4F4;
		position: relative;

		.pop-title {
			font-weight: bold;
			font-size: 36rpx;
			text-align: center;
			padding: 20rpx;
			background: linear-gradient(to bottom, #fff, #fff, #F4F4F4);
		}

		.pop-coupon-box {
			max-height: 650rpx;
			overflow-y: scroll;
		}

		.pop-item {
			padding: 20rpx;
			margin-bottom: 10rpx;

			.item-box {
				padding: 20rpx;
				border-radius: 20rpx 20rpx 0 0;
				background-color: #fff;
				display: flex;
				align-items: center;
				box-shadow: 0rpx 7rpx 20rpx 10rpx rgba(0, 0, 0, 0.1);
				background-image: radial-gradient(circle at left bottom, #F4F4F4, #F4F4F4 40rpx, transparent 16rpx), radial-gradient(circle at right bottom, #F4F4F4, #F4F4F4 55rpx, transparent 16rpx), radial-gradient(circle at right top, #F4F4F4, #F4F4F4 35rpx, transparent 16rpx);

				.item-left {
					display: flex;
					width: 70%;

					.img-box,
					.left-img {
						width: 160rpx;
						height: 160rpx;
						border-radius: 20rpx;
					}

					.left-text {
						margin-left: 20rpx;

						.text-title {
							font-size: 34rpx;
							width: 350rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							color: #000;
						}

						.text {
							font-size: 26rpx;
							color: #666666;
							margin-top: 10rpx;
						}
					}

				}

				.item-right {
					text-align: center;
					width: 30%;

					.price {
						font-size: 56rpx;

						.price-symbol {
							font-size: 24rpx;
						}
					}

					.text {
						color: #656565;
						margin-top: 20rpx;
					}
				}
			}

			.item-bottom {
				padding: 20rpx 50rpx 20rpx 30rpx;
				background-color: #fff;
				border-radius: 0 0 20rpx 20rpx;
				box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
				background-image: radial-gradient(circle at left top, #F4F4F4, #F4F4F4 40rpx, transparent 16rpx), radial-gradient(circle at right top, #F4F4F4, #F4F4F4 55rpx, transparent 16rpx);
				border-top: 1px dashed #F4F4F4;
				color: #b1b4b9;
				font-size: 26rpx;
				font-style: oblique;
				text-indent: 32.4px;
			}
		}

		.pop-bottom {
			position: absolute;
			bottom: 0;
			width: 100%;
			display: flex;
			justify-content: center;

			.coupon-btn {
				width: 100%;
				background-color: #FFDE21 !important;
				color: #000;
				font-size: 28rpx;
				// height:80rpx;
				// line-height: 80rpx;
				border-radius: 20rpx;
			}
		}
	}



	.btn-box {
		width: 100%;
		position: fixed;
		bottom: 5%;

		.btn {
			width: calc(100% - 60rpx);
			background: linear-gradient(to right, #1d4350, #a43931);
			color: #fff;
			border-radius: 40rpx;
			text-align: center;
			font-size: 32rpx;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
</style>