<template>
	<view class="payment-confirm-container" v-if="!initializing">
		<view class="payment-body-container">
			<view class="info-cell" v-if="reservationInfo.addresInfo">
				<view class="info-title-view">
					<image src="@/static/images/address.png" mode="aspectFit" class="info-icon" />
					<text class="app-fc-main fs-28">{{
						reservationInfo.addresInfo.recipient_name
					}}</text>
					<text class="app-fc-main fs-28 phone-text">{{
						reservationInfo.addresInfo.phone
					}}</text>
				</view>
				<view class="address-view">
					<view class="info-icon" />
					<text class="app-fc-normal fs-24 address-text">
						{{
							`${reservationInfo.addresInfo.area_name} ${reservationInfo.addresInfo.full_address}`
						}}
					</text>
				</view>
			</view>
			<view class="info-cell">
				<view class="info-title-view">
					<image src="/pageHome/static/time.png" mode="aspectFit" class="info-icon" />
					<text class="app-fc-main fs-28">{{ reservationTime }}</text>
				</view>
			</view>
			<!-- <view class="info-cell info-pet-cell info-pet-flex">

				<image class="pet-headImg" :src="reservationInfo.petInfo.avatar" mode="" />
				<view>
					<view class="fs-24">
						{{ petName }}
					</view>
					<view class="fs-20 petContext">
						{{ petType }}/{{ sex }}/{{ reservationInfo.petInfo.weight_name }}
					</view>
				</view>
				<detail-cell title="宠物类型" :content="petType" />
				<detail-cell v-if="petHair" title="毛型分类" :content="petHair" />
				<detail-cell title="宠物姓名" :content="petName" />
				<detail-cell title="宠物重量区间" :content="petWeight.weight_name" />

				<view class="line-view"></view>
				<detail-cell
          title="费用预估"
          :content="`¥${showPrice || '0.00'}`"
          :title-mark="true"
        />
			</view> -->
			<view class="info-cell info-pet-cell" v-if="reservationInfo.orderInfo.parkState">
				<detail-cell title="停车状况" :content="reservationInfo.orderInfo.parkState" :content-mark="false"
					:title-mark="true" />
			</view>
		</view>
		<view class="recharge-method2">
			<view class="pet-count-summary">
				<view class="pet-count-summary-title">洗护服务</view>
				<view class="pet-count-summary-value" v-if="petCountSummary">{{ petCountSummary }}</view>
			</view>
			<view v-for="(petItem, pIndex) in petWithItemsListForDisplay" :key="pIndex" class="pet-card">
				<view class="pet-card-header" @click="togglePetCard(pIndex)">
					<view class="pet-card-info">
						<view class="pet-card-left">
							<image class="pet-avatar-small" :src="getPetCardAvatar(petItem)" mode="aspectFit" />
							<view class="pet-info-small">
								<text class="pet-name-small">{{ petItem.name || petItem.pet_nickname || '宠物' }}</text>
								<text class="pet-desc-small">{{ petCardMeta(petItem) }}</text>
							</view>
						</view>
						<text class="pet-card-toggle">{{ collapsedPetIndex === pIndex ? '展开' : '收起' }}</text>
					</view>
				</view>
				<view v-if="collapsedPetIndex !== pIndex" class="pet-card-body">
					<view class="pet-card-row">
						<text class="pet-card-label">实际宠物重量区间</text>
						<text class="pet-card-value">{{ petItem.weight_name || (reservationInfo.petWeight &&
							reservationInfo.petWeight.weight_name) || '-' }}</text>
					</view>
					<view class="pet-card-row">
						<text class="pet-card-label">预约内容: 基础护理</text>
						<view class="pet-card-money-wrap">
							<text v-if="getBaseDiscountFold(pIndex)" class="pet-card-discount-tag">会员{{ getBaseDiscountFold(pIndex) }}折优惠</text>
							<text v-if="hasBaseDiscount(pIndex)" class="pet-card-original-price">￥{{ petItem.basePrice }}</text>
							<text v-if="hasBaseDiscount(pIndex)" class="pet-card-money">￥{{ petItem.discountBasePrice }}</text>
							<text v-else class="pet-card-money">￥{{ petItem.basePrice || '0.00' }}</text>
						</view>
					</view>
					<view class="service-list">
						<view class="service-item" v-for="(item, idx) in (petItem.additionalItems || [])" :key="idx">
							<text class="service-item-name">{{ item.item_name }}</text>
							<text class="service-item-price">￥{{ item.item_cut_price || item.item_price }}</text>
						</view>
					</view>
					<view class="pet-card-row pet-card-total">
						<text class="pet-card-label">合计</text>
						<text class="pet-card-money">￥{{ petCardTotal(petItem, pIndex) }}</text>
					</view>
					<view class="pet-card-remark">
						<input class="pet-remark-input" v-model="petItem.note" placeholder="添加宠物备注" />
					</view>
				</view>
			</view>
			<!-- <view class="wechat">
				<text class="x">合计</text>
				<view class="estimate" v-if="reservationInfo.estimatePrice != 0">
					<text class="money4">会员{{ reservationInfo.discount * 10 }}折</text>
					<text class="money">￥{{ estimatedPrice }}</text>
					<text class="money1">￥{{ toAmount }}</text>
				</view>
				<text v-else class="money">￥{{ toAmount }}</text>
			</view> -->
			<view class="wechat2"
				v-if="reservationInfo && reservationInfo.amountList && (reservationInfo.amountList.night_fee_tab != 0 || reservationInfo.amountList.night_fee_show)">
				<view class="night">
					<text class="x">夜间费</text>
					<text v-if="!reservationInfo.amountList.night_fee_show" class="x1">(剩余{{
						reservationInfo.amountList.night_fee_tab }}次)</text>
				</view>
				<text v-if="reservationInfo.amountList.night_fee_show" class="money">￥{{
					reservationInfo.amountList.night_fee || "0.00"
				}}</text>
				<view v-else class="mb-discount">
					<text class="money4">会员免夜间费</text>
					<text class="money5">￥{{ reservationInfo.amountList.night_fee || "0.00" }}</text>
					<!-- <text class="money">￥0.00</text> -->
				</view>
			</view>
			<view class="wechat2"
				v-if="reservationInfo && reservationInfo.amountList && (reservationInfo.amountList.dispatch_fee_tab != 0 || reservationInfo.amountList.dispatch_fee_show)">
				<view class="night">
					<text class="x">调度费</text>
					<text v-if="!reservationInfo.amountList.dispatch_fee_show" class="x1">(剩余{{
						reservationInfo.amountList.dispatch_fee_tab }}次)</text>
				</view>
				<text v-if="reservationInfo.amountList.dispatch_fee_show" class="money">￥{{
					reservationInfo.amountList.dispatch_fee }}</text>
				<view v-else class="mb-discount">
					<text class="money4">会员免调度费</text>
					<text class="money5">￥{{ reservationInfo.amountList.dispatch_fee || "0.00" }}</text>
					<!-- <text class="money">￥0.00</text> -->
				</view>
				<!-- <text class="x">调度费</text> -->
				<!-- <text class="money">￥{{ reservationInfo.dispatch_fee }}</text> -->
			</view>

			<view class="wechat"
				v-if="reservationInfo && reservationInfo.amountList && (reservationInfo.amountList.dispatch_fee || reservationInfo.amountList.night_fee)">
				<text class="x">总计</text>
				<view class="estimate" v-if="reservationInfo.discount != 0">
					<!-- <text class="money4"
            >会员{{ reservationInfo.amountList.discount }}折</text
          > -->
					<text class="money">￥{{ estimatedPri.toFixed(2) }}</text>
					<text class="money1">￥{{ toAmount3.toFixed(2) }}</text>
				</view>
				<text v-else class="money">￥{{ toAmount2.toFixed(2) }}</text>
			</view>
		</view>


		<view class="carousel" v-if="!reservationInfo.discount">
			<view class="member-carousel">
				<view class="actimeb">
					<image @click="rightsList(1)" v-if="activBj1" class="img-meb"
						src="https://activity.wagoo.live/bj-1.png" />
					<!-- <view @click="rightsList(1)" class="q" />
          <text class="mn">199</text> -->
					<image @click="rightsList(1)" v-if="activBj2" class="img-meb"
						src="https://activity.wagoo.live/bj-2.png" />
				</view>
				<view class="actimeb">
					<image @click="rightsList(2)" v-if="activhj1" class="img-meb"
						src="https://activity.wagoo.live/huangj-1.png" />
					<!-- <view @click="rightsList(2)" class="q" />
          <text class="mn2">99</text> -->
					<image v-if="activhj2" @click="rightsList(2)" class="img-meb"
						src="https://activity.wagoo.live/huangj-2.png" />
				</view>
				<view class="actimeb">
					<image @click="rightsList(3)" v-if="activheij1" class="img-meb"
						src="https://activity.wagoo.live/hj-1.png" />
					<!-- <view @click="rightsList(3)" class="q" />
          <text class="mn3">399</text> -->
					<image @click="rightsList(3)" v-if="activheij2" class="img-meb"
						src="https://activity.wagoo.live/hj-2.png" />
				</view>
			</view>
			<!-- <view class="rights">
        <text  class="r1">开通前请阅读协议《Wagoo会员协议》</text>
       
      </view> -->
		</view>

		<view class="recharge-method2">
			<view class="info-cell info-pet-cell" style="margin-bottom: 0;">
				<detail-cell v-if="Object.keys(selectCoupon).length === 0" title="优惠券"
					:content="couponList.length === 0 ? '暂无可用' : '未选优惠券'" :is-show-arrow="true"
					:custom-content-style="{ color: '#ff19a0' }" @clickAction="isShowCouponModal = true" />
				<detail-cell v-else title="优惠券" :content="showCoupon" :is-show-arrow="true"
					:custom-content-style="{ color: '#ff19a0' }" @clickAction="isShowCouponModal = true" />
				<!-- <detail-cell v-if="Object.keys(selectService).length === 0" title="服务券"
					:content="serviceList.length === 0 ? '暂无可用' : '未选服务券'" :is-show-arrow="true"
					:custom-content-style="{ color: '#9B939A' }" @clickAction="isShowServiceModal = true" />
				<detail-cell v-else title="服务券" :content="showService" :is-show-arrow="true"
					:custom-content-style="{ color: '#E82016' }" @clickAction="isShowServiceModal = true" /> -->
			</view>
		</view>



		<view @click="elasticLayer = false" v-if="elasticLayer" class="elastic-layer" />
		<view v-if="elasticLayer" class="select-pet">
			<view class="close-icon" @click="elasticLayer = false" />
			<image v-if="platinum" class="file-b" src="https://activity.wagoo.live/pop-b.png" mode="widthFix" />
			<image v-if="gold" class="file-b" src="https://activity.wagoo.live/pop-h.png" mode="widthFix" />
			<image v-if="blackGold" class="file-b" src="https://activity.wagoo.live/pop-hei.png" mode="widthFix" />
			<view class="agreement">
				<image v-if="mbselected1" class="not-selected" @click.stop="selecttwo('1')" src="@/static/images/w.png"
					mode="widthFix" />
				<image v-if="mbselected2" class="not-selected" @click.stop="selecttwo('2')" src="@/static/images/y.png"
					mode="widthFix" />
			</view>
			<view @click="jumpTo('/pages/richText/membership-agreement')" class="agreement-img" />
			<view @click="originc1(1)" class="origin1" />
			<view @click="originc2(2)" class="origin2" />
			<view @click="originc3(3)" class="origin3" />
			<text class="money">¥{{ amountInfo1.actual_amount }}</text>
			<view class="amountOut" @click="amountOut" />
			<!-- <text class="money1">立即开通</text> -->
			<!-- <view class="original">
        <text class="y"> 原价 </text>
        <text class="y">¥{{ amountInfo1.purchase_amount }}元 </text>
      </view> -->
			<!-- <text class="money2">立减¥{{ amountInfo1.discount_amount }}元</text> -->
			<view class="roll-rights">
				<view class="roll-item">
					<view class="roll-e">
						<view class="roll-t">
							<image class="m" src="https://activity.wagoo.live/p1.png" mode="widthFix" />
							<text class="z">折扣护理</text>
						</view>
						<view class="roll-t">
							<image class="m" src="https://activity.wagoo.live/p2.png" mode="widthFix" />
							<text class="z">入会礼包</text>
						</view>
						<view class="roll-t">
							<image class="m" src="https://activity.wagoo.live/p3.png" mode="widthFix" />
							<text class="z">定制浴液</text>
						</view>
						<view class="roll-t">
							<image class="m" src="https://activity.wagoo.live/p4.png" mode="widthFix" />
							<text class="z">专属会员活动</text>
						</view>
						<view class="roll-t">
							<image class="m" src="https://activity.wagoo.live/p5.png" mode="widthFix" />
							<text class="z">免费调度</text>
						</view>
						<view class="roll-t">
							<image class="m" src="https://activity.wagoo.live/p6.png" mode="widthFix" />
							<text class="z">公益勋章</text>
						</view>
						<view class="roll-t">
							<image class="m" src="https://activity.wagoo.live/p7.png" mode="widthFix" />
							<text class="z">专属影集</text>
						</view>
						<view class="roll-t">
							<image class="m" src="https://activity.wagoo.live/p8.png" mode="widthFix" />
							<text class="z">Al宠物档案</text>
						</view>
						<!-- <view class="roll-t">
              <image
                class="m"
                src="https://activity.wagoo.live/p9.png"
                mode="widthFix"
              />
              <text class="z">积分加速</text>
            </view> -->
						<view class="roll-t">
							<image class="m" src="https://activity.wagoo.live/p10.png" mode="widthFix" />
							<text class="z">专属丝带</text>
						</view>
						<view class="roll-t">
							<image class="m" src="https://activity.wagoo.live/p11.png" mode="widthFix" />
							<text class="z">夜间免费</text>
						</view>
						<view class="roll-t">
							<image class="m" src="https://activity.wagoo.live/p12.png" mode="widthFix" />
							<text class="z">专属客服</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="recharge-method">
			<view class="wechat" @click.stop="selectOption1('1')">
				<view class="select">
					<image class="w" src="@/static/images/douy.png" mode="widthFix" />
					<text class="x">抖音</text>
				</view>
				<image v-if="selected1" class="not-selected" src="@/static/images/w.png" mode="widthFix" />
				<image v-if="selected2" class="not-selected" src="@/static/images/y.png" mode="widthFix" />
			</view>
			<view class="wechat" @click.stop="selectOption2('2')">
				<view class="select">
					<image class="w" src="@/static/images/wallet.png" mode="widthFix" />
					<text class="x">钱包支付</text>
				</view>
				<image v-if="selected3" class="not-selected" src="@/static/images/w.png" mode="widthFix" />
				<image v-if="selected4" class="not-selected" src="@/static/images/y.png" mode="widthFix" />
			</view>
		</view>
		<view class="handle-view">
			<view class="handle-view-content">
				<view class="handle-info">
					<!-- <view class="estimate" v-if="reservationInfo.estimatePrice !=0 ">
         <text class="money">￥{{ reservationInfo.estimatedPrice }}</text>
        <text class="money1">￥{{ toAmount }}</text>
         </view>
           <text v-else class="money">￥{{ toAmount }}</text> -->
					<view class="handle-info-cell">
						<view v-if="reservationInfo.estimatePrice != 0">
							<text class="money">￥{{ Math.max(0, estimatedPri - couponMoney2).toFixed(2) }}</text>
							<text class="app-fc12">¥</text>
							<text class="app-fc1">{{ Math.max(0, toAmount3).toFixed(2) || "0.00" }}</text>
						</view>
						<view v-else>
							<text class="app-fc-main fs-30">¥</text>
							<text class="app-fc-main fs-40 app-font-bold">{{
								Math.max(0, (toAmount2.toFixed(2) || "0.00") - couponMoney)
							}}</text>
						</view>
					</view>
					<view class="handle-info-cell tip-cell">
						<image src="/static/images/notice.png" mode="aspectFit" class="tips-icon" />
						<text class="app-fc-normal fs-24">以实际服务宠物的重量为准</text>
					</view>
				</view>
				<view class="handle-btn" @click.stop="createPetOrder">
					<text class="cfom">确认支付</text>
				</view>
			</view>
			<view class="handle-safe-area"></view>
		</view>
		<RechargeCouponModal v-if="isShowCouponModal" :couponList="couponList" :price="reservationInfo.price"
			:selected-item="selectCoupon" @useCoupon="useCoupon" @close="isShowCouponModal = false" />

		<ServiceCouponModal v-if="isShowServiceModal" :service-list="serviceList" @useService="useService"
			@close="isShowServiceModal = false" :weight-id="petWeight.weight_id" :price="reservationInfo.price"
			:selected-item="selectService" />
		<success-modal v-if="showSuccessModal" :img-src="'https://activity.wagoo.live/order_success.png'"
			:img-style="{ width: '200rpx', height: '200rpx' }" title="预约成功" message="预约状态可在订单中进行查看"
			@ok="paySuccessAction" />
		<view v-if="elasticLayer1" class="elastic-layer" @click="(additionalBom1 = false), (elasticLayer1 = false)" />
		<view class="additional-bottom" v-if="additionalBom1">
			<image src="@/static/images/close.png" mode="aspectFit" class="close-icon"
				@click="(additionalBom1 = false), (elasticLayer1 = false)" />
			<view class="recharge-method2">
				<view class="wechat">
					<view class="select">
						<image class="w" src="@/static/images/wallet.png" mode="widthFix" />
						<text class="x">钱包支付</text>
					</view>
					<image v-if="select3" class="not-selected" @click.stop="selectOpt2('2')" src="@/static/images/w.png"
						mode="widthFix" />
					<image v-if="select4" class="not-selected" src="@/static/images/y.png" mode="widthFix" />
				</view>
				<view class="wechat">
					<view class="select">
						<image class="w" src="@/static/images/douy.png" mode="widthFix" />
						<text class="x">抖音</text>
					</view>
					<image v-if="select1" class="not-selected" @click.stop="selectOpt1('1')" src="@/static/images/w.png"
						mode="widthFix" />
					<image v-if="select2" class="not-selected" src="@/static/images/y.png" mode="widthFix" />
				</view>

			</view>
			<view class="payment" @click="rechargeNow">
				<text class="Z"> 支付 </text>
			</view>
		</view>
	</view>
</template>

<script>
import DetailCell from "@/components/petOrder/detail-cell.vue";
import {
	COUPON_TYPE_PET,
	ORDER_TYPE_SITE,
	PET_HAIR_LONG,
	PET_TYPE_CAT,
	PET_TYPE_DOG,
} from "@/constants/app.business";
import {
	createOrder,
	payOrder
} from "@/api/order";
import {
	getCouponListByOrderPrice,
	// getServiceCouponListByWeightId,
} from "@/api/coupon";
import {
	walletTransaction,
	memberType,
	memberWXPAY,
	membershipWallet,
} from "../../api/login";
import RechargeCouponModal from "@/components/coupon/RechargeCouponModal.vue";
import ServiceCouponModal from "@/components/coupon/ServiceCouponModal.vue";
import SuccessModal from "@/components/SuccessModal.vue";
import moment from "moment";
import {
	ORDER_STATUS_RESERVED
} from "@/pageHome/constants/home";
import { imgPrefix } from "@/utils/common";

export default {
	components: {
		SuccessModal,
		ServiceCouponModal,
		RechargeCouponModal,
		DetailCell,
	},
	onLoad(option) {
		this.getmemberType();
		// this.buyService();
		const eventChannel = this.getOpenerEventChannel();
		eventChannel.on("reservationInfo", (data) => {
			console.log(data, "?");
			this.initializing = false;
			// 确保 orderType 在顶层可访问
			if (data.orderInfo && data.orderInfo.orderType && !data.orderType) {
				data.orderType = data.orderInfo.orderType;
			}
			this.reservationInfo = data;

			Promise.all([this.getMyCouponList()]).then(
				(result) => {
					// if (this.serviceList.length) {
					// 	let selectService = this.serviceList[0];
					// 	this.serviceList.map((data) => {
					// 		if (Number(data.price) > Number(selectService.price)) {
					// 			selectService = data;
					// 		}
					// 	});
					// 	this.selectService = selectService;
					// } else
					if (this.couponList.length) {
						let selectCoupon = this.couponList[0];
						// console.log(selectCoupon,'--=')
						this.couponList.map((data) => {
							if (Number(data.coupon_amount) > Number(selectCoupon.coupon_amount)) {
								selectCoupon = data;
							}
						});
						this.selectCoupon = selectCoupon;
					}
				}
			);
		});
		// console.log( Number(this.showPrice),'--==')
	},

	computed: {
		sex() {
			const g = (this.reservationInfo.petInfo?.gender || '').toString().toLowerCase();
			return g === 'male' ? '男生' : (g === 'female' ? '女生' : '');
		},
		estimatedPrice() {
			// let couponMoney = this.selectCoupon?.coupon_amount || 0;
			//  console.log(this.selectCoupon,'?')
			return this.reservationInfo.estimatedPrice;
		},
		estimatedPrice2() {
			let couponMoney = this.selectCoupon?.coupon_amount || 0;
			this.couponMoney2 = couponMoney
			this.estimatedPri =
				Number(this.estimatedPrice || 0) +
				Number((this.reservationInfo.amountList?.night_fee_show ? this.reservationInfo.amountList.night_fee : 0) ||
					0) +
				Number((this.reservationInfo.amountList?.dispatch_fee_show ? this.reservationInfo.amountList.dispatch_fee :
					0) || 0);

			//  console.log(this.estimatedPrice,this.reservationInfo.night_fee,this.reservationInfo.dispatch_fee,'???')
			// return ( ( Number(this.estimatedPrice || 0 )  +
			//   Number( (this.reservationInfo.amountList?.night_fee_show ? this.reservationInfo.night_fee : 0) || 0 ) +
			//   Number( ( this.reservationInfo.amountList?.dispatch_fee_show ? this.reservationInfo.dispatch_fee : 0) || 0 ))
			//    - couponMoney).toFixed(2)
		},
		newAmount() {
			let totalP = 0;
			this.reservationInfo.selectidList?.map((item) => {
				// console.log(item,'--===')
				totalP += Number(item.item_price);
				// console.log( totalP,'===')
			});
			if (this.reservationInfo.estimatePrice != 0) {
				this.toAmount = Number(totalP || 0) + Number(this.showPrice || 0);
			} else {
				// let couponMoney = this.selectCoupon?.coupon_amount || 0;
				this.toAmount =
					Number(totalP || 0) + Number(this.showPrice || 0);
			}

			// +
			// Number( (this.reservationInfo.amountList?.night_fee_show ? this.reservationInfo.night_fee : 0) || 0 ) +
			// Number( ( this.reservationInfo.amountList?.dispatch_fee_show ? this.reservationInfo.dispatch_fee : 0) || 0 );
		},
		newAmount2() {
			let couponMoney = this.selectCoupon?.coupon_amount || 0;
			this.couponMoney = couponMoney
			// console.log(couponMoney, '---')
			this.toAmount2 =
				Number(this.toAmount || 0) +
				Number((this.reservationInfo.amountList?.night_fee_show ? this.reservationInfo.amountList.night_fee : 0) ||
					0) +
				Number((this.reservationInfo.amountList?.dispatch_fee_show ? this.reservationInfo.amountList.dispatch_fee :
					0) || 0);
		},

		newAmount3() {
			// let couponMoney = this.selectCoupon?.coupon_amount || 0;
			// console.log( this.toAmount2,'---')
			const nightFee = this.reservationInfo?.amountList?.night_fee || 0;
			const dispatchFee = this.reservationInfo?.amountList?.dispatch_fee || 0;
			// 基础金额：所有宠物的「原价」（基础护理原价 + 附加项原价）之和
			const baseSum = Number(this.getOriginalTotalAmount() || 0);
			this.toAmount3 = baseSum + Number(nightFee || 0) + Number(dispatchFee || 0);
		},
		petType() {
			return `${this.reservationInfo?.petInfo?.type}` === `${PET_TYPE_CAT}` ?
				"喵喵" :
				"汪汪";
		},
		petName() {
			return this.reservationInfo?.petInfo?.name || "";
		},
		petWeight() {
			return this.reservationInfo?.petWeight || {};
		},
		petHair() {
			if (`${this.reservationInfo?.petInfo?.type}` === `${PET_TYPE_CAT}`) {
				return `${this.reservationInfo?.petInfo.maofa}` === `${PET_HAIR_LONG}` ?
					"长毛" :
					"短毛";
			} else {
				return "";
			}
		},
		reservationTime() {
			if (this.reservationInfo.orderType === ORDER_TYPE_SITE) {
				return "今天 " + moment().format("M月D日");
			}
			return `${this.reservationInfo?.reservationTime?.dateLabel}  ${this.reservationInfo?.reservationTime?.start}-${this.reservationInfo?.reservationTime?.end}`;
		},
		petWithItemsListForDisplay() {
			const list = this.reservationInfo?.petWithItemsList;
			if (Array.isArray(list) && list.length > 0) {
				return list.map(pet => ({
					...pet,
					note: pet.note || ''
				}));
			}
			const pet = this.reservationInfo?.petInfo;
			if (pet && (pet.id || pet.chongwu_id)) {
				return [{ ...pet, additionalItems: this.reservationInfo?.selectidList || [], note: pet.note || '' }];
			}
			return [];
		},
		petCountSummary() {
			const pets = this.petWithItemsListForDisplay;
			let dogCount = 0;
			let catCount = 0;
			pets.forEach(pet => {
				const type = pet?.type;
				if (type === PET_TYPE_DOG) {
					dogCount++;
				} else if (type === PET_TYPE_CAT) {
					catCount++;
				}
			});
			const parts = [];
			if (dogCount > 0) parts.push(`${dogCount}只狗`);
			if (catCount > 0) parts.push(`${catCount}只猫`);
			return parts.join(' ') || '';
		},
		showService() {
			return this.selectService.name || "";
		},
		showCoupon() {
			return "-¥" + (+this.selectCoupon.coupon_amount || 0);
		},
		showPrice() {
			if (Object.keys(this.selectService).length) {
				return "0.00";
			} else {
				// let couponMoney = this.selectCoupon?.coupon_amount || 0;
				return Number(this.reservationInfo.price).toFixed(2);
			}
		},
		userInfo() {
			return this.$store.state?.user?.userInfo || {};
		},
	},
	//  watch: {
	//   totalAmount(newVal) {
	//       let totalP = 0;
	//     newVal.map((item) => {
	//       console.log(item,'--===')
	//       totalP += Number(item.item_price)
	//       console.log( totalP,'===')
	//     });
	//      this.toAmount  =  Number(totalP) + Number(this.showPrice)
	//      console.log(totalP, this.showPrice,'--?')
	//   }
	// },
	data() {
		return {
			couponMoney2: '',
			couponMoney: '',
			mbselected1: true,
			mbselected2: false,
			mbselected3: true,
			mbselected4: false,
			toAmount3: '',
			estimatedPri: "",
			amountInfo1: "",
			amountInfo2: "",
			amountInfo3: "",
			platinum: false,
			elasticLayer1: false,
			additionalBom1: false,
			gold: false,
			blackGold: false,
			activBj1: true,
			activBj2: false,
			activhj1: true,
			toAmount2: "",
			activhj2: false,
			activheij1: true,
			activheij2: false,
			reservationInfo: {},
			initializing: true,
			serviceList: [],
			selectService: {},
			isShowServiceModal: false,
			couponList: [],
			selectCoupon: {},
			toAmount: "",
			business_id: "",
			isShowCouponModal: false,
			showSuccessModal: false,
			selected1: true,
			selected2: false,
			selected3: true,
			selected4: false,
			select1: true,
			select2: false,
			select3: true,
			select4: false,
			recharge: true,
			elasticLayer: false,
			record: false,
			wallet: "",
			collapsedPetIndex: -1,
		};
	},
	methods: {
		getPetCardAvatar(pet) {
			const url = pet.chongwu_pic || pet.pet_avatar || pet.avatar || pet.pet_image_url;
			return url || `${imgPrefix}record_avator.png`;
		},
		petCardMeta(pet) {
			const type = `${pet?.type}` === `${PET_TYPE_CAT}` ? '喵喵' : '汪汪';
			const gender = (pet?.gender || '').toString().toLowerCase();
			const sex = gender === 'male' ? '男生' : (gender === 'female' ? '女生' : '');
			const weight = pet?.weight_name || this.reservationInfo?.petWeight?.weight_name || '';
			const parts = [type, sex];
			if (pet?.age) parts.push(pet.age);
			if (weight) parts.push(weight);
			return parts.join('/') || '-';
		},
		togglePetCard(index) {
			this.collapsedPetIndex = this.collapsedPetIndex === index ? -1 : index;
		},
		getBaseDiscountFold(pIndex) {
			const discount = this.reservationInfo?.discount;
			let item = 0;
			if (Array.isArray(discount)) {
				item = Number(discount[pIndex]) || 0;
			} else if (pIndex === 0 && discount != null && discount !== '') {
				item = Number(discount) || 0;
			}
			if (item === 0) return '';
			return item / 10;
		},
		hasBaseDiscount(pIndex) {
			const discount = this.reservationInfo?.discount;
			if (Array.isArray(discount)) {
				return Number(discount[pIndex]) !== 0;
			}
			if (pIndex === 0 && discount != null && discount !== '') {
				return Number(discount) !== 0;
			}
			return false;
		},
		petCardTotal(petItem) {
			// 合计 = 基础护理价格 + 选中附加项价格
			// 基础护理优先用折后价 discountBasePrice，没有则用 basePrice
			const base = Number(petItem.discountBasePrice != null ? petItem.discountBasePrice : petItem.basePrice || 0);
			// 附加项优先用折后价 item_cut_price，没有则用 item_price
			const add = (petItem.additionalItems || []).reduce((s, it) => {
				const price = it.item_cut_price != null ? it.item_cut_price : it.item_price;
				return s + Number(price || 0);
			}, 0);
			return (base + add).toFixed(2);
		},
		// 原价总和：所有宠物的基础护理原价 + 附加项原价
		getOriginalTotalAmount() {
			const pets = this.petWithItemsListForDisplay || [];
			const sum = pets.reduce((total, pet) => {
				const base = Number(pet.basePrice || 0); // 洗护原价
				const add = (pet.additionalItems || []).reduce((s, it) => {
					return s + Number(it.item_price || 0); // 附加项原价
				}, 0);
				return total + base + add;
			}, 0);
			return sum.toFixed(2);
		},
		getMyCouponList() {
			return getCouponListByOrderPrice(
				this.userInfo.userID,
				this.reservationInfo.price + ''
			)
				.then((res) => {
					// console.log(res,'??、？')
					this.couponList = res?.data || [];
					// console.log(this.couponList,'-=-?')
					return Promise.resolve();
				})
				.catch(() => {
					this.couponList = [];
					this.selectCoupon = {};
					return Promise.resolve();
				});
		},
		originc1() {
			this.gold = true;
			this.platinum = false;
			this.blackGold = false;
			this.amountInfo1 = this.memberList[0];
		},
		originc2() {
			this.gold = false;
			this.platinum = true;
			this.blackGold = false;
			this.amountInfo1 = this.memberList[1];
		},
		originc3() {
			this.gold = false;
			this.platinum = false;
			this.blackGold = true;
			this.amountInfo1 = this.memberList[2];
		},

		async rechargeNow() {
			//  console.log(this.wallet, "???");
			if (!this.WeChat1 && !this.wallet1) {
				uni.showToast({
					title: "请选择充值方式",
					icon: "none",
				});
				return;
			}
			if (this.WeChat1 == 1) {
				console.log(this.amountInfo1, "--");
				try {
					const data = {
						card_name: this.amountInfo1.card_name,
						card_type: this.amountInfo1.card_type,
						total_fee: this.amountInfo1.actual_amount,
						type: 2
						//  user_id: 50001
						// user_nickname: this.reservationInfo.petInfo.jianhuren_name,
						// user_id: Number(this.reservationInfo.petInfo.member_id),
						// card_type: this.amountInfo1.card_type,
						// card_name: this.amountInfo1.card_name,
						// actual_amount: Number(this.amountInfo1.actual_amount),
					};
					memberWXPAY(data).then((res) => {
						// 使用获取的支付参数进行支付
						 tt.pay({
							 orderInfo: { 
                   order_id:res.data.orderInfo.order_id,
                   order_token:res.data.orderInfo.order_token,
                    },
                    service:5,
							success: (res) => {
								uni.showToast({
									title: "支付成功",
									icon: "none",
								});
								this.elasticLayer1 = false;
								this.additionalBom1 = false;
								let that = this;
								uni.showModal({
									content: "绑定宠物享受会员权益",
									showCancel: false,
									success: function (res) {
										if (res.confirm) {
											setTimeout(() => {
												uni.reLaunch({
													url: `/pages/client/recharge/my-card?user_id=${that.reservationInfo.petInfo.member_id}`,
												});
												// uni.navigateBack({
												//   delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
												// });
											}, 500);
										}
									},
								});

								// uni.reLaunch({
								//   url: `/pages/client/recharge/my-card?user_id=${this.reservationInfo.petInfo.member_id}`,
								// });
								// setTimeout(() => {
								//   uni.navigateBack({
								//     delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
								//   });
								// }, 1500);
								// this.buyService(this.user_id);
								//   this.additionalBom = false;
								// this.elasticLayer = false;
								console.log("支付成功:", res);
							},
							fail: (err) => {
								console.error("支付失败:", err);
							},
						});
					});
				} catch (error) {
					console.error("捕获到的错误:", error);
				}
			} else if (this.wallet1 == 2) {
				let that = this;
				uni.showModal({
					title: "钱包付款",
					content: "是否确认钱包付款",
					success: function (res) {
						if (res.confirm) {
							const value = uni.getStorageSync("userInfo");
							//  console.log(this.selectService,'---')
							const data = {
								card_type: that.amountInfo1.card_type,
								total_fee: that.amountInfo1.actual_amount,
								type: 2,
								user_nickname: value.user_nickname,
								wallet_id: value.wallet_id,
								// 				type: 2,
								// wallet_id: value.wallet_id,
								// order_id: value.user_id,
								// amount: this.estimatedPri ? this.estimatedPri : this.toAmount2,
								// order_no: orderInfo.order_no,
								// business_type: 5,
								// business_id: 1,
								// card_name: that.amountInfo1.card_name,
								// user_nickname: that.reservationInfo.petInfo.jianhuren_name,
								// user_id: Number(that.reservationInfo.petInfo.member_id),
								// amount: Number(that.amountInfo1.actual_amount),
								// wallet_id: value.wallet_id,
								// card_type: that.amountInfo1.card_type,
							};
							membershipWallet(data).then((res) => {
								if (res.code == 0) {
									uni.showToast({
										title: "支付成功",
										icon: "none",
									});

									uni.showModal({
										content: "绑定宠物享受会员权益",
										showCancel: false,
										success: function (res) {
											if (res.confirm) {
												setTimeout(() => {
													uni.reLaunch({
														url: `/pages/client/recharge/my-card?user_id=${that.reservationInfo.petInfo.member_id}`,
													});
													// uni.navigateBack({
													//   delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
													// });
												}, 500);
											}
										},
									});

									// uni.reLaunch({
									//   url: `/pages/client/recharge/my-card?user_id=${that.reservationInfo.petInfo.member_id}`,
									// });
									that.elasticLayer1 = false;
									that.additionalBom1 = false;
								} else if (res.code == 100) {
									uni.showToast({
										title: res.message,
										icon: "none",
									});
								}
							});
							// 用户点击确定后的操作
						} else if (res.cancel) {
							// 用户点击取消后的操作
						}
					},
				});
			}
		},
		rightsList(v) {
			this.elasticLayer = true;
			console.log(v);
			if (v == 1) {
				this.amountInfo1 = this.memberList[1];
				this.platinum = true;
				this.blackGold = false;
				this.gold = false;
			} else if (v == 2) {
				this.amountInfo1 = this.memberList[0];
				this.gold = true;
				this.platinum = false;
				this.blackGold = false;
			} else if (v == 3) {
				this.amountInfo1 = this.memberList[2];
				this.blackGold = true;
				this.gold = false;
				this.platinum = false;
			}
		},
		amountOut() {
			if (!this.memberSelect || this.memberSelect == 2) {
				uni.showToast({
					title: "请先阅读并同意会员卡服务协议",
					icon: "none",
				});
				return;
			} else {
				this.additionalBom1 = true;
				this.elasticLayer1 = true;
				this.elasticLayer = false;
			}
		},
		selecttwo(v) {
			// console.log(v)
			this.memberSelect = v;
			if (v == 1) {
				this.mbselected1 = false;
				this.mbselected2 = true;
			} else if (v == 2) {
				this.mbselected1 = true;
				this.mbselected2 = false;
			}
		},
		buyService(orderInfo) {
			//  uni.showLoading({
			//       title: "处理中",
			//       mask: true,
			//     });
			// 从 Vuex 中获取 userInfo，而不是本地存储
			const value = (this.$store.state && this.$store.state.user && this.$store.state.user.userInfo) || {};
			const data = {
				type: 3,
				wallet_id: value.wallet_id,
				order_id: orderInfo.order_id,
				total_fee: orderInfo.pay_amount,
				order_no: orderInfo.order_no,
			};

			walletTransaction(data).then((res) => {
				if (res.code == 0) {
					console.log('钱包支付成功', res)
					uni.showToast({
						title: "支付成功",
						icon: "none",
					});
					uni.hideLoading();
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit("clearData");
					this.showSuccessModal = true;
					setTimeout(function () {
						uni.redirectTo({
							url: "/pages/client/petOrder/index",
							complete() {
								uni.$emit("changeTabBar", {
									pageId: "orderPage",
									orderState: ORDER_STATUS_RESERVED,
								});
							},
						});
					}, 1000);

				} else if (res.code == 0) {
					uni.showToast({
						title: res.message,
						icon: "none",
					});
				}

			});
		},

		getmemberType() {
			const data = {
				type: 0,
			};
			memberType(data).then((res) => {
				this.memberList = res.data;
			});
		},

		selectOpt1(v) {
			console.log(v);
			this.WeChat1 = v;
			this.wallet1 = "";
			// console.log(this.WeChat);
			this.select1 = false;
			this.select2 = true;
			this.select3 = true;
			this.select4 = false;
		},
		selectOpt2(v) {
			console.log(v);
			this.WeChat1 = "";
			this.wallet1 = v;
			// console.log(this.wallet);
			this.select1 = true;
			this.select2 = false;
			this.select3 = false;
			this.select4 = true;
		},

		selectOption1(v) {
			this.WeChat = v;
			this.wallet = "";
			this.payment_type = v;
			// console.log(this.WeChat);
			this.selected1 = false;
			this.selected2 = true;
			this.selected3 = true;
			this.selected4 = false;
		},
		selectOption2(v) {
			this.WeChat = "";
			this.wallet = v;
			this.payment_type = v;
			// console.log(this.wallet);
			this.selected1 = true;
			this.selected2 = false;
			this.selected3 = false;
			this.selected4 = true;
		},
		jumpTo(url) {
			uni.navigateTo({
				url,
			});
		},
		// getMyServiceList() {
		// 	return getServiceCouponListByWeightId(
		// 		this.reservationInfo?.petWeight?.weight_id
		// 	)
		// 		.then((res) => {
		// 			this.serviceList = res?.info || [];
		// 			return Promise.resolve();
		// 		})
		// 		.catch(() => {
		// 			this.serviceList = [];
		// 			this.selectService = {};
		// 			return Promise.resolve();
		// 		});
		// },
		useCoupon(item) {
			// 如果点击的是已经选中的优惠券，则取消使用
			if (this.selectCoupon && this.selectCoupon.distribution_id === item.distribution_id) {
				this.selectCoupon = {};
			} else {
				this.selectCoupon = item;
			}
			this.isShowCouponModal = false;
		},
		useService(item) {
			if (this.selectService.order_id === item.order_id) {
				this.selectService = {};
			} else {
				this.selectService = item;
				this.isShowServiceModal = false;
			}
		},
		createPetOrder() {
			// console.log(this.wallet, "???");
			if (!this.WeChat && !this.wallet) {
				uni.showToast({
					title: "请选择支付方式",
					icon: "none",
				});
				return;
			}
			// console.log(this.WeChat,'---')
			if (
				Object.keys(this.selectService).length &&
				Object.keys(this.selectCoupon).length
			) {
				uni.showToast({
					title: "服务券和优惠券不能同时使用",
					icon: "none",
				});
				return;
			}
			uni.showLoading({
				title: "正在创建订单",
				mask: true,
			});
			const data = {
				order_type: +this.reservationInfo.orderInfo.orderType, // 订单类型 (required)
				address_id: this.reservationInfo?.addresInfo?.id, // 地址id
				order_date: this.reservationInfo?.reservationTime?.date, // 预约日期 (required)
				pay_type: +this.payment_type, // 支付方式 (required)
			};

			data.pet_list = this.petWithItemsListForDisplay.map(pet => {

				const petData = {
					id: pet.id,
					note: pet.note
				};
				// 只有当 additionalItems 存在且不为空时才添加
				if (pet.additionalItems && Array.isArray(pet.additionalItems) && pet.additionalItems.length > 0) {
					petData.additional_items = pet.additionalItems;
				}
				return petData;
			});

			// 可选字段：时段id
			if (this.reservationInfo?.reservationTime?.id) {
				data.period_id = +this.reservationInfo.reservationTime.id;
			}

			// 可选字段：停车状况
			if (this.reservationInfo.orderInfo.parkState) {
				data.park_desc = this.reservationInfo.orderInfo.parkState;
			}

			// 可选字段：小哇ID
			if (this.reservationInfo.orderInfo.xwID) {
				data.wa_code = +this.reservationInfo.orderInfo.xwID;
			}

			// 可选字段：优惠券
			if (this.selectCoupon.distribution_id) {
				data.distribution_id = this.selectCoupon.distribution_id;
			}

			// 可选字段：附加项
			// if (this.reservationInfo?.selectidList && this.reservationInfo.selectidList.length > 0) {
			// 	data.additional_items = this.reservationInfo.selectidList;
			// }

			createOrder(data)
				.then((res) => {
					if (
						Object.keys(this.selectService).length ||
						`${this.showPrice}` === "0.00"
					) {
						const eventChannel = this.getOpenerEventChannel();
						eventChannel.emit("clearData");
						uni.hideLoading();
						this.showSuccessModal = true;
					} else {
						if (this.WeChat == 1) {
							this.weixinPay(res.data);
						} else if (this.wallet == 2) {
							this.buyService(res.data);
						}
					}
				})
				.catch((error) => {

					uni.showToast({
						title: error,
						icon: "none",
					});

					uni.hideLoading();
				});
		},
		weixinPay(orderInfo) {
			const params = {
				user_id: this.userInfo.userID,
				type: 3,// 3 洗护
				total_fee: orderInfo.pay_amount,
				order_id: orderInfo.order_id,
				order_no: orderInfo.order_no,
			}
			payOrder(params)
				.then((res) => {
				 tt.pay({
							 orderInfo: { 
                   order_id:res.data.orderInfo.order_id,
                   order_token:res.data.orderInfo.order_token,
                    },
                    service:5,
						success: (res) => {
							uni.hideLoading();
							const eventChannel = this.getOpenerEventChannel();
							eventChannel.emit("clearData");
							this.showSuccessModal = true;
						},

						fail: (err) => {
							setTimeout(function () {
								uni.redirectTo({
									url: "/pages/client/petOrder/index",
									complete() {
										uni.$emit("changeTabBar", {
											pageId: "orderPage",
											orderState: ORDER_STATUS_RESERVED,
										});
									},
								});
							}, 1000);
							uni.showToast({
								title: "订单已创建，继续支付或取消",
								icon: "none",
							});
							uni.hideLoading();
						},
					});
				})
				.catch(() => {
					uni.showToast({
						title: "订单已创建，继续支付或取消",
						icon: "none",
					});
					setTimeout(function () {
						uni.redirectTo({
							url: "/pages/client/petOrder/index",
							complete() {
								uni.$emit("changeTabBar", {
									pageId: "orderPage",
									orderState: ORDER_STATUS_RESERVED,
								});
							},
						});
					}, 1000);
					uni.hideLoading();
				});
		},
		paySuccessAction() {
			uni.redirectTo({
				url: "/pages/client/petOrder/index",
				complete() {
					uni.$emit("changeTabBar", {
						pageId: "orderPage",
						orderState: ORDER_STATUS_RESERVED,
					});
				},
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.payment-confirm-container {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-color: #fbf8fc;
	display: flex;
	flex-direction: column;
	padding-bottom: 280rpx;
	overflow: auto;

	.payment-body-container {
		display: flex;
		flex-direction: column;
		padding: 20rpx 32rpx 0 20rpx;

		.info-cell {
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			border-radius: 30rpx;
			background-color: #ffffff;
			margin-bottom: 20rpx;

			.info-title-view {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;

				.phone-text {
					margin-left: 24rpx;
				}
			}

			.address-view {
				width: 100%;
				display: flex;
				align-items: center;

				.address-text {
					margin-top: 12rpx;
				}
			}

			.info-icon {
				width: 36rpx;
				height: 36rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
			}

			.info-view {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 40rpx;
			}

			.line-view {
				width: 100%;
				height: 2rpx;
				background-color: #ececec;
				margin: 20rpx 0;
			}
		}

		.info-pet-cell {
			padding: 20rpx 40rpx;
		}

		.info-pet-flex {
			display: flex;
			align-items: center;

			.pet-headImg {
				width: 52rpx;
				height: 52rpx;
				border-radius: 50%;
				margin-right: 12rpx;
			}

			.petContext {
				color: #666666;
			}
		}
	}

	.recharge-method {
		width: 92.5%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		margin: 0 0 30rpx 30rpx;
		border-radius: 30rpx;

		.wechat {
			width: 100%;
			height: 58px;
			/* 自动布局 */
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 15rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			// border: 1px solid #ececec;
			// margin-top: 30rpx;
		}

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

			.w {
				width: 48rpx;
				height: 48rpx;
			}

			.x {
				font-family: PingFangSC;
				font-size: 24rpx;
				font-weight: 500;
				line-height: 16px;
				letter-spacing: normal;
				color: #333333;
				display: flex;
				margin-left: 24rpx;
			}
		}

		.not-selected {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.recharge-method2 {
		width: 93%;
		margin: 0 auto;
		// padding: 10rpx 0;
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 30rpx;

		.pet-count-summary {
			padding: 24rpx 20rpx 32rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-title {
				color: #272427;
				font-size: 28rpx;
				font-weight: 500;
			}

			&-value {
				color: #272427;
				font-size: 24rpx;
			}
		}

		.info-cell {
			width: 100%;
			padding: 0 23rpx;
			box-sizing: border-box;
			border-radius: 30rpx;
			background-color: #ffffff;
			margin-bottom: 20rpx;

			.info-title-view {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;

				.phone-text {
					margin-left: 24rpx;
				}
			}

			.address-view {
				width: 100%;
				display: flex;
				align-items: center;

				.address-text {
					margin-top: 12rpx;
				}
			}

			.info-icon {
				width: 36rpx;
				height: 36rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
			}

			.info-view {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 40rpx;
			}

			.line-view {
				width: 100%;
				height: 2rpx;
				background-color: #ececec;
				margin: 20rpx 0;
			}
		}

		.wechat {
			width: 92%;
			height: 60rpx;
			/* 自动布局 */
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx 0 24rpx;
			border-radius: 8px;
			// box-sizing: border-box;
			// border: 1px solid #ececec;
			margin-top: 10rpx;

			.money4 {
				color: #ff19a0;
				font-family: PingFangSC;
				font-size: 11px;
				margin-right: 10rpx;
			}

			.x {
				font-family: PingFangSC;
				font-size: 24rpx;
				font-weight: normal;
				color: #9b939a;
			}

			.estimate {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.money {
					font-family: PingFangSC;
					font-size: 24rpx;
					font-weight: 500;
					color: #272427;
					margin-right: 10rpx;
				}

				.money1 {
					font-family: PingFangSC;
					font-size: 24rpx;
					font-weight: 500;
					color: #aaaaaa;
					text-decoration: line-through;
					// margin-right: 60rpx;
				}
			}

			.money {
				font-family: PingFangSC;
				font-size: 24rpx;
				font-weight: 500;
				color: #272427;
				// margin-right: 60rpx;
			}
		}

		.pet-card {
			background: #F5F5F5;
			padding: 20rpx;
			border-radius: 20rpx;
			margin: 0 20rpx 16rpx 20rpx;
		}

		.pet-card-header {
			display: flex;
			align-items: center;

			.pet-card-info {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.pet-card-left {
					flex: 1;
					display: flex;
					align-items: center;
					gap: 8rpx;

					.pet-avatar-small {
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
						flex-shrink: 0;
					}

					.pet-info-small {
						flex: 1;
						display: flex;
						flex-direction: column;
						gap: 4rpx;

						.pet-name-small {
							font-size: 24rpx;
							color: #333333;
							font-weight: 500;
						}

						.pet-desc-small {
							font-size: 20rpx;
							color: #666;
						}
					}
				}

				.pet-card-price {
					font-size: 24rpx;
					color: #272427;
					font-weight: 500;
					margin-right: 16rpx;
				}

				.pet-card-toggle {
					color: #FF19A0;
					font-size: 24rpx;
				}
			}
		}

		.pet-card-body {
			margin-top: 24rpx;

			.pet-detail-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 24rpx;

				.pet-avatar {
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
					margin-right: 8rpx;
					flex-shrink: 0;
				}

				.pet-info {
					flex: 1;
					display: flex;
					flex-direction: column;

					.pet-name {
						font-size: 24rpx;
						color: #333333;
						font-weight: 500;
					}

					.pet-desc {
						font-size: 20rpx;
						color: #666;
					}
				}
			}

			.pet-card-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
				font-size: 24rpx;
				margin-top: 24rpx;

				&:last-child {
					margin-bottom: 0;
				}
			}

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

			.pet-card-value,
			.pet-card-money {
				font-size: 24rpx;
				color: #272427;
			}

			.pet-card-money-wrap {
				display: flex;
				align-items: center;
				gap: 12rpx;
			}

			.pet-card-discount-tag {
				font-size: 24rpx;
				color: #FF19A0;
			}

			.pet-card-original-price {
				font-size: 22rpx;
				color: #9B939A;
				text-decoration: line-through;
			}

			.service-list {
				.service-item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 24rpx;

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

					.service-item-name {
						font-size: 24rpx;
						color: #9B939A;
					}

					.service-item-price {
						font-size: 24rpx;
						color: #272427;
					}
				}
			}

			// .pet-card-total {
			// 	margin-top: 12rpx;
			// 	padding-top: 16rpx;
			// 	border-top: 1rpx solid #ececec;
			// }

			.pet-card-remark {
				margin-top: 20rpx;
			}

			.pet-remark-input {
				width: 100%;
				padding: 0rpx 20rpx;
				background: #fff;
				border-radius: 16rpx;
				font-size: 24rpx;
				color: #272427;
				box-sizing: border-box;
				height: 64rpx;
			}
		}

		.wechat1 {
			width: 92%;
			height: 60rpx;
			/* 自动布局 */
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx 0 24rpx;
			border-radius: 8px;
			// box-sizing: border-box;
			// border: 1px solid #ececec;
			margin-top: 10rpx;

			.x {
				font-family: PingFangSC;
				font-size: 24rpx;
				font-weight: normal;
				color: #9b939a;
			}

			.money6 {
				font-family: PingFangSC;
				font-size: 24rpx;
				font-weight: 500;
				color: #272427;
				// margin-right: 60rpx;
			}

			.mb-discount {
				display: flex;
				align-items: center;

				.money {
					font-family: PingFangSC;
					font-size: 24rpx;
					font-weight: 500;
					color: #272427;
					// margin-right: 60rpx;
				}

				.money4 {
					color: #ff19a0;
					font-family: PingFangSC;
					font-size: 11px;
					margin-right: 10rpx;
				}

				.money5 {
					color: #aaaaaa;
					font-family: PingFangSC;
					font-size: 11px;
					text-decoration: line-through;
				}
			}
		}

		.wechat2 {
			width: 92%;
			height: 60rpx;
			/* 自动布局 */
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx 0 24rpx;
			border-radius: 8px;
			// box-sizing: border-box;
			// border: 1px solid #ececec;
			margin-top: 10rpx;

			.x {
				font-family: PingFangSC;
				font-size: 24rpx;
				font-weight: normal;
				color: #9b939a;
			}

			.money {
				font-family: PingFangSC;
				font-size: 24rpx;
				font-weight: 500;
				color: #272427;
				// margin-right: 60rpx;
			}

			.mb-discount {
				display: flex;
				align-items: center;

				.money {
					font-family: PingFangSC;
					font-size: 24rpx;
					font-weight: 500;
					color: #272427;
					// margin-right: 60rpx;
				}

				.money4 {
					color: #ff19a0;
					font-family: PingFangSC;
					font-size: 11px;
					margin-right: 10rpx;
				}

				.money5 {
					color: #aaaaaa;
					font-family: PingFangSC;
					font-size: 11px;
					text-decoration: line-through;
				}
			}

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

				.x {
					font-family: PingFangSC;
					font-size: 24rpx;
					font-weight: normal;
					color: #9b939a;
				}

				.x1 {
					font-family: PingFangSC;
					font-size: 12px;
					color: #ff19a0;
					margin-left: 4rpx;
				}
			}
		}
	}

	.carousel {
		background: #fff;
		padding: 30rpx 0;
		margin: 0 0 20rpx 28rpx;
		border-radius: 30rpx;
		width: 93%;

		// overflow: hidden;
		.member-carousel {
			width: 659rpx;
			height: 253rpx;
			margin-left: 30rpx;
			display: flex;
			//  white-space: nowrap;
			overflow: auto;

			.actimeb {
				height: 120px;
				position: relative;

				.q {
					width: 38rpx;
					height: 50rpx;
					border-radius: 50%;
					// border: 1px solid #000;
					position: absolute;
					bottom: 15rpx;
					left: 7rpx;
					z-index: 1000000;
				}

				.mn {
					position: absolute;
					bottom: 18rpx;
					left: 74rpx;
					font-family: PingFangSC;
					font-size: 24px;
					color: #3d3d3d;
				}

				.mn2 {
					position: absolute;
					bottom: 18rpx;
					left: 74rpx;
					font-family: PingFangSC;
					font-size: 24px;
					color: #644d29;
				}

				.mn3 {
					position: absolute;
					bottom: 23rpx;
					left: 74rpx;
					font-family: PingFangSC;
					font-size: 24px;
					color: #cbad78;
				}

				.img-meb {
					width: 220px;
					//  display: inline-block;
					height: 115.25px;
					// display: inline-block; /* 使图片并排显示 */
					margin-right: 10px;
				}
			}

			.img-meb {
				width: 220px;
				//  display: inline-block;
				height: 115.25px;
				// display: inline-block; /* 使图片并排显示 */
				margin-right: 10px;
			}

			// }

			// }
		}

		.rights {
			display: flex;
			justify-content: center;

			.r1 {
				font-family: PingFang SC;
				font-size: 12px;
				color: #3d3d3d;
			}

			.r2 {
				font-family: PingFang SC;
				font-size: 12px;
				color: #ff0097;
			}
		}
	}

	.elastic-layer {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		z-index: 999;
	}

	.select-pet {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		padding-bottom: 60rpx;
		width: 100%;
		border-radius: 20px 20px 0px 0px;
		height: 942rpx;
		z-index: 99999;

		.agreement {
			position: absolute;
			bottom: 44rpx;
			left: 105px;

			.not-selected {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.agreement-img {
			position: absolute;
			bottom: 41rpx;
			left: 140px;
			// border: 1px solid #000;
			width: 313rpx;
			height: 37rpx;
		}

		.close-icon {
			width: 50rpx;
			height: 50rpx;
			// border: 1px solid #000;
			position: absolute;
			right: 31rpx;
			top: 35rpx;
		}

		.file-b {
			width: 100%;
			height: 100%;
		}

		.origin1 {
			position: absolute;
			left: 34rpx;
			top: 121rpx;
			width: 209rpx;
			height: 126rpx;
		}

		.origin2 {
			position: absolute;
			left: 272rpx;
			top: 121rpx;
			width: 209rpx;
			height: 126rpx;
		}

		.origin3 {
			position: absolute;
			left: 500rpx;
			top: 121rpx;
			width: 209rpx;
			height: 126rpx;
		}

		.money {
			position: absolute;
			left: 46rpx;
			bottom: 113rpx;
			font-family: Source Han Sans;
			font-size: 24px;
			color: #ffffff;
		}

		.amountOut {
			position: absolute;
			left: 20rpx;
			bottom: 113rpx;
			width: 698rpx;
			height: 98rpx;
			// border: 1px solid #000;
		}

		.money1 {
			position: absolute;
			right: 92rpx;
			bottom: 66rpx;
			font-family: PingFangSC;
			font-size: 16px;
			font-weight: 500;
			color: #ff0097;
		}

		.money2 {
			position: absolute;
			right: 81rpx;
			bottom: 205rpx;
			font-family: Source Han Sans;
			font-size: 16px;
			color: #ffffff;
		}

		.original {
			display: flex;
			position: absolute;
			left: 176rpx;
			bottom: 125rpx;

			.y {
				font-family: PingFangSC;
				font-size: 12px;
				font-weight: normal;
				color: #ffffff;
			}
		}

		.roll-rights {
			position: absolute;
			left: 38rpx;
			bottom: 204rpx;
			width: 350px;

			.roll-item {
				display: flex;
				overflow: auto;
				width: 363px;
				height: 200rpx;

				// border: 1px solid #000;
				.roll-e {
					// width: 280px;
					display: flex;

					.roll-t {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						width: 150rpx;

						.m {
							width: 36px;
							height: 36px;
						}

						.z {
							font-family: PingFangSC;
							font-size: 12px;
							color: #333333;
						}
					}
				}
			}
		}
	}

	.handle-view {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		box-shadow: 0px -2rpx 10rpx 0px rgba(0, 0, 0, 0.05);
		z-index: 99;
		display: flex;
		flex-direction: column;

		.handle-view-content {
			width: 99%;
			padding: 40rpx 36rpx 40rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.handle-safe-area {
			height: constant(safe-area-inset-bottom);
			height: env(safe-area-inset-bottom);
			background-color: #fff;
		}

		.handle-info {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-between;

			.handle-info-cell {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				width: 100%;

				.money {
					color: #ff19a0;
					font-weight: bold;
					font-family: Source Han Sans;
					font-size: 24px;
				}

				.app-fc1 {
					text-decoration: line-through;
					color: #999999;
					font-family: PingFangSC;
					font-size: 18px;
				}

				.app-fc12 {
					text-decoration: line-through;
					color: #999999;
					font-family: PingFangSC;
					font-size: 16px;
					margin-left: 10rpx;
				}

				.tips-icon {
					width: 24rpx;
					height: 24rpx;
				}
			}

			.tip-cell {
				align-items: center;
			}
		}

		.handle-btn {
			width: 260rpx;
			height: 90rpx;
			border-radius: 45rpx;
			background-color: #ff19a0;
			display: flex;
			align-items: center;
			justify-content: center;

			.cfom {
				color: #fff;
				font-size: 16px;
				font-family: PingFangSC;
			}
		}
	}

	.elastic-layer {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		z-index: 999;
	}

	.additional-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 9999;

		.close-icon {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			right: 23rpx;
			top: 2rpx;
		}

		.recharge-method2 {
			height: 541rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #fff;
			margin-bottom: 20rpx;
			border-radius: 30rpx;
			width: 100%;

			.wechat {
				width: 92%;
				height: 58px;
				/* 自动布局 */
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 12px;
				border-radius: 8px;
				box-sizing: border-box;
				// border: 1px solid #ececec;
				margin-bottom: 30rpx;
			}

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

				.w {
					width: 48rpx;
					height: 48rpx;
				}

				.x {
					font-family: PingFangSC;
					font-size: 24rpx;
					font-weight: 500;
					line-height: 16px;
					letter-spacing: normal;
					color: #3d3d3d;
					display: flex;
					margin-left: 24rpx;
				}
			}

			.not-selected {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.payment {
			position: absolute;
			border-radius: 100px;
			bottom: 50rpx;
			left: 30rpx;
			width: 343px;
			height: 48px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #FF19A0;
			z-index: 10000;

			.Z {
				font-family: PingFang SC;
				font-size: 16px;
				font-weight: normal;
				color: #FF19A0;
			}
		}
	}
}
</style>