<template>
	<view class="min-page bg-f7 color-333 u-font-28 relative" x>
		<view class="top" :style="topStyle">
			<up-navbar bg-color="transparent" :fixed="false" :placeholder="false" :title="title" left-icon-color="#fff"
				@leftClick="back('/userPackage/index/index')" title-color="#fff"></up-navbar>
			<view class="u-flex info u-col-center">
			</view>
		</view>
		<view class="bottom">
			<view class="time u-flex u-row-center" v-if="item.status=='ing'">
				<text class="color-666">剩余助力时间：</text>
				<view class="u-font-32">
					<text class="number">{{returnNum(0)}}</text>
					<text class="gap">：</text>
					<text class="number">{{returnNum(1)}}</text>
					<text class="gap">：</text>
					<text class="number">{{returnNum(2)}}</text>
				</view>
			</view>
			<view class="goods u-flex u-col-center" @click="toDetail(item.packageInfo)">
				<view class="img-box">
					<up-image width="174rpx" height="174rpx" radius="14rpx" :src="item.goodsImg"></up-image>
					<view class="tag" v-if="item.packageInfo&&item.packageInfo.tieredDiscount.length">
						阶梯优惠</view>
				</view>
				<view class=" u-flex-1 u-p-l-16 u-flex u-col-center u-row-between">
					<view v-if="item&&item.packageInfo" style="max-width: 326rpx;">
						<view class="font-bold u-font-32 u-line-2">{{item.packageInfo
.packageName}}</view>

						<view class="u-m-t-10 color-666 u-line-1">{{item.packageInfo.description}}</view>

					</view>
					<view>
						<template v-if="item.id&&item.isMyself">
							<statusVue :status="item.status"></statusVue>
						</template>
						<template v-if="item.id&&!item.isMyself&&item.canHelp">
							<statusVue :status="item.status"></statusVue>
						</template>


						<!-- 阶梯 -->
						<view v-if="isHasDiscount(item.packageInfo)" class="u-m-t-16">
							<template v-if="item.status=='ing'||item.status=='timeout'">
								<view class=" main-color">
									当前到手
								</view>
								<view class=" font-bold price main-color">
									<text class="u-font-26"> ¥</text>
									<text class="u-font-40">{{nowPrice}}</text>
								</view>
								<view class=" main-color old-price" v-if="item.packageInfo">
									¥{{item.packageInfo.originPrice}}
								</view>
							</template>
							<template v-else>
								<template v-if="item.finalPrice">
									<view class=" font-bold price main-color">
										<text class="u-font-26"> ¥</text>
										<text class="u-font-40">{{item.finalPrice}}</text>
									</view>
									<view class=" main-color old-price" v-if="item.packageInfo">
										¥{{item.packageInfo.originPrice}}
									</view>
								</template>
								<template v-else>
									<view class=" font-bold price main-color" v-if="item.packageInfo">
										<text class="u-font-26"> ¥</text>
										<text class="u-font-40">{{item.packageInfo.price}}</text>
									</view>
									<view class="main-color old-price" v-if="item.packageInfo">
										¥{{item.packageInfo.originPrice}}
									</view>
								</template>
							</template>

						</view>
						<template v-else>
							<view class=" font-bold price main-color" v-if="item.finalPrice">
								<text class="u-font-26"> ¥</text>
								<text class="u-font-40">{{item.finalPrice}}</text>
							</view>
							<view class=" main-color old-price" v-if="item.packageInfo">
								¥{{item.packageInfo.originPrice}}
							</view>
						</template>


					</view>
				</view>
			</view>
			<template v-if="item.status">
				<view class="refund" v-if="item.status=='refunding'&&item.isMyself">已申请退款，需等待商家审核</view>
				<view class="refund" v-else-if="returnTime==='00:00:00'&&!item.isMyself">当前订单已失效</view>
				<view class="refund" v-else-if="item.status!='ing'&&!item.isMyself">当前订单已失效</view>
			</template>

			<view class="shop-box">
				<view class="u-flex u-row-center u-flex-col u-col-center"
					v-if="(item.status=='wait_verify'||item.status=='refunding')&&item.isMyself">
					<up-qrcode :val="item.verifyCode" :size="104"></up-qrcode>
					<view class="u-flex u-m-t-22 u-m-b-18 u-col-center">
						<text>{{item.verifyCode}}</text>
						<image @click="copyText(item.verifyCode)" class="copy" src="/userPackage/static/image/copy.png">
						</image>
					</view>
				</view>

				<view class="shop ">
					<view class="u-flex">
						<text style="min-width: 180rpx;" class="color-666">可核销门店：</text>
						<text>{{item.shopName}}</text>
					</view>
					<view class="u-m-t-32 u-flex">
						<text style="min-width: 180rpx;" class="color-666">门店地址：</text>
						<text>{{item.shopAddress}}</text>
					</view>
				</view>
			</view>

			<view class="desc" v-if="isHasDiscount(item.packageInfo)">
				<view class="u-flex u-row-between" v-if="item.isMyself">
					<view class="name">已成功分享{{item.shareNum||0}}人</view>


					<view class="u-flex color-666" style="align-items: baseline;" v-if="item.status=='ing'" @click="uni.navigateTo({
						url:'/userPackage/members/members?recordId='+item.id
					})">
						<text>查看全部</text>
						<up-icon name="arrow-right"></up-icon>
					</view>
				</view>
				
				<view class="u-flex u-row-between" v-if="!item.isMyself&&item.status=='ing'">
					<view class="name">已成功分享{{item.shareNum||0}}人</view>
				
					<view class="u-flex color-666" style="align-items: baseline;" v-if="item.status=='ing'" @click="uni.navigateTo({
						url:'/userPackage/members/members?recordId='+item.id
					})">
						<text>查看全部</text>
						<up-icon name="arrow-right"></up-icon>
					</view>
				</view>


				<template v-if="item.status=='ing'&&item.isMyself">
					<view class="u-m-t-32 progress-box">
						<view class="progress" :style="{width:progressPercent+'%'}"></view>
					</view>
					<view class="u-m-t-12 u-flex u-row-between">
						<text class="color-666">已分享{{item.shareNum||0}}人</text>
						<view class="share-text" v-if="maxNum*1&&minPrice*1">
							<text v-if="progressPercent<100">分享{{maxNum}}人，</text>
							<text class="font-bold u-font-32">{{minPrice}}元</text>
							<text>即可购买</text>
						</view>
					</view>

					<view class="u-flex u-row-between u-m-t-24">
						<view class="name">分享说明</view>
						<view class="u-flex color-666" @click="showDesc=!showDesc" style="align-items: baseline;">
							<text class="u-m-r-18">{{showDesc?'收起':'展开'}}</text>
							<view class="guodu" :class="{rotate:!showDesc}">
								<up-icon name="arrow-down" bold></up-icon>
							</view>
						</view>

					</view>

					<template v-if="showDesc">
						<view class="u-m-t-26 text-center table" v-if="item.packageInfo">
							<view class="u-flex header color-666">
								<view class="u-flex-1 u-p-t-32 u-p-b-32">分享人数</view>
								<view class="u-flex-1 u-p-t-32 u-p-b-32">购买价格（元）</view>
							</view>
							<view class="u-flex row" v-for="(step,index) in item.packageInfo.tieredDiscount"
								:key="index">
								<view class="u-flex-1 u-p-t-32 u-p-b-32">{{step.peopleNum}}</view>
								<view class="u-flex-1 u-p-t-32 u-p-b-32">¥{{step.price}}</view>
							</view>
						</view>

						<view class="u-m-t-26">
							<view v-if="item.packageInfo">
								分享期限（小时）：{{item.packageInfo.expireHours}}
							</view>
							<view class="u-m-t-10">
								规定期限内的助力才会被计入
							</view>
							<view class="u-m-t-40">
								如何才是分享成功？被分享人只需要点击《助力》，提示助力成功后即可
							</view>

						</view>
					</template>
				</template>

				<template v-if="!item.isMyself">
					<view class="u-flex u-row-between u-m-t-24">
						<view class="name">分享说明</view>
						<view class="u-flex color-666" @click="showDesc=!showDesc" style="align-items: baseline;">
							<text class="u-m-r-18">{{showDesc?'收起':'展开'}}</text>
							<view class="guodu" :class="{rotate:!showDesc}">
								<up-icon name="arrow-down" bold></up-icon>
							</view>
						</view>

					</view>

					<template v-if="showDesc">
						<view class="u-m-t-26 text-center table" v-if="item.packageInfo">
							<view class="u-flex header color-666">
								<view class="u-flex-1 u-p-t-32 u-p-b-32">分享人数</view>
								<view class="u-flex-1 u-p-t-32 u-p-b-32">购买价格（元）</view>
							</view>
							<view class="u-flex row" v-for="(step,index) in item.packageInfo.tieredDiscount"
								:key="index">
								<view class="u-flex-1 u-p-t-32 u-p-b-32">{{step.peopleNum}}</view>
								<view class="u-flex-1 u-p-t-32 u-p-b-32">¥{{step.price}}</view>
							</view>
						</view>

						<view class="u-m-t-26">
							<view v-if="item.packageInfo">
								分享期限（小时）：{{item.packageInfo.expireHours}}
							</view>
							<view class="u-m-t-10">
								规定期限内的助力才会被计入
							</view>
							<view class="u-m-t-40">
								如何才是分享成功？被分享人只需要点击《助力》，提示助力成功后即可
							</view>

						</view>
					</template>
				</template>

			</view>


			<template v-if=" isShowOrder(item) ">
				<view class="order">
					<view class="u-flex u-row-between">
						<view class="font-bold u-font-32">订单信息</view>

						<view class="u-flex color-666" @click="showOrder=!showOrder" style="align-items: baseline;">
							<text class="u-m-r-18">{{showOrder?'收起':'展开'}}</text>
							<view class="guodu" :class="{rotate:!showOrder}">
								<up-icon name="arrow-down" bold></up-icon>
							</view>
						</view>
					</view>
					<view class="u-m-t-16" v-if="showOrder">

						<view class="u-flex u-row-between item" v-if="item.finalPrice">
							<view class="color-666">实付金额</view>
							<view class="">¥{{item.finalPrice}}</view>
						</view>
						<view class="u-flex u-row-between item">
							<view class="color-666">订单号</view>
							<view class="">{{item.orderNo}}</view>
						</view>
						<view class="u-flex u-row-between item">
							<view class="color-666">支付时间</view>
							<view class="">{{item.payTime}}</view>
						</view>

						<view class="u-flex u-row-between item" v-if="item.verifyTime">
							<view class="color-666">核销时间</view>
							<view class="">{{item.verifyTime}}</view>
						</view>
					</view>

				</view>
			</template>



		</view>
		<view style="height: 100px;"></view>

		<view class="btns" v-if="item&&item.id">
			<template v-if="item.isMyself">
				<template v-if="item.status=='ing'">
					<view class="btn" @click="cancel(item)">取消活动</view>
					<!-- <view class="btn" @click="fastBuy(item)">立即购买</view> -->
					<view class="btn" @click="payExchange(item)">立即购买</view>

					<button class="btn main" open-type="share" @click.stop="share(item)">分享</button>

				</template>

				<template v-if="item.status=='timeout'">
					<view class="btn" @click="cancel(item)">取消活动</view>
					<view class="btn" @click="payExchange(item)">立即购买</view>
				</template>

				<template v-if="item.status=='wait_verify'">
					<view class="btn " @click.stop="refund(item)">申请退款</view>
				</template>
				<template v-if="item.status=='refunding'">
					<button class="btn main" @click.stop="cancelRefund(item)">取消退款</button>
				</template>

			</template>
			
			
			<template v-else-if="item.status=='ing'&&returnTime!='00:00:00'&&item.canHelp">
				<button class="btn main" @click.stop="help(item)">立即助力</button>
			</template>

			<view class="btn" v-if="!item.isMyself&& !item.canHelp&&item.status=='ing'">已经助力过了</view>

		</view>


		<!-- 需要支付的弹窗 -->
		<up-popup :show="popupData.show" mode="bottom" closeOnClickOverlay @close="popupData.show = false">
			<view class="popup-content">
				<view class="popup-content-top u-flex u-row-right">
					<up-icon name="close" bold="" @click="popupData.show = false"></up-icon>
				</view>
				<view class="goods-info" v-if="item&&item.packageInfo">
					<view class="u-flex">
						<image class="cover" :src="item.goodsImg"></image>
						<view class="u-flex u-flex-1 u-row-between u-p-l-16 u-col-center">
							<view style="max-width: 340rpx;">
								<view class="u-font-32 font-bold u-line-1" v-if="item && item.packageInfo">
									{{item.packageInfo.packageName}}
								</view>

								<view class="u-m-t-12 color-666 u-line-2">{{item.packageInfo.wareDetail}}</view>
							</view>
							<view>
								<view class="price">¥{{nowPrice}}</view>
								<view class="old-price">¥{{item.packageInfo.originPrice}}</view>
								<view class="limitBuyNum" v-if="item.packageInfo.limitBuyNum">
									限购{{item.packageInfo.limitBuyNum}} </view>
							</view>
						</view>
					</view>

				</view>

				<view class="popup-content-bottom   u-flex u-row-between u-col-center">
					<view class="u-flex u-col-baseline">
						<text class="color-666">合计：</text>
						<text class=" price">{{totalPrice}}</text>
					</view>
					<view class="u-flex">
						<up-icon name="minus-circle" size="20" color="#666" @click="changeNumber('-')"></up-icon>
						<text class="u-m-l-20 u-m-r-20">{{number}}</text>
						<up-icon name="plus-circle-fill" size="20" color="#ED5A2E" @click="changeNumber('+')"></up-icon>
					</view>

				</view>

				<view class="u-m-t-42 u-flex u-row-center">
					<view class="btn" @click="payExchange">去支付</view>
				</view>
			</view>
		</up-popup>
		<!-- 兑换确认弹窗end -->

	</view>
</template>

<script setup>
	import {
		Storelogin
	} from '@/stores/user.js';
	const storelogin = Storelogin();
	import {
		back
	} from '@/utils/uniapp.js'
	import statusVue from '@/userPackage/components/status.vue'
	import * as Api from '@/common/api/market/package.js'
	import {
		wxShare
	} from '@/utils/share.js'
	import {
		computed,
		reactive
	} from 'vue'
	import {
		getRemainingHMS
	} from '@/utils/countdown.js'
	const item = reactive({
		status: ''
	})

	// 判断是否有阶梯优惠
	function isHasDiscount(item) {
		if (!item) {
			return false
		}
		return item.tieredDiscount && item.tieredDiscount.length
	}


	const canShowOrderStatus = ['wait_verify', 'finish', 'refunding', 'refund']

	function isShowOrder(item) {
		if (!item.status) {
			return false
		}
		return item.isMyself && canShowOrderStatus.includes(item.status)
	}


	const imgs = {
		bg: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/d21f2dfd7bec44618f2d5e4b88372b08.png',
		pin: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/3947892924dd481782331513aff00eb3.png'
	}
	const popupData = reactive({
		show: false,
		item: null
	});
	const showOrder = ref(true)
	const showDesc = ref(true)

	const number = ref(1)

	import {
		BigNumber
	} from "bignumber.js";

	function toDetail(item) {
		uni.navigateTo({
			url: '/userPackage/goodsDetail/goodsDetail?id=' + item.id + '&shopId=' + item.shopId
		})
	}

	function changeNumber(step) {
		if (step === '-') {
			if (number.value == 1) {
				return
			}
			number.value--
			return
		}
		if (step === '+') {
			if (item.packageInfo.limitBuyNum == -10086) {
				number.value++
				return
			}
			if (number.value >= item.packageInfo.limitBuyNum) {
				return uni.showToast({
					title: '最多可购买' + item.packageInfo.limitBuyNum + '份',
					icon: 'none'
				})
			}
			number.value++
			return
		}
	}

	function fastBuy() {
		popupData.show = true
	}

	function help(item) {
		Api.help({
			orderId: item.id
		}).then(res => {
			if (res) {
				uni.showToast({
					title: '助力成功'
				})
				setTimeout(() => {
					getDetail()
				}, 1000)
			}
		})
	}

	async function payExchange() {
		uni.setStorageSync('group_buying_order', {
			...item,
			...item.packageInfo,
			shopAddress: item.shopAddress,
			shopName: item.shopName,
			number: number.value,
			price: nowPrice.value,
			paramId: item.id
		})
		uni.navigateTo({
			url: '/userPackage/confirm-order/confirm-order'
		})

	}



	const canRefundStatus = ['待成团', '待核销']

	function canRefund(item) {
		if (canRefundStatus.includes(item.status)) {
			return true
		}
		return false
	}

	const topStyle = {
		backgroundImage: 'url(' + imgs.bg + ')'
	}

	function copyText(text) {
		uni.setClipboardData({
			data: text,
			success() {}
		})
	}
	const query = reactive({
		shopId: '',
		detailId: '',
	})

	async function init(opt) {
		// 获取小程序进入场景和参数
		const launchOptions = uni.getLaunchOptionsSync();
		console.log(launchOptions);
		// 获取链接上的参数
		const launchOptionsQuery = launchOptions.query;
		console.log('launchOptionsQuery', launchOptionsQuery);
		Object.assign(query, launchOptionsQuery)
		console.log(opt)
		Object.assign(query, opt)
		console.log(query)
		if(query.shopId){
			uni.cache.set('shopId', query.shopId)
		}
	}

	function refund(item) {
		uni.showModal({
			title: '提示',
			content: '是否申请退款？',
			showCancel: true,
			success(res) {
				if (res.confirm) {
					Api.applyRefund({
						recordId: item.id,
						orderNo: item.orderNo,
					}).then(res => {
						if (res) {
							uni.showToast({
								title: '申请成功'
							})
							setTimeout(() => {
								getDetail()
							}, 1000)
						}
					})
				}
			}
		})
	}

	function getDetail() {
		Api.orderDetail(query).then(res => {
			if(!res) {
				uni.showModal({
					title: '提示',
					content: '记录不存在',
					showCancel: false,
					success() {
						uni.redirectTo({
							url: '/userPackage/index/index',
						})
					}
				})
				return
			}
			res.packageInfo = res.packageInfo;
			res.goodsImg = res.packageInfo.images[0]
			Object.assign(item, res)
			console.log('item', item)
			uni.cache.set('shopId', item.shopId)
		})
	}
	onLoad(init)

	onShow(async () => {
		await storelogin.actionslogin()
		getDetail()
	})

	let timer = null
	let nowTime = ref(Date.now())
	timer = setInterval(() => {
		nowTime.value = Date.now()
	}, 1000)

	const returnTime = computed(() => {
		nowTime.value
		return getRemainingHMS(item, 'expireTime')
	})

	function returnNum(index) {
		return returnTime.value.split(':')[index]
	}


	function cancel(item) {
		uni.showModal({
			title: '提示',
			content: '是否取消活动？',
			showCancel: true,
			success(res) {
				if (res.confirm) {
					Api.cancel({
						orderId: item.id,
					}).then(res => {
						if (res) {
							uni.showToast({
								title: '取消活动成功'
							})
							setTimeout(() => {
								getDetail()
							}, 1000)
						}
					})
				}
			}
		})
	}

	function cancelRefund(item) {
		uni.showModal({
			title: '提示',
			content: '是否取消退款？',
			showCancel: true,
			success(res) {
				if (res.confirm) {
					Api.cancelRefund({
						recordId: item.id,
						orderNo: item.orderNo,
					}).then(res => {
						if (res) {
							uni.showToast({
								title: '取消成功'
							})
							setTimeout(() => {
								getDetail()
							}, 1000)
						}
					})
				}
			}
		})
	}

	let shareItem = null

	function share(item) {
		shareItem = item
	}
	onShareAppMessage(() => {
		console.log('onShareAppMessage')
		console.log(shareItem)
		const query = `orderId=${shareItem.id}&shopId=${shareItem.shopId}`
		return wxShare({
			title: shareItem.packageInfo.packageName,
			imageUrl: shareItem.goodsImg,
			path: '/userPackage/order/detail' + '?' + query,
			query,
		})
	})

	const title = computed(() => {
		if (!item.isMyself) {
			return '助力好友'
		}
		return '订单详情'
	})



	const nowStep = computed(() => {
		let nowStepItem = null
		if (!item.packageInfo) {
			return nowStepItem
		}
		if (!item.packageInfo.tieredDiscount.length) {
			return nowStepItem
		}
		for (let i in item.packageInfo.tieredDiscount) {
			const nowItem = item.packageInfo.tieredDiscount[i]
			const nextItem = item.packageInfo.tieredDiscount[i + 1]
			if (!nextItem) {
				if (item.shareNum >= nowItem.peopleNum) {
					nowStepItem = nowItem
				}
			} else {
				if (item.shareNum >= nowItem.peopleNum && item.shareNum < nextItem.peopleNum) {
					nowStepItem = nowItem
				}
			}
		}
		return nowStepItem
	})


	const progressPercent = computed(() => {
		if (!item.packageInfo) {
			return 0
		}
		if (!item.packageInfo.tieredDiscount.length) {
			return 0
		}
		if (!nowStep.value) {
			return 0
		}
		const index = item.packageInfo.tieredDiscount.findIndex(v => v.peopleNum==nowStep.value.peopleNum)
		if (index != -1) {
			const percent= (index + 1) / item.packageInfo.tieredDiscount.length * 100
			return percent>=100?100:0;
		}
		return 0
	})
	const nowPrice = computed(() => {
		if (!item.packageInfo) {
			return 0
		}
		if (!item.packageInfo.tieredDiscount.length) {
			return 0
		}
		return nowStep.value ? nowStep.value.price : item.packageInfo.price
	})

	const totalPrice = computed(() => {
		if (!item.packageInfo || !item.packageInfo.price) {
			return 0;
		}
		return BigNumber(number.value).times(nowPrice.value).toNumber()
	})

	const maxNum = computed(() => {
		if (!item.packageInfo || item.packageInfo.tieredDiscount <= 0) {
			return 0
		}
		return item.packageInfo.tieredDiscount[item.packageInfo.tieredDiscount.length - 1].peopleNum
	})
	const minPrice = computed(() => {
		if (!item.packageInfo || item.packageInfo.tieredDiscount <= 0) {
			return 0
		}
		return item.packageInfo.tieredDiscount[item.packageInfo.tieredDiscount.length - 1].price
	})
</script>

<style lang="scss" scoped>
	.top {
		height: 422rpx;
		background-size: cover;

		.info {
			padding: 32rpx 30rpx 0 30rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 700;
		}


	}

	.bottom {
		margin: 0 28rpx;
		transform: translateY(-160rpx);
		border-radius: 16rpx;
		overflow: hidden;

		.time {
			padding: 18rpx 24rpx;
			background: #FFF4E2;
			display: flex;
			align-items: center;
			border-radius: 16rpx 16rpx 0 0;

			.number {
				padding: 6rpx;
				border-radius: 16rpx;
				background: #ED5A2E;
				color: #fff;
				font-size: 32rpx;
				margin-left: 18rpx;
				margin-right: 18rpx;
			}

			.gap {
				font-size: 32rpx;
			}
		}

		.goods {
			background-color: #fff;
			padding: 22rpx 24rpx;

			.main-color {
				color: #EB532A;
			}

			.pin {
				width: 60rpx;
				height: 38rpx;
			}

			.tuan-members {
				padding: 0 16rpx 0 0;
				border-radius: 0 6rpx 6rpx 0;
				background: #4C2828;
				color: #f5d9ad;
				font-weight: 700;
			}

			.price {
				color: #ed5a2e;
			}

			.old-price {
				color: #999;
				text-decoration: line-through;
			}
		}

		.u-font-48 {
			font-size: 48rpx;
		}

		.shop-box {
			background: #fff;
			padding: 32rpx 30rpx 28rpx 30rpx;
			border-radius: 0 0 16rpx 16rpx;
		}

		.copy {
			width: 22rpx;
			height: 22rpx;
			margin-left: 22rpx;
		}

		.shop {
			border-radius: 8rpx;
			background: #F8F8F8;
			padding: 16rpx 34rpx;
		}

		.relative {
			position: relative;
		}

		.members {
			padding: 26rpx 24rpx;
			border-radius: 16rpx;
			margin-top: 32rpx;
			background-color: #fff;

			.list {
				display: flex;
				flex-wrap: wrap;
			}

			.item {
				width: calc(100% / 3);
				display: flex;
				margin-bottom: 32rpx;

				.add-box {
					width: 140rpx;
					height: 140rpx;
					border: 2rpx dashed #D9D9D9;
					border-radius: 50%;
					overflow: hidden;
					position: relative;

					.share {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						opacity: 0;
					}
				}

				&:nth-of-type(3n-1) {
					justify-content: center;
				}

				&:nth-of-type(3n) {
					justify-content: flex-end;
				}

				.box {
					display: flex;
					flex-direction: column;
				}

				.absolute {
					bottom: 0;
					display: flex;
					justify-content: center;
					left: 0;
					right: 0;
				}

				.tuanzhang {
					padding: 8rpx 18rpx;
					border-radius: 20rpx;
					background: #ED5A2E;
					color: #fff;
					bottom: 0;
				}
			}
		}

		.order {
			padding: 32rpx 28rpx;
			border-radius: 16rpx;
			margin-top: 32rpx;
			background-color: #fff;

			.item {
				padding: 16rpx 0;
			}
		}
	}

	.btns {
		position: fixed;
		left: 28rpx;
		right: 28rpx;
		bottom: 0;
		padding-bottom: 60rpx;
		display: flex;
		gap: 40rpx;

		.btn {
			flex: 1;
			padding: 16rpx 28rpx;
			border-radius: 200rpx;
			text-align: center;
			font-size: 32rpx;
			line-height: 1;
			margin: 0;
			justify-content: center;
			border: 2rpx solid #E8AD7B;
			background: #FFF;
			color: #E8AD7B;

			&.main {
				background-color: #E8AD7B;
				color: #fff;
			}
		}
	}

	.guodu {
		transition: all .3s;
	}

	.pin-btn {
		padding: 22rpx 60rpx;
		border-radius: 200rpx;
		text-align: center;
		font-size: 32rpx;
		justify-content: center;
		border: 2rpx solid #E8AD7B;
		background: #E8AD7B;
		color: #fff;
		margin-top: 32rpx;
	}

	.rotate {
		transform: rotate(-90deg);
	}

	.refund {
		padding: 18rpx 164rpx;
		border-radius: 0 0 16rpx 16rpx;
		background: #FFF4E2;
		font-weight: 700;
		margin-bottom: 32rpx;
		text-align: center;
	}

	.popup-content {
		font-size: 28rpx;
		min-height: 300px;

		.popup-content-top {
			padding: 32rpx 28rpx;
			border-bottom: 1px solid #ededed;
		}

		.goods-info {
			padding: 32rpx 28rpx;
			border-bottom: 1px solid #ededed;

			.cover {
				width: 184rpx;
				height: 184rpx;
				border-radius: 16rpx;
				background: #d9d9d9;

				&.bg-fff {
					background-color: #fff;
				}
			}

			.price {
				font-size: 32rpx;
				font-weight: 700;
				color: #ed5a2e;
				line-height: 46rpx;
			}

			.old-price {
				font-size: 32rpx;
				color: #999;
				text-decoration-line: line-through;
				line-height: 48rpx;
			}

			.limitBuyNum {
				color: #666;
				line-height: 42rpx;
			}

		}

		.popup-content-bottom {
			padding: 20rpx;
			border-bottom: 1px solid #ededed;

			.price {
				color: #ed5a2e;
				font-size: 32rpx;
				font-weight: 700;
			}
		}

		.btn {
			display: flex;
			padding: 22rpx 214rpx;
			align-items: flex-start;
			gap: 20rpx;
			border-radius: 66rpx;
			background: #e8ad7b;
			font-size: 32rpx;
			color: #fff;
			font-size: 700;
		}
	}

	.desc {
		padding: 32rpx 46rpx;
		background-color: #fff;
		margin-top: 32rpx;

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

		.table {
			border: 2rpx solid #EDEDED;
			border-radius: 8rpx;
			margin: 0 52rpx;

			.header {
				background: #f8f8f88f;
			}

			.row {
				border-top: 2rpx solid #EDEDED;

				&:first-child {
					border-top: none;
				}
			}
		}

		.rotate {
			transform: rotate(-90deg);
		}
	}

	.progress-box {
		background: rgba(255, 209, 191, 0.52);
		$height: 10rpx;
		height: $height;
		border-radius: $height;
		overflow: hidden;

		.progress {
			height: $height;
			background: #EB532A;
			transition: all 0.3s;
			border-radius: $height;
		}
	}

	.img-box {
		position: relative;

		.tag {
			position: absolute;
			left: 0;
			top: 0;
			padding: 8rpx 18rpx;
			border-radius: 16rpx 0;
			background: #4C2828;
			color: #faeac6;
			font-size: 700;
		}
	}

	.share-text {
		color: #ED5A2E;
	}
</style>