<template>
	<view class="order-create-container">
		<view class="info-cell address-info-cell" @click="jumpToAddress">
			<view class="address-content">
				<view class="address-row-first">
					<image class="address-icon" src="@/static/images/address.png" />
					<text v-if="!addressInfo.id" class="address-placeholder">
						添加收货地址
					</text>
					<template v-else>
						<text class="address-name">
							{{ addressInfo.recipient_name || "" }}
							<text class="address-phone">
								{{ addressInfo.phone || "" }}
							</text>
						</text>
					</template>
				</view>
				<view v-if="addressInfo" class="address-row-second">
					<text class="address-details">
						{{ addressInfo.full_address || "" }}
					</text>
				</view>
				<image v-if="!petOrderAddressId" class="arrow-icon" :src="`${imgPrefix}right-arrow.png`"
					mode="widthFix" />
			</view>
		</view>

		<view v-if="!petOrderId" class="info-cell sliver-info-cell" @click="openSliverModal">
			<view class="flex-row-start sliver-content">
				<image class="sliver-icon" src="./static/sliver-icon.png" mode="widthFix" />
				<view class="sliver-text">
					{{ !sliverInfo.id ? "请选择配送方式" : sliverInfo.name }}
				</view>
				<image class="arrow-icon" :src="`${imgPrefix}right-arrow.png`" mode="widthFix" />
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="info-cell goods-info-cell">
			<template>
				<view class="goods-item" v-for="(item, index) in orderData" :key="index">
					<image class="goods-img" :src="item.item_pic || item.product_pic " mode="aspectFill" />
					<view class="goods-content">
						<view class="goods-row-first">
							<view class="goods-name">{{ item.item_name  || item.product_name }}</view>
							<text class="goods-price">¥{{ item.product_price }}</text>
						</view>
						<view class="goods-row-second">
							<!-- <view class="goods-spec">
								{{ item.shuxing_name || "" }}{{ item.shuxing_name && item.price_name ? ";" : "" }}{{ item.price_name || "" }}
							</view> -->
							<text class="goods-count">共{{ item.number || 1 }}件</text>
						</view>
					</view>
				</view>
			</template>
		</view>

		<view class="info-cell pay-cell">
			<view class="flex-row-between pay-info">
				<text class="pay-label">商品金额</text>
				<text class="pay-value">￥{{ payPrice }}</text>
			</view>
			<view v-if="couponList.length" class="flex-row-between pay-info coupon-row" @click="showCouponModal = true">
				<text class="pay-label">优惠券</text>
				<view class="flex-row-end">
					<text class="coupon-price">
						{{ couponFee ? `- ￥${couponFee}` : "请选择" }}
					</text>
					<image class="arrow-icon" src="@/static/images/arrow_right_black.png" mode="widthFix" />
				</view>
			</view>
			<view class="flex-row-between pay-info">
				<text class="pay-label">运费</text>
				<text class="pay-value">{{ sliverFee ? `￥${sliverFee}` : "包邮" }}</text>
			</view>
			<view class="flex-row-between pay-price">
				<text class="pay-label">需付款</text>
				<text class="pay-total">￥{{ payPrice }}</text>
			</view>
		</view>

		<!-- <view class="flex-row-start info-cell pay-type">
      <image class="pay-icon" src="./static/wx_pay.png" />
      <view class="fs-30 app-fc-main pay-type-text"> 微信支付 </view>
      <image
        class="pay-select-icon"
        src="@/static/images/cart_checked.png"
        mode="widthFix"
      />
    </view> -->
		<view class="info-cell payment-method-cell">
			<view class="payment-item" @click.stop="selectOption1('1')">
				<view class="payment-left">
					<image class="payment-icon" src="@/static/images/wx.png" mode="widthFix" />
					<text class="payment-text">微信支付</text>
				</view>
				<image class="payment-check"
					:src="selected2 ? require('@/static/images/cart_checked.png') : require('@/static/images/unchecked.png')"
					mode="widthFix" />
			</view>
			<view class="payment-item" @click.stop="selectOption2('2')">
				<view class="payment-left">
					<image class="payment-icon" src="@/static/images/wallet.png" mode="widthFix" />
					<text class="payment-text">钱包支付</text>
					<!-- <text class="payment-text">钱包支付(￥{{ walletBalance || '0.00' }})</text> -->

				</view>
				<image class="payment-check"
					:src="selected4 ? require('@/static/images/cart_checked.png') : require('@/static/images/unchecked.png')"
					mode="widthFix" />
			</view>
		</view>

		<!-- 右侧浮动联系客服按钮 -->
		<view class="contact-float-btn"
			:style="{ right: contactBtnRight + 'rpx', bottom: contactBtnBottom +100 +'rpx' }"
			@touchstart="onContactBtnTouchStart" @touchmove="onContactBtnTouchMove" @touchend="onContactBtnTouchEnd"
			@click="handleContactBtnClick">
			<image class="contact-icon" :src="`${imgPrefix}supportStaff.png`" />
			<view class="contact-btn fs-20">
				联系客服
			</view>
		</view>

		<view class="place-view"></view>

		<view class="order-create-bottom">
			<view class="cancel-btn" @click="cancelOrder">
				<text class="cancel-btn-text">取消订单</text>
			</view>
			<view class="pay-btn" @click="confirmPay">
				<text class="pay-btn-text">立即支付</text>
			</view>
		</view>

		<select-modal v-if="showSliverModal" title="请选择配送方式" @close="showSliverModal = false">
			<view class="sliver-content">
				<!-- :class="{ disabled: !serviceOrderList.length && item.id === 2 }" -->
				<view class="flex-row-between sliver-item" v-for="item in sliverTypeList" :key="item.id"
					@click="changeSliverType(item)">
					<text class="fs-32 app-fc-main">{{ item.name }}</text>
					<image class="select-icon" :src="
              item.id === selectSliverInfo.id
                ? require('@/static/images/cart_checked.png')
                : require('@/static/images/unchecked.png')
            " />
				</view>
				<view class="flex-center fs-30 app-fc-white sliver-btn" @click="confirmSliverType">
					确定
				</view>
			</view>
		</select-modal>

		<good-info-modal v-if="showGoodInfoModal" :goods="orderData" @close="showGoodInfoModal = false" />

		<recharge-coupon-modal v-if="showCouponModal" :couponList="usefullCouponList" :price="orderPrice"
			:showOptBtn="true" @useCoupon="useCoupon" @close="showCouponModal = false" />
	</view>
</template>

<script>
	import SelectModal from "@/components/select-modal.vue";
	import GoodInfoModal from "./components/GoodInfoModal.vue";
	import RechargeCouponModal from "@/components/coupon/RechargeCouponModal.vue";
	import {
		getCouponListByOrderPrice,
		getOwnCouponData
	} from "../../../api/coupon";
	import {
		createCartOrder,
		createOrder,
		payOrder
	} from "../../../api/shop";
	import {
		getOrderList
	} from "../../../api/order";
	import {
		ORDER_STATUS_COMPLETED
	} from "../../../pageHome/constants/home";
	import {
		getAddressInfo
	} from "../../../api/address";
	import {
		COUPON_TYPE_GOODS
	} from '../../../constants/app.business';
	import {
		walletTransaction
	} from "../../../api/login";
	import {
		imgPrefix,
		jumpToWeChat
	} from "@/utils/common";

	const sliverList = [{
			name: "快递配送",
			id: 1,
		},
		{
			name: "和服务订单一起随车派送",
			id: 2,
		},
	];

	export default {
		components: {
			SelectModal,
			GoodInfoModal,
			RechargeCouponModal,
		},
		data() {
			return {
				payPrice:0,
				type: "",
				orderData: [],
				addressInfo: {},
				sliverInfo: {},
				selectSliverInfo: {},
				showSliverModal: false,
				sliverTypeList: sliverList,
				showGoodInfoModal: false,
				showCouponModal: false,
				couponList: [],
				serviceOrderList: [],
				useCouponInfo: null, // 当前使用的优惠券信息
				petOrderId: "",
				petOrderAddressId: "",
				orderPrice: 0,
				confirmPrice: 0,
				selected1: false,
				selected2: false,
				selected3: false,
				selected4: true, // 默认选中钱包支付
				recharge: true,
				record: false,
				walletBalance: "1000.00", // 钱包余额，实际应该从接口获取
				imgPrefix,
				WeChat: undefined,
				wallet: "2", // 默认选中钱包支付
				// 联系客服按钮拖拽相关
				contactBtnRight: 0, // 默认右侧距离，始终为0
				contactBtnBottom: 0, // 默认底部距离，需要计算
				isDragging: false, // 是否正在拖拽
				touchStartX: 0, // 触摸开始X坐标
				touchStartY: 0, // 触摸开始Y坐标
				initialRight: 0, // 初始右侧距离
				initialBottom: 0, // 初始底部距离
			};
		},
		computed: {
			goodsImgs() {
				return this.orderData.map((item) => item.goods_pic).filter((v) => !!v);
			},
			sliverFee() {
				return this.orderData.reduce((total, prev) => total + +prev.yunfei, 0);
			},
			couponFee() {
				return +this.useCouponInfo?.card_money || 0;
			},
			usefullCouponList() {
				return this.couponList.filter((v) => +v.card_money < this.orderPrice);
			},
		},
		onLoad(option) {
			// console.log(option,'??')
			// console.log(JSON.parse(option.petList))
			
			// console.log( JSON.parse(),'?')
			const {
				type,
				petOrderId = "",
				petOrderAddressId = ""
			} = option;
			this.type = type;
			this.petOrderId = petOrderId;
			this.petOrderAddressId = petOrderAddressId;

			// 初始化联系客服按钮位置
			const systemInfo = uni.getSystemInfoSync();
			const windowHeight = systemInfo.windowHeight;
			// 计算底部距离：calc(35vh - 130rpx - 48rpx) 转换为rpx
			// 35vh = windowHeight * 0.35，转换为rpx (750rpx = windowHeight px)
			const vh35InRpx = (windowHeight * 0.35 / windowHeight) * 750;
			this.contactBtnBottom = vh35InRpx - 130 - 48;

			// 随车购收货地址id
			if (petOrderAddressId) {
				getAddressInfo(petOrderAddressId).then((res) => {
					this.addressInfo = {
						...res?.info,
					};
				});
			}
			uni.$on("selectAddress", this.addressChange);

			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on("createOrder", (data) => {
				this.orderData = data?.goodList || [];
				this.payPrice = (data?.goodList || []).reduce((sum, item) => sum + Number(item.product_price * item.number || 0), 0);
				console.log(data,'--=?')
				const price = this.orderData.reduce(
					(total, prev) => total + +prev.item_price,
					0
				);
				this.orderPrice = +price.toFixed(2);
				this.confirmPrice = +(this.orderPrice - this.couponFee).toFixed(2);
				this.getCouponList();
				// this.type === "cart" ? this.creatCartOrder(true) : this.createOrder(true);
			});

			// 查询服务订单
			// this.getServiceOrderList();
		},
		methods: {
			// 设置默认使用优惠券
			setDefaultCoupon() {
				let fee = 0;
				let coupon;
				this.couponList.map((v) => {
					if (+v.card_money < this.orderPrice && +v.card_money > fee) {
						fee = +v.card_money;
						coupon = {
							...v
						};
					}
				});
				this.useCouponInfo = coupon;
				// 购物车进来的需要预下单
				if (coupon?.coupon_id) {
					this.type === "cart" ?
						this.creatCartOrder(true) :
						this.createOrder(true);
				}
			},
			// 已支付服务订单
			getServiceOrderList() {
				getOrderList(1, 1, ORDER_STATUS_COMPLETED).then((res) => {
					this.serviceOrderList = res?.info || [];
				});
			},
			// 获取已领取待使用的优惠券列表
			getCouponList() {
				getCouponListByOrderPrice(this.orderPrice, COUPON_TYPE_GOODS).then((res) => {
					this.couponList = res?.info || [];
					// 若接口比与下单接口慢，需要再设置下默认优惠券
					if (!this.useCouponInfo) {
						this.setDefaultCoupon();
					}
				});
			},
			// 创建订单
			createOrder(isPrePay) {
			// console.log(this.addressInfo,'--==?')
				// const {
				// 	goods_id,
				// 	price_id,
				// 	number,
				// 	shuxing_name
				// } = this.orderData?.[0];

				return new Promise((resolve, reject) => {
					if (!isPrePay) {
						// 快递配送/随车订单必填收货地址
						// if (!this.petOrderId) {
							if (!this.addressInfo?.id) {
								uni.showToast({
									title: "请选择收货地址",
									icon: "none",
								});
								return reject();
							}
							if (!this.sliverInfo?.id) {
								uni.showToast({
									title: "请选择配送方式",
									icon: "none",
								});
								return reject();
							}
						// }
						uni.showLoading({
							title: "处理中",
							mask: true,
						});
					}
					// console.log(this.orderData,'--=?')
					const item = {
						product_id:this.orderData[0].id,
						price_id:this.orderData[0].prices[0].id,
						price_desc:this.orderData[0].product_desc,
						product_name:this.orderData[0].product_name,
						product_pic:this.orderData[0].product_pic,
						number:this.orderData[0].number,
						product_price:this.orderData[0].prices[0].actual_price
					}

				createCartOrder({
						type:this.sliverInfo.id,
						original_price:this.orderData[0].prices[0].original_price, //付款金额
						actual_price:this.payPrice + '',   //付款金额
						reduction_amount:'0', 
						pay_amount:this.payPrice +'', //付款金额
						pay_type: Number(this.WeChat)  || Number(this.wallet),  //微信和钱包type
						address_id:this.addressInfo.id, //地址id
						address:this.addressInfo.full_address,  //地址
						name:this.addressInfo.recipient_name,
						phone:this.addressInfo.phone,
						note:'',  //备注
						items:item
						})
						.then((res) => {
							if (isPrePay) {
								this.confirmPrice = +(res?.info?.pay_price || 0).toFixed(2);
								this.orderPrice = +(res?.info?.price || 0).toFixed(2);
								!this.useCouponInfo && this.setDefaultCoupon();
							} else {

								if (this.WeChat == 1) {
									this.pay(res?.data);
								} else if (this.wallet == 2) {
									this.buyService(res?.data);
								}
							}
							resolve();
						})
						.catch((err) => {
							uni.hideLoading();
							uni.showToast({
								title: err || "支付失败",
								icon: "none",
							});
							reject();
						});
				});
			},
			buyService(order) {
				uni.showLoading({
					title: "处理中",
					mask: true,
				});
				const value = (this.$store.state && this.$store.state.user && this.$store.state.user.userInfo) || {};
				//  console.log(this.selectService,'---')
				const data = {
					wallet_id: value.wallet_id,
					total_fee: this.payPrice,
					type: 4,
					order_id: order.order_id,
					order_no: order.order_no
				}
				walletTransaction(data).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						uni.requestSubscribeMessage({
							tmplIds: ['QoTeQwj4xw2UQMK5jI67MzAVOo6og76oqZ7BDIJW7cE',
								'GPWlTkaNbi7JqvxltLKuZZMtKedSZfEKlirV7yOUu-0'
							], // TEMPLATE_ID替换为选用的模版id
							success(res) {
								uni.hideLoading()
								if (res['QoTeQwj4xw2UQMK5jI67MzAVOo6og76oqZ7BDIJW7cE'] === 'accept') {
									// setSubscribeStatus(true, '已订阅')
									uni.showToast({
										title: '订阅成功',
										icon: 'success',
									})
								}
								if (res['GPWlTkaNbi7JqvxltLKuZZMtKedSZfEKlirV7yOUu-0'] === 'accept') {
									// setSubscribeStatus(true, '已订阅')
									uni.showToast({
										title: '订阅成功',
										icon: 'success',
									})
								}
							},
							fail() {
								uni.showToast({
									title: '订阅失败',
									icon: 'error',
								})
							},
							complete: () => {
								// isSubscribing = false
							},
						})
						if (this.petOrderId) {
							this.jumpToPetOrder();
							return;
						}
						uni.redirectTo({
							url: `/pages/client/order/details?id=${order.order_id}`,
						});

					} else if (res.code == 400) {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})

					}
				});
			},
			// 创建购物车订单
			creatCartOrder(isPrePay) {
				return new Promise((resolve, reject) => {
					if (!isPrePay) {
						// console.log(this.addressInfo,'--=!')
						// 快递配送/随车订单必填收货地址
						if (!this.petOrderId) {
							if (!this.addressInfo?.id) {
								uni.showToast({
									title: "请选择收货地址",
									icon: "none",
								});
								return reject();
							}
							if (!this.sliverInfo?.id) {
								uni.showToast({
									title: "请选择配送方式",
									icon: "none",
								});
								return reject();
							}
						}
						uni.showLoading({
							title: "处理中",
							mask: true,
						});
					}
					// console.log(this.orderData,'--=')
					// console.log(this.sliverInfo,'==--==')

					createCartOrder({
						type:this.sliverInfo.id,
						original_price:this.orderData[0].prices[0].original_price, //付款金额
						actual_price:this.payPrice + '',   //付款金额
						reduction_amount:'0', 
						pay_amount:this.payPrice + '', //付款金额
						pay_type: Number(this.WeChat)  || Number(this.wallet),  //微信和钱包type
						address_id:this.addressInfo.id, //地址id
						address:this.addressInfo.full_address,  //地址
						name:this.addressInfo.recipient_name,
						phone:this.addressInfo.phone,
						note:'',  //备注
						items:this.orderData
						})
						.then((res) => {
							if (isPrePay) {
								this.confirmPrice = +(res?.data?.pay_amount || 0).toFixed(2);
								this.orderPrice = +(res?.data?.original_price || 0).toFixed(2);
								!this.useCouponInfo && this.setDefaultCoupon();
							} else {
								if (this.WeChat == 1) {
									this.pay(res?.data);
								} else if (this.wallet == 2) {
									this.buyService(res?.data);
								}
							}
							return resolve();
						})
						.catch(() => {
							return reject();
						});
				});
			},
			// 支付订单
			pay(orderId) {
				payOrder({
						type:4,
						total_fee: Number(this.payPrice),
						order_id:orderId.order_id,
						order_no:orderId.order_no
					})
					.then((res) => {
						const payData = res?.data || {};
						console.log(payData,'--=')
						uni.requestPayment({
							provider: "wxpay",
							timeStamp: payData.timeStamp,
							nonceStr: payData.nonceStr,
							package: payData.package,
							signType: payData.signType,
							paySign: payData.paySign,
							success: (res) => {
								console.log(res,'--==')
								uni.hideLoading();
								uni.showToast({
									title: "支付成功",
									icon: "none",
								});
								uni.requestSubscribeMessage({
									tmplIds: ['QoTeQwj4xw2UQMK5jI67MzAVOo6og76oqZ7BDIJW7cE',
										'GPWlTkaNbi7JqvxltLKuZZMtKedSZfEKlirV7yOUu-0'
									], // TEMPLATE_ID替换为选用的模版id
									success(res) {
										uni.hideLoading()
										if (res['QoTeQwj4xw2UQMK5jI67MzAVOo6og76oqZ7BDIJW7cE'] ===
											'accept') {
											// setSubscribeStatus(true, '已订阅')
											uni.showToast({
												title: '订阅成功',
												icon: 'success',
											})
										}
										if (res['GPWlTkaNbi7JqvxltLKuZZMtKedSZfEKlirV7yOUu-0'] ===
											'accept') {
											// setSubscribeStatus(true, '已订阅')
											uni.showToast({
												title: '订阅成功',
												icon: 'success',
											})
										}
									},
									fail() {
										uni.showToast({
											title: '订阅失败',
											icon: 'error',
										})
									},
									complete: () => {
										// isSubscribing = false
									},
								})

								if (this.petOrderId) {
									this.jumpToPetOrder();
									return;
								}
								uni.redirectTo({
									url: `/pages/client/order/details?id=${orderId.order_id}`,
								});
							},
							fail: (err) => {
								uni.hideLoading();
								uni.showToast({
									title: err?.msg || "支付失败",
									icon: "none",
								});
								uni.redirectTo({
									url: `/pages/client/order/details?id=${orderId.order_id}`,
								});
							},
						});
					})
					.catch((err) => {
						uni.hideLoading();
						uni.showToast({
							title: err || "支付失败",
							icon: "none",
						});
						uni.redirectTo({
							url: `/pages/client/order/details?id=${orderId.order_id}`,
						});
					});
			},
			selectOption1(v) {
				this.WeChat = v
				this.wallet = ''
				console.log(this.WeChat)
				this.selected1 = false;
				this.selected2 = true;
				this.selected3 = true;
				this.selected4 = false;
			},
			selectOption2(v) {
				this.WeChat = ''
				this.wallet = v
				console.log(this.wallet)
				this.selected1 = true;
				this.selected2 = false;
				this.selected3 = false;
				this.selected4 = true;
			},
			// 跳转至宠物订单随车购入口
			jumpToPetOrder() {
				const pages = getCurrentPages();
				const detailsIndex = pages.findIndex((v) =>
					v.route === "pageHome/order/order-detail-page"
				);
				const listIndex = pages.findIndex((v) =>
					v.route === "pages/client/index/index"
				);
				if (detailsIndex > -1) {
					uni.navigateBack({
						delta: pages.length - detailsIndex - 1,
					});
					return
				}
				if (listIndex > -1) {
					uni.navigateBack({
						delta: pages.length - listIndex - 1,
					});
					return
				}
			},
			jumpToAddress() {
				if (this.petOrderAddressId) {
					return;
				}
				uni.navigateTo({
					url: `/pageHome/selectAddress/index?typeSelect=1&addressId=${
          this.addressInfo?.address_id || ""
        }`,
				});
			},
			addressChange(addressInfo) {
				this.addressInfo = addressInfo;
				console.log(this.addressInfo,'?？s')
			},
			confirmSliverType() {
				this.sliverInfo = {
					...this.selectSliverInfo
				};
				this.showSliverModal = false;
				this.$forceUpdate();
			},
			openSliverModal() {
				this.showSliverModal = true;
				this.selectSliverInfo = {
					...this.sliverInfo
				};
				this.$forceUpdate();
			},
			useCoupon(data) {
				this.showCouponModal = false;
				const oldCoupon = {
					...this.useCouponInfo
				};
				// 购物车进来的需要预下单
				if (data.coupon_id) {
					this.useCouponInfo = {
						...data
					};
					if (this.type === "cart") {
						this.creatCartOrder(true).catch(() => {
							this.useCouponInfo = {
								...oldCoupon
							};
						});
					} else {
						this.createOrder(true).catch(() => {
							this.useCouponInfo = {
								...oldCoupon
							};
						});
					}
				}
			},
			jumpToWeChat,
			// 联系客服按钮触摸开始
			onContactBtnTouchStart(e) {
				this.isDragging = false;
				const touch = e.touches[0];
				this.touchStartX = touch.clientX;
				this.touchStartY = touch.clientY;
				this.initialRight = this.contactBtnRight;
				this.initialBottom = this.contactBtnBottom;
			},
			// 联系客服按钮触摸移动
			onContactBtnTouchMove(e) {
				const touch = e.touches[0];
				const deltaX = touch.clientX - this.touchStartX;
				const deltaY = touch.clientY - this.touchStartY;

				// 如果移动距离超过10px，认为是拖拽
				if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {
					this.isDragging = true;
				}

				if (this.isDragging) {
					const systemInfo = uni.getSystemInfoSync();
					const windowHeight = systemInfo.windowHeight;

					// 只处理上下移动，将px转换为rpx
					const deltaYRpx = (deltaY / windowHeight) * 750;

					// 计算新位置（只改变bottom，right始终保持为0）
					// 向上移动时deltaY为负，但bottom值应该减小
					let newBottom = this.initialBottom - deltaYRpx;

					// 限制在屏幕范围内
					// 按钮高度约120rpx
					const btnHeight = 120;

					newBottom = Math.max(0, Math.min(newBottom, windowHeight * 2 - btnHeight));

					// right始终保持为0
					this.contactBtnRight = 0;
					this.contactBtnBottom = newBottom;
				}
			},
			// 联系客服按钮触摸结束
			onContactBtnTouchEnd(e) {
				// 松手后，right重置为0
				this.contactBtnRight = 0;
				this.isDragging = false;
			},
			// 联系客服按钮点击
			handleContactBtnClick() {
				// 如果正在拖拽，不触发点击事件
				if (this.isDragging) {
					return;
				}
				this.jumpToWeChat();
			},
			cancelOrder() {
				uni.showModal({
					title: "提示",
					content: "确定要取消订单吗？",
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack();
						}
					},
				});
			},
			confirmPay() {
				// console.log(this.type, '??')
				if (this.WeChat === undefined && this.wallet === undefined) {
					uni.showToast({
						title: '请选择支付方式',
						icon: "none",
					});
					return
				}
				this.type === "cart" ? this.creatCartOrder() : this.createOrder();
			},
			changeSliverType(item) {
				// if (item.id === 2 && !this.serviceOrderList?.length) {
				//   uni.showToast({
				//     title: "您当前不存在服务订单",
				//     icon: "none",
				//   });
				//   return;
				// }
				this.selectSliverInfo = {
					...item
				};
				this.$forceUpdate();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.order-create-container {
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background: #F7F8FA;

		.info-cell {
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.arrow-icon {
				width: 11rpx;
				height: 18rpx;
				flex-shrink: 0;
			}

			&.address-info-cell {
				.address-content {
					display: flex;
					flex-direction: column;
					width: 100%;
					position: relative;
				}

				.address-row-first {
					display: flex;
					align-items: center;
					width: 100%;
					margin-bottom: 10rpx;
				}

				.address-row-second {
					display: flex;
					width: 100%;
				}

				.address-icon {
					width: 24rpx;
					height: 32rpx;
					flex-shrink: 0;
					margin-right: 12rpx;
				}

				.address-placeholder {
					font-size: 24rpx;
					color: #3D3D3D;
					padding: 20rpx 0rpx;
					padding-bottom: 10rpx;
				}

				.address-name {
					font-size: 28rpx;
					color: #3D3D3D;

					.address-phone {
						margin-left: 8rpx;
					}
				}

				.address-details {
					font-size: 24rpx;
					color: #999;
					margin-left: 36rpx; // 图标宽度24rpx + 间距12rpx
				}

				.arrow-icon {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 11rpx;
					height: 18rpx;
					flex-shrink: 0;
				}
			}

			&.sliver-info-cell {
				.sliver-content {
					display: flex;
					align-items: center;
					width: 100%;
				}

				.sliver-icon {
					width: 34rpx;
					height: 34rpx;
					flex-shrink: 0;
				}

				.sliver-text {
					flex: 1;
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #3D3D3D;
				}
			}

			&.goods-info-cell {
				padding: 0;

				.goods-item {
					display: flex;
					align-items: center;
					width: 100%;
					padding: 24rpx 20rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #F5F5F5;

					&:last-child {
						border-bottom: none;
					}

					.goods-img {
						width: 100rpx;
						height: 100rpx;
						border-radius: 16rpx;
						margin-right: 20rpx;
						flex-shrink: 0;
					}

					.goods-content {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						min-height: 100rpx;
						min-width: 0;
						overflow: hidden;

						.goods-row-first {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 12rpx;

							.goods-name {
								flex: 1;
								font-size: 28rpx;
								color: #3D3D3D;
								line-height: 40rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								margin-right: 20rpx;
							}

							.goods-price {
								flex-shrink: 0;
								font-size: 28rpx;
								color: #3D3D3D;
								font-weight: 500;
							}
						}

						.goods-row-second {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.goods-spec {
								flex: 1;
								font-size: 24rpx;
								color: #999;
								margin-right: 20rpx;
							}

							.goods-count {
								flex-shrink: 0;
								font-size: 24rpx;
								color: #999;
							}
						}
					}
				}

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

					.goods-imgs {
						display: flex;
						align-items: center;
						flex: 1;

						.goods-img-small {
							width: 100rpx;
							height: 100rpx;
							margin-right: 8rpx;
							border-radius: 16rpx;
							flex-shrink: 0;
						}
					}

					.goods-count-wrapper {
						flex-shrink: 0;

						.goods-count-text {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
			}

			&.pay-cell {
				.pay-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 16rpx 0;

					.pay-label {
						font-size: 24rpx;
						color: #9B939A;
					}

					.pay-value {
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}

				.coupon-row {
					.coupon-price {
						font-size: 28rpx;
						color: #FF19A0;
						margin-right: 12rpx;
					}
				}

				.pay-price {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 16rpx;
					margin-top: 16rpx;
					border-top: 1rpx solid #E5E5E5;

					.pay-label {
						font-size: 28rpx;
						color: #3D3D3D;
					}

					.pay-total {
						font-size: 28rpx;
						color: #FF19A0;
						font-weight: 500;
					}
				}
			}

			&.payment-method-cell {
				.payment-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 24rpx 0;

					&:not(:last-child) {
						border-bottom: 1rpx solid #E5E5E5;
					}

					.payment-left {
						display: flex;
						align-items: center;

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

						.payment-text {
							font-size: 24rpx;
							color: #3D3D3D;
						}
					}

					.payment-check {
						width: 36rpx;
						height: 36rpx;
						flex-shrink: 0;
					}
				}
			}

			&.pay-type {
				.pay-icon {
					width: 52rpx;
					height: 52rpx;
					margin-right: 18rpx;
				}

				.pay-select-icon {
					width: 36rpx;
					height: 36rpx;
				}

				.pay-type-text {
					flex: 1;
				}
			}

			&.good-list {
				padding: 20rpx;

				.good-img {
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					border-radius: 20rpx;
				}

				.good-num {
					margin-right: 12rpx;
				}
			}
		}

		.place-view {
			height: 166rpx;
		}

		.order-create-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100vw;
			background: #fff;
			padding: 20rpx 32rpx;
			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
			box-sizing: border-box;
			display: flex;
			align-items: center;
			gap: 20rpx;
			box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.05);

			.cancel-btn {
				flex: 1;
				height: 92rpx;
				border-radius: 92rpx;
				border: 2rpx solid #FF19A0;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: center;

				.cancel-btn-text {
					font-size: 30rpx;
					color: #FF19A0;
					font-weight: 500;
				}
			}

			.pay-btn {
				flex: 1;
				height: 92rpx;
				border-radius: 92rpx;
				background: #FF19A0;
				display: flex;
				align-items: center;
				justify-content: center;

				.pay-btn-text {
					font-size: 30rpx;
					color: #fff;
					font-weight: 500;
				}
			}
		}

		.contact-float-btn {
			position: fixed;
			text-align: center;
			z-index: 100;

			.contact-icon {
				width: 66rpx;
				height: 66rpx;
				margin: auto;
			}

			.contact-btn {
				color: #FFFFFF;
				background-color: #FF19A0;
				border-radius: 257px;
				padding: 6rpx 8rpx;
				transform: translateY(-8px);
			}
		}

		.sliver-content {
			padding: 16rpx 0;

			.sliver-item {
				padding: 52rpx 0;
				margin: 0 52rpx;
				width: calc(100% - 52rpx * 2);
				box-sizing: border-box;
				border-bottom: 1rpx solid #f7f3f7;

				&.disabled {
					opacity: 0.5;
				}

				.select-icon {
					width: 32rpx;
					height: 32rpx;
					margin-left: 20rpx;
				}
			}

			.sliver-btn {
				width: 630rpx;
				height: 92rpx;
				background: #fe019b;
				border-radius: 92rpx;
				margin: 18rpx auto 10rpx;
			}
		}
	}
</style>