<template>
	<view>
		<up-popup :show="confirmordershow" :round="20" :safeAreaInsetBottom="false" :zIndex="105"
		close-on-click-overlay
			:overlayStyle="{ zIndex: 98 }" @close="close">
			<!-- 头部内容 -->
			<view class="container">
				<scroll-view scroll-y class="scroll-view">
					<view class="head">
						<view class="head_bg"></view>
						<view class="tips">
							<image class="informIcon"
								src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/informIcon.png"
								mode="aspectFill" />
							<text class="informText">温馨提示：请适量点餐，避免浪费</text>
						</view>
					</view>

					<view class="card" v-if="orderinfo.detailMap">
						<!-- 订单头部 -->
						<view class="card_item" v-for="(value, key) in orderinfo.detailMap" :key="key">
							<view class="head">
								<view class="head_left">
									<text class="placeNum">第{{key}}次下单</text>
									<!-- <text class="placeTime">{{item.placeTime}}</text> -->
								</view>
							</view>
							<!-- 订单详情 -->
							<view class="shop-info">
								<view class="item" v-for="item in value" :key="item.id">
									<view class="cover">
										<up-image width="76" height="76" radius="16" :src="item.productImg"
											v-if="item.productId!=-999"></up-image>
										<up-image width="76" height="76" radius="16"
											:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/table.png'"
											mode="heightFix" v-else></up-image>
									</view>
									<view class="info">
										<text class="productName">{{item.productName}}</text>
										<text class="productSkuName"
											v-if="item.skuName">{{item.skuName}}</text>
									</view>

									<view class="price">
										<view class="priceAmount">
											￥{{shopInfo.isVip ==1 && shopInfo.isMemberPrice==1?(item.memberPrice||item.price):item.price}}
										</view>
										<view class="num">x{{item.num}}</view>
									</view>
								</view>
							</view>
							<view class="semicircle_icon" v-if="index > 0">
								<view class="semicircle_left_icon"></view>
								<view class="semicircle_right_icon"></view>
							</view>
						</view>
					</view>

					<!-- 订单内容区域 -->
					<view class="content_box">
						<view class="content">
							<view class="title"> {{ shopInfo.name }} </view>
							<view class="list_item" v-for="(item,index) in cartList" :key="item.id">
								<view class="left">
									<image class="img" :src="item.coverImg" mode="aspectFill" />
									<view class="center">
										<text class="center_title"> {{item.name}} </text>
										<text class="type" v-if="item.skuList && item.type == 'sku'">
											<text v-for="i in item.skuList" :key="i.id">
												{{item.cartListinfo.sku_id == i.id ? i.name :""}}
											</text>
										</text>

										<text class="type" v-if="item.type == 'package'">
											<text v-for="(a,b) in dataprocessing(item.cartListinfo)" :key="b">
												<text v-for="i in a.goods" :key="i.proId" style="margin-left: 4rpx;">
													{{i.proName }}
												</text>
											</text>
										</text>

										<text class="num"> X{{ ifcartNumber(item) }}</text>
									</view>
								</view>
								<text class="price">
									￥{{shopInfo.isVip ==1 && shopInfo.isMemberPrice==1?(item.memberPrice||item.salePrice):item.salePrice}}
								</text>
							</view>
						</view>
					</view>

					<!-- 订单备注 -->
					<view class="remark">
						<view class="remark_bg">
							<view class="remark_title">订单备注</view>
							<u-textarea class="remark_value" placeholder="请填写口味、偏好等要求" :type="'textarea'"
								v-model="remark" :clearable="true" />
						</view>
					</view>

					<view style="width: 100%;height: 200rpx;"> </view>
					<view class="bottom">
						<view class="bottom_left">
							<text style="margin-bottom: 5rpx;">实付金额</text>
							<text class="totalAmount">￥{{ totalPrices }} </text>
						</view>
						<block>
							<view class="paymentBtnText" @tap="$u.debounce(orderdetail, 500)"> 提交订单 </view>
						</block>
					</view>
				</scroll-view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		defineProps,
		computed,
		defineEmits,
		watch,
		watchEffect
	} from 'vue'

	import paymentMethod from '@/components/paymentMethod.vue'; //支付方式

	// 结账管理
	import {
		Memberpay
	} from '@/stores/pay.js';

	const storeMemberpay = Memberpay();

	const props = defineProps({
		cartList: {
			type: Array,
			default: []
		},
		cartLists_count: {
			type: Number,
			default: 0
		},
		confirmordershow: {
			type: Boolean
		},
		orderinfo: {
			type: Object,
			default: {
				detailMap: {}
			}
		},
	});

	const remark = ref('')

	// 定义自定义事件
	const emits = defineEmits(['customevent', 'close']);

	const close = () => {
		emits("close", false)
	}

	import {
		useCartStore
	} from '@/stores/order.js';

	const cartStore = useCartStore()

	const shopInfo = uni.cache.get('shopInfo')

	const shopTable = uni.cache.get('shopTable')

	const tableCode = uni.cache.get('tableCode')

	// 开始计算费用

	// 打包费
	// const packFee = computed(() => cartStore.getTotalPackFee(props.cartList).value);

	// 计算购物车商品费用
	// const totalPrices = computed(() => cartStore.getTotalTotalPrices(props.cartList));

	// 计算购物车商品费用
	const totalPrices = computed(() => {
		let combinedArray = [];
		for (const key in props.orderinfo.detailMap) {
			if (props.orderinfo.detailMap.hasOwnProperty(key)) {
				let subArray = props.orderinfo.detailMap[key];
				combinedArray = [...combinedArray, ...subArray]
			}
		}
		// 购物车总数价格
		let cartone = combinedArray.reduce((total, item) => {
			// 是否启用会员价 0否1是
			if (shopInfo.isVip == 1 && shopInfo.isMemberPrice == 1) {
				// memberPrice会员价
				return total + (parseFloat(item.memberPrice || item.price) * parseFloat(item.num - item
					.returnNum));
			} else {
				// salePrice销售价
				return total + (parseFloat(item.price || 0) * parseFloat(item.num - item.returnNum));
			}
		}, 0);
		// 购物车总数价格
		let cart = props.cartList.reduce((total, item) => {
			// 是否启用会员价 0否1是
			if (shopInfo.isVip == 1 && shopInfo.isMemberPrice == 1) {
				// memberPrice会员价
				return total + parseFloat(item.memberPrice || item.salePrice) * parseFloat(item
					.cartNumber);
			} else {
				// salePrice销售价
				return total + parseFloat(item.salePrice || 0) * parseFloat(item.cartNumber);
			}
		}, 0);
		cart = cartone + cart
		// 向上取整并保留两位小数
		return parseFloat(cart.toFixed(2));
	});

	// 餐位费
	const getTotalSeatcharge = computed(() => {
		// 是否免除桌位费 0 否 1 是
		let tableFeeTotals = 0

		if (isTableFee == 0 && dinersNum) {
			tableFeeTotals = parseFloat(dinersNum) * parseFloat(tableFee)
		}
		return parseFloat(cart.toFixed(2));
	});

	//总价格
	const totalCost = ref(0);


	watchEffect(() => {
		// if (props.cartList.length > 0) {
		// 	// 打包费  计算购物车商品费用  餐位费
		// 	const sum = (is_type.value != 0 ? packFee.value : 0) + totalPrices.value + (is_type.value == 0 ?
		// 		Seatcharge.value : 0);
		// 	totalCost.value = Math.round(sum * 100) / 100;
		// }
	});

	// 监听送餐/打包切换
	const tabClick = (item, index) => {
		is_type.value = index
		// this.getchoseEatModel('tabClick', index, item);
	}

	// 支付方式切换
	const paymentmethod = reactive({
		radiovalue: 1,
		paymentBtnText: "余额支付",
		payType: ''
	})
	const groupChange = (e) => {
		paymentmethod.radiovalue = e.type;
		paymentmethod.paymentBtnText = e.name;
		paymentmethod.payType = e.payType;
	}

	// 提交订单
	const orderdetail = async () => {
		if (props.cartList.length > 0) {
			let res = await storeMemberpay.actionscreateOrder({
				dineMode: 'dine-in', //堂食 dine-in 外带 take-out 外卖 take-away
				seatNum: uni.cache.get('dinersNum') ? uni.cache.get('dinersNum') : '', //用餐人数
				// packFee: packFee.value, //打包费
				packFee: 0, //打包费
				originAmount: totalPrices.value, //订单原金额（包含打包费） 不含折扣价格 不含餐位费
				remark: remark.value, //备注
				placeNum: props.orderinfo.placeNum + 1, //当前订单下单次数
				waitCall: '', //是否等叫 0 否 1 等叫
				orderId: props.orderinfo.id,
				userId: uni.cache.get('userInfo').id || '' //
			})
			// 清空购物车
			emits('customevent', {
				type: 'shopping',
				table_code: uni.cache.get('tableCode'),
				shop_id: uni.cache.get('shopId'),
				operate_type: 'cleanup',
			})
			uni.reLaunch({
				url: '/pages/order/detail?orderId=' + res.id + '&shopId=' + uni.cache.get('shopId')
			})
		} else {
			uni.reLaunch({
				url: '/pages/order/detail?orderId=' + props.orderinfo.id + '&shopId=' + uni.cache.get(
					'shopId')
			})
		}

	}

	const dataprocessing = computed(() => {
		return (item) => {
			let res = null
			try {
				res = JSON.parse(item.pro_group_info)
			} catch (error) {
				//TODO handle the exception
			}
			return res
		};
	})

	const thisdata = reactive({
		opacitys: false,
		toplist: {
			name: '确认订单'
		},
		eatModel: [],
		isPointsChecked: false,
		calcUsablePointsData: null,
		order: {
			phone: "",
		},
		userCouponInfos: [],
		selectCouponData: [],
		freeDingConfig: null,
		cartLists: [],
		freeCheck: false,
		freeDisabled: false,
		totalPrice: 0, // 小计金额
		totalAmount: 20, // 支付金额
		remark: "", // 备注
		radiovalue: 1, // 支付方式
		ispws: false, // 输入支付密码 
		payPasswordShow: false,
		listinfoid: null,
		isSocket: false,
		socketTicket: null,
		orderAMeal: true,
		shopId: null,
		shopInfo: {},
		isShow: false,
	})

	// 定义 ifcartNumber 计算属性方法
	const ifcartNumber = computed(() => {
		return (item) => {
			// 如果 item 为空或者 cartNumber 不是字符串类型，返回 0
			if (!item || typeof item.cartNumber !== 'string') {
				return 0;
			}
			let numValue = parseFloat(item.cartNumber);
			if (isNaN(numValue)) {
				// 如果转换结果是 NaN，说明 cartNumber 不是有效的数字字符串，返回 0
				return 0;
			}
			// type string  商品类型 single-单规格商品 sku-多规格商品 package-套餐商品 weight-称重商品 coupon-团购券
			if (item.type === 'weight') {
				// 如果类型是称重重量，将值保留两位小数
				return parseFloat(numValue.toFixed(2));
			} else {
				// 如果类型是整数，将值转换为整数
				return Math.round(numValue);
			}
			// 如果类型不匹配，返回原始值
			return item.cartNumber;
		};
	})
</script>

<style lang="scss" scoped>
	.container {
		border-radius: 30rpx 30rpx 0 0;
		max-height: 80vh;
		overflow: auto;

		.scroll-view {
			max-height: 80vh;
			margin-bottom: 190rpx;

			.card {
				// background-color: #fff;
				border-radius: 20upx;
				margin-bottom: 28upx;
				position: relative;

				.card_item {
					display: flex;
					flex-direction: column;
					position: relative;
					padding: 0 34rpx;

					.head {
						display: flex;
						justify-content: space-between;
						// padding: 32rpx 0;

						.head_left {
							display: flex;
							align-items: center;

							.placeNum {
								font-weight: bold;
								font-size: 32rpx;
								color: #333333;
								margin-right: 32rpx;
								flex-shrink: 0;
							}

							.placeTime {
								font-weight: 400;
								font-size: 32rpx;
								color: #666666;
								flex-shrink: 0;
							}
						}

					}

					.shop-info {
						border-bottom: 2rpx dashed #e5e5e5;

						.item:nth-child(1) {
							margin-top: 0;
						}

						.item {
							margin-bottom: 32rpx;
							display: flex;

							.cover {}

							.info {
								flex: 1;
								display: flex;
								flex-direction: column;
								padding-left: 16upx;

								.productName {
									font-weight: bold;
									font-size: 28rpx;
									color: #333333;
									margin-top: 20rpx;
								}

								.productSkuName {
									font-weight: 400;
									font-size: 24rpx;
									color: #999999;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 3;
									overflow: hidden;
									text-overflow: ellipsis;
								}

								.n {
									font-size: 24upx;
									color: #999;
								}
							}

							.price {
								display: flex;
								flex-direction: column;
								align-items: flex-end;
								padding-left: 68rpx;

								.priceAmount {
									font-weight: 500;
									font-size: 28rpx;
									color: #333333;
									margin-top: 26rpx;
								}

								.num {
									font-weight: 400;
									font-size: 24rpx;
									color: #999999;
									margin-top: 22rpx;
								}
							}
						}
					}

					.status {
						align-self: flex-end;
						width: 92rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						background: #999999;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
						margin-top: 32rpx;
					}

					.totalAmount {
						width: 100%;
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;
						padding: 32rpx 0;
						border-bottom: 2rpx dashed #e5e5e5;

						.label {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}

						.price {
							font-weight: bold;
							font-size: 36rpx;
							color: #333333;
						}
					}

					.semicircle_icon {
						width: 100%;
						position: absolute;
						top: -22.5rpx;
						left: 0;
						display: flex;
						justify-content: space-between;

						.semicircle_left_icon {
							width: 45rpx;
							height: 45rpx;
							margin-left: -22.5rpx;
							background-color: #f9f9f9;
							border-radius: 50%;
							// box-shadow: inset -20rpx 0rpx 22rpx -20rpx rgba(87, 86, 86, 0.35);

						}

						.semicircle_right_icon {
							width: 45rpx;
							height: 45rpx;
							margin-right: -22.5rpx;
							background-color: #f9f9f9;
							border-radius: 50%;
							// box-shadow: inset 13rpx 0rpx 16rpx -9rpx rgba(87, 86, 86, 0.35);

						}
					}
				}

				.cell-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 32rpx 34rpx 0 34rpx;

					.label {
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						padding-bottom: 32rpx;
					}

					.val {
						display: flex;
						align-items: flex-end;
						padding-bottom: 32rpx;
						border-bottom: 2rpx dashed #e5e5e5;

						view:nth-child(1) {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							margin-right: 42rpx;
						}

						view:nth-child(2) {
							display: flex;
							align-items: flex-end;
							font-weight: bold;
							font-size: 36rpx;
							color: #333333;
						}
					}

					.val.column {
						display: flex;
						flex-direction: column;

						.productCoupon {
							display: flex;
							align-items: flex-end;
							margin: 0 0 10rpx 0;

							.name {
								font-weight: 400;
								font-size: 26rpx;
								color: #999;
								margin: 0;
							}

							.num {
								font-weight: 400;
								font-size: 26rpx;
								color: #999;
								margin: 0 30rpx;
								line-height: 20rpx;
							}

							.amount {
								font-weight: bold;
								font-size: 26rpx;
								color: #333;
							}
						}
					}
				}

				.favorable {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30rpx;
					box-sizing: border-box;
					padding-bottom: 26rpx;
					padding-top: 26rpx;
					border-bottom: 2rpx solid #E5E5E5;

					.favorable_left {
						display: flex;
						align-items: center;

						.icon {
							width: 40rpx;
							height: 40rpx;
							margin-right: 16rpx;
						}

						.name {
							font-size: 28rpx;
							font-weight: 400rpx;
							color: #333;
						}
					}

					.favorable_right {
						display: flex;
						align-items: center;

						.favorable_right_text {
							font-size: 24rpx;
							color: #999;
							font-weight: 400rpx;
						}

					}

					.favorable_right {
						.column {
							display: flex;
							flex-direction: column;
							align-items: flex-end;

							.favorable_right_text {
								margin-bottom: 10rpx;

								text:nth-child(1) {
									font-size: 26rpx;
									color: #999;
								}

								text:nth-child(2) {
									font-size: 26rpx;
									color: #999;
									margin: 0 30rpx;
								}

								text:nth-child(3) {
									font-size: 26rpx;
									color: #333;

								}
							}
						}
					}

					.favorable_right.column {
						align-items: flex-start;
					}
				}

				.favorable.column {
					align-items: flex-start;
				}

				.cell-item.column {
					align-items: flex-start;
				}

				.total-wrap {
					width: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					padding: 0 34rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-top: 64rpx;

					.price {
						font-weight: bold;
						font-size: 36rpx;
					}
				}



				.order_footer {
					display: flex;
					flex-direction: column;
					padding: 34rpx;
					position: relative;



				}


			}

			.head {
				width: 100%;
				padding: $uni-spacing-row-base;
				box-sizing: border-box;
				position: relative;

				.head_bg {
					height: 456rpx;
					// background: linear-gradient(180deg, #E8AD7B 0%, #F5F5F5 100%);
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					margin: auto;
				}

				.tips {
					width: 100%;
					height: 64rpx;
					line-height: 64rpx;
					background: #FFF8E8;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					padding: 0 16rpx;
					box-sizing: border-box;
					position: relative;
					z-index: 1;
					display: flex;
					align-items: center;

					.informIcon {
						width: 26.79rpx;
						height: 24.06rpx;
						margin-right: 8rpx;
					}

					.informText {
						font-size: $uni-font-size-base;
						color: #FF803D;
						font-weight: 400;
					}
				}

				.tabBox {
					width: 100%;
					margin-top: 52rpx;
					position: relative;
					z-index: 1;

					.tab {
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-radius: 22rpx 22rpx 0 0;
						background-color: $uni-bg-color;

						.tab_item {
							width: 50%;
							height: 90rpx;
							line-height: 90rpx;
							display: flex;
							align-items: center;
							padding-left: 30rpx;
							box-sizing: border-box;
							background-color: #FEFBF8;
							border-radius: 22rpx 22rpx 0 0;
							position: relative;

							.title {
								font-weight: 500;
								font-size: 28rpx;
								color: #999999;
								position: relative;
								z-index: 1;
							}

							.title.active {
								color: #E8AD7B;
							}

							.icon {
								width: 48rpx;
								height: 48rpx;
								margin-right: 16rpx;
								position: relative;
								z-index: 1;
							}
						}

						.tab_item.active {
							background-color: #fff;
						}

						// .tab_item.active:after {
						//  content: "";
						//          position: absolute;
						//          top: 0;
						//          left: -4px;
						//          width: 40px;
						//          height: 26px;
						//          background: orange;
						// }
						.tab_item.active:before {
							content: "";
							position: absolute;
							top: -20rpx;
							left: 0;
							right: 0;
							bottom: 0;
							border-radius: 2px;
							background: #fff;
							transform: skewX(0deg);
						}

						.tab_item1.active:before {
							border-radius: 22rpx 40rpx 0 0;
						}

						.tab_item2.active:before {
							border-radius: 40rpx 22rpx 0 0;
						}
					}

					.table {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 30rpx;
						box-sizing: border-box;
						height: 90rpx;
						background-color: $uni-bg-color;
						border-radius: 0 0 22rpx 22rpx;

						.table_left {
							display: flex;
							align-items: center;

							.icon {
								width: 32.86rpx;
								height: 39.07rpx;
								margin-right: 24rpx;
							}

							.title {
								display: flex;
								align-items: center;
								color: #E8AD7B;
							}
						}

						.value {
							font-weight: 500;
							font-size: 32rpx;
							color: #333333;
						}
					}

					.pack {
						display: flex;
						flex-direction: column;
						padding: 30rpx;
						box-sizing: border-box;
						background-color: $uni-bg-color;
						border-radius: 0 0 22rpx 22rpx;

						.top {
							display: flex;
							flex-direction: column;
							margin-top: 8rpx;

							.title {
								font-size: 28rpx;
								color: #333;
								font-weight: bold;
								margin-bottom: 16rpx;
							}

							.address {
								font-size: 24rpx;
								font-weight: 400;
								color: #999;
							}
						}

						.list {
							display: flex;
							flex-direction: column;

							.item {
								height: 70rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-size: 28rpx;

								.lable {
									color: #666;
									font-weight: 500;
								}

								.getPhone {
									display: flex;
									align-items: center;

									.u-input {
										width: 340rpx;
										border: none;

										input {
											font-size: 24rpx;
											color: #333;

										}

										.input-placeholder {
											font-size: 24rpx;
										}
									}
								}

								.text,
								.getBtn {
									color: #E8AD7B;
								}

								.getBtn {
									border-radius: 12rpx;
									border: 2rpx solid #E8AD7B;
									padding: 8rpx 20rpx;
									box-sizing: border-box;
								}
							}
						}

					}
				}

				.addDish {
					width: 176rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					background: #FFF8E8;
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					position: relative;
					z-index: 1;
				}

				.tabBox_t {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					padding: 32rpx 24rpx;
					background-color: #fff;
					border-radius: 18rpx;
					display: flex;
					flex-direction: column;
					position: relative;
					z-index: 1;
					margin-top: 32rpx;
				}

				.shopName {
					margin-bottom: 16rpx;
				}

				.tableName {
					display: flex;

					.name {
						margin-right: 16rpx;
					}

					.num {
						border-left: 2rpx solid #d6d6d6;
						padding-left: 16rpx;
					}
				}



			}

			.content_box {
				padding: 0 20rpx;
				box-sizing: border-box;
				margin-top: 10rpx;
				position: relative;
				z-index: 1;

				.content {
					background-color: $uni-bg-color;
					border-radius: 22rpx;
					display: flex;
					flex-direction: column;
					padding: 30rpx 0;
					box-sizing: border-box;

					.title {
						font-size: 28rpx;
						color: #666;
						margin-bottom: 32rpx;
						padding: 0 30rpx;
						box-sizing: border-box;
					}

					.list_item {
						display: flex;
						align-items: center;
						margin-bottom: 32rpx;
						padding: 0 30rpx;
						box-sizing: border-box;

						.left {
							width: 100%;
							display: flex;
							align-items: flex-start;

							.img {
								width: 142rpx;
								height: 142rpx;
								margin-right: 34rpx;
								flex-shrink: 0;
								border-radius: 20rpx;
							}

							.center {
								width: 100%;
								display: flex;
								flex-direction: column;
								align-items: flex-start;

								.center_title {
									font-size: 32rpx;
									font-weight: 500;
									color: #333;
								}

								.type {
									margin: 12rpx 0 10rpx 0;
								}

								.type,
								.num {
									font-size: 24rpx;
									color: #999;
								}

							}
						}

						.num {
							font-size: 24rpx;
							color: #999;
						}

						.price {
							font-size: 32rpx;
							color: #333;
							font-weight: 500;
						}
					}

					.cell_item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 32rpx;
						padding: 0 30rpx;

						.lable {
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
						}

						.value {
							display: flex;
							align-items: flex-end;

							view:nth-child(1) {
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								margin-right: 16rpx;
							}

							view:nth-child(2) {
								font-weight: bold;
								font-size: 28rpx;
								color: #333333;
							}
						}
					}

					.favorable {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 30rpx;
						box-sizing: border-box;
						padding-bottom: 26rpx;
						padding-top: 26rpx;
						border-bottom: 2rpx solid #E5E5E5;

						.favorable_left {
							display: flex;
							align-items: center;

							.icon {
								width: 40rpx;
								height: 40rpx;
								margin-right: 16rpx;
							}

							.name {
								font-size: 28rpx;
								font-weight: 400rpx;
								color: #333;
							}
						}

						.favorable_right {
							display: flex;
							align-items: center;

							.favorable_right_text {
								font-size: 24rpx;
								color: #999;
								font-weight: 400rpx;
							}

						}

						.favorable_right {
							>.column {
								display: flex;
								flex-direction: column;
								align-items: flex-end;

								.favorable_right_text {
									margin-bottom: 10rpx;

									text:nth-child(1) {
										font-size: 26rpx;
										color: #999;
									}

									text:nth-child(2) {
										font-size: 26rpx;
										color: #999;
										margin: 0 30rpx;
									}

									text:nth-child(3) {
										font-size: 26rpx;
										color: #333;

									}
								}
							}
						}

						.favorable_right.column {
							align-items: flex-start;
						}
					}

					.favorable.column {
						align-items: flex-start;
					}

					.cell-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 32rpx 34rpx 32rpx 34rpx;

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

						.val {
							display: flex;
							align-items: flex-end;

							view:nth-child(1) {
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								margin-right: 42rpx;
							}

							view:nth-child(2) {
								display: flex;
								align-items: flex-end;
								font-weight: bold;
								font-size: 36rpx;
								color: #333333;
							}
						}

					}

					.totalPrice {
						padding: 32rpx 30rpx;
						box-sizing: border-box;
						// border-top: 2rpx solid #E5E5E5;
						display: flex;
						justify-content: flex-end;
						align-items: flex-end;
						font-size: 32rpx;
						color: #333;
						font-weight: bold;

						.totalPriceNum {
							font-size: 40rpx;
						}
					}
				}
			}

			// 备注
			.remark {
				padding: 0 20rpx;
				margin-top: 32rpx;

				.remark_bg {
					background-color: $uni-bg-color;
					border-radius: 22rpx;
					padding: 32rpx 30rpx;
					box-sizing: border-box;

					.remark_title {
						font-size: 32rpx;
						color: #333;
						font-weight: 500;
						margin-bottom: 16rpx;
					}

					.u-textarea {
						height: 148rpx;
						background-color: #f5f5f5;
						border-radius: 10rpx;
						padding: 32rpx 22rpx !important;
						box-sizing: border-box;

						textarea {
							font-size: 24rpx;
						}
					}

				}
			}





			.bottom {
				width: 100%;
				background: #FFFFFF;
				box-shadow: 0rpx -6rpx 14rpx 2rpx rgba(0, 0, 0, 0.1);
				position: fixed;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx 50rpx 82rpx 50rpx;
				box-sizing: border-box;
				z-index: 9;

				.bottom_left {
					display: flex;
					font-size: 28rpx;
					font-weight: 500;
					color: #333;
					align-items: flex-end;

					.totalAmount {
						font-size: 40rpx;
						font-weight: bold;
						margin-top: 5rpx;
					}
				}

				.paymentBtnText {
					background: #E8AD7B;
					border-radius: 36rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					padding: 14rpx 44rpx;
				}
			}

			.page-total {
				position: inherit;
			}

			.pay-info-wrap {
				padding: 0;
				box-sizing: border-box;

				.info-wrap {
					padding: 64rpx 30rpx 30rpx 30rpx;
					box-sizing: border-box;

					.title {
						align-self: center;
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}
				}

				.info-content {
					.pay-title {
						display: flex;
						align-items: flex-end;
						justify-content: center;
						font-weight: bold;
						width: 100%;
						font-size: 48rpx;
						color: #333;
						margin-top: 48rpx;

						text {
							font-size: 60rpx;
							color: #333;
						}
					}

					.pay-password {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 64rpx;

						.list {
							width: 88rpx;
							height: 88rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							border: 2rpx solid #999;
							border-radius: 8rpx;

							text {
								font-size: 32rpx;
							}
						}

					}

					.hint {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						height: 100rpx;

						text {
							font-size: 28rpx;
							color: #ccc;
						}
					}
				}
			}
		}
	}
</style>