<template>
	<view class="container">

		<view class="content-box">
			<!-- <view class="message-box">
				<view class="message-item">
					<view class="item-left"> 订购人电话 </view>
					<view class="item-right">
						<u--input border='none' type='number' maxlength='11' fontSize='14' placeholder="请输入您的订购电话"
							v-model="phoneNumber"></u--input>
					</view>
				</view>
				<u-line margin='20rpx 0'></u-line>
				<view class="message-item">
					<view class="item-left"> 备注 </view>
					<view class="item-right">
						<u--textarea v-model="goodsRemark" placeholder="请输入备注内容" autoHeight></u--textarea>
					</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="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">
								<p class="price red-color"> <span style="font-size: 24rpx;">￥</span>{{ item.price }}</p>
								<span class="false-price">￥{{ item.originalPrice ? item.originalPrice : 0}}</span>
							</view>
						</view>
					</view>
					<view class="item-right">
						<u-number-box v-model="item.quantity" @change="valChange(item,$event)"></u-number-box>
					</view>
				</view>
			</view>

			<!-- <view class="message-box">
				<view class="couon-box">
					<view class="coupon-left">
						<image class="img" src='@/static/images/coupon.png'></image>
						<view>通用优惠</view>
					</view>
					<view class="coupon-right red-color"> -0.1 </view>
				</view>
				<u-line margin='20rpx 0'></u-line>
				<view class="couon-box" @click="openCouponshow">
					<view class="coupon-left">
						<image class="img" src='@/static/images/coupon.png'></image>
						<span>商家优惠券</span>
					</view>
					<view class="coupon-right" >
						<view class=""> {{ coupon_list.couponHistoryDetailList.length == 0 ? '暂无可用' : `${coupon_list.couponHistoryDetailList.length} 张优惠券可用` }} </view>
						<u-icon name="arrow-right" size='13'></u-icon>
					</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-name"> 购买须知 </view>
				<view class="message-text" style="text-indent:32.4px;">
					洗车机常见的类型有高压洗车机和无水洗车机两种，高压洗车机可以配有不同的喷嘴，可实现不同场景下的清洗需求。
					无水洗车机则是一种更为环保的洗车方式，它可以用高科技的化学技术在不用水的情况下清洗车辆。因此，
					在购买洗车机时需要根据自己的实际需求进行选择
				</view>
			</view>
		</view>

		<!-- <u-popup :show="coupon_show" @close="close" mode='bottom' round='20' bgColor='#F4F4F4'>
			<view class="pop-box">
				<view class="pop-title"> 商家优惠券 </view>
				<u-line margin='20rpx 0'></u-line>

				<view class="pop-coupon-box">
				  <view class="pop-item" v-for="(item,index) of coupon_list.couponHistoryDetailList" @click="handlerSelectCoupon(item,index)">
				  	<view class="item-box">
				  		<view class="item-left">
				  			<view class="img-box">
				  				<image class="left-img" src="@/static/images/honglei.png"></image>
				  			</view>
				  			<view class="left-text">
				  				<view class="text-title"> {{ item.couponDTO.name }} </view>
				  				<view class="text"> 到期时间 : {{ item.couponDTO.endTime }} </view>
				  			</view>
				  		</view>
				  		<view class="item-right">
				  			<view class="price red-color">
				  				<span class="price-symbol">￥</span> {{ item.couponDTO.reduce == null ? 0 : item.couponDTO.reduce }}
				  			</view>
				  			<view class="text"> {{ item.couponDTO.name }} </view>
				  		</view>
				  	</view>
				    <view class="item-bottom">
				      <span>{{ item.couponDTO.name }}</span>
				    </view>
				  </view>
				</view>

        <view class="pop-bottom">
          <button class='coupon-btn' @click="handlerSelectCoupon">确定</button>
        </view>
			</view>
		</u-popup> -->

		<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 { maintainCouponPaging } from "@/api/client/mine.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
					// this.handlerInitCouponList(res.data.cartItems)
				})
			},
			// 初始化优惠券列表
			// handlerInitCouponList(cartItems){
			//   let params = {
			//     cartIds:[],
			//     merchantId:this.merchantId
			//   }
			//   cartItems.map(rs=>{
			//     params.cartIds.push(rs.id)
			//   })
			//   // 订单接口 - 根据购物车信息生成确认单信息
			//   generateConfirmOrder(params).then(res=>{
			//     this.coupon_list = res.data
			//     this.coupon_list.couponHistoryDetailList.map(rs=>{
			//       rs.couponDTO.endTime = changeTime(rs.couponDTO.createTime)
			//     })
			//   })
			// },
			// 结算按钮
			handlerSettleBtn() {
				
				// uni.navigateTo({
				// 	url: '/pagesHome/marketer/submitOrder'
				// })
				
				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 {
		min-height: calc(100vh - 40rpx);
		background: linear-gradient(to bottom, #bacff5, #F2F4FA, #fff);
		padding: 20rpx;

		.content-box {
			padding: 20rpx 20rpx 120rpx;
			max-height: calc(100vh - 180rpx);
			overflow-y: auto;

			.message-box {
				padding: 20rpx;
				border-radius: 20rpx;
				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;
				}

				.goods-item {
					margin-bottom: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item-left {
						display: flex;

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

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

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

							.price-box {
								display: flex;
								font-style: italic;
								align-items: center;

								.price {
									font-size: 34rpx;
									font-weight: bold;
									margin-right: 20rpx;
								}

								.false-price {
									color: #CACDD4;
									text-decoration: line-through;
								}
							}
						}
					}
				}

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

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

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

	.red-color {
		color: #FF4B10;
	}

	::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: 90%;
			background: linear-gradient(to right, #1d4350, #a43931);
			color: #fff;
			border-radius: 40rpx;
			text-align: center;
			font-size: 32rpx;
			padding: 20rpx;
		}
	}
</style>