<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 { shareMixin, handleMixinOnLoad, returnQuery } from '@/utils/share.js';
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);
	});
}

onShareAppMessage(async () => {
	let query = await returnQuery();
	const options = {
		title: item.packageInfo.packageName,
		imageUrl: item.goodsImg,
		path: '/userPackage/order/detail' + '?' + query,
		query
	};
	console.log('onShareAppMessage===', options);
	return wxShare(options);
});

onLoad(async (opt) => {
	init(opt);
	await handleMixinOnLoad(opt);
});

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 : percent;
	} else {
		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 0.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>
