<template>
	<view class="page">
		<u-navbar title="推广领取" :border-bottom="false" :background="bgc" back-icon-color="#111827" title-color="#111827"
			title-size="34" title-bold height="44" id="navbar">
		</u-navbar>

		<!-- 顶部卡片 -->
		<view class="hero">
			<view class="hero-bg">
				<view class="b b1"></view>
				<view class="b b2"></view>
				<view class="b b3"></view>
			</view>
			<view class="hero-content">
				<view class="hero-title">专属福利已解锁</view>
				<view class="hero-sub">扫码进入后可领取运营区会员卡并购买</view>
			</view>
		</view>

		<!-- 列表 -->
		<view class="list">
			<view class="section-title">
				<text class="st-main">可购买会员卡</text>
				<text class="st-sub" v-if="areaName">运营区：{{ areaName }}</text>
			</view>

			<view class="loading" v-if="loading">
				<view class="skeleton" v-for="n in 3" :key="n">
					<view class="sk-line w60"></view>
					<view class="sk-line w40"></view>
					<view class="sk-btn"></view>
				</view>
				<text class="loading-text">加载中...</text>
			</view>

			<view v-else>
				<view class="vip-card" v-for="item in vipList" :key="item.id">
					<view class="vip-head">
						<view class="vip-icon">
							<u-icon name="level" size="34" color="#2563EB"></u-icon>
						</view>
						<view class="vip-head-main">
							<view class="vip-title-row">
								<text class="vip-title">{{ item.name || '会员卡' }}</text>
								<view class="tag" v-if="item.discountValue">
									<text>{{ item.discountValue }}折</text>
								</view>
							</view>
							<view class="vip-desc">{{ formatVipMeta(item) }}</view>
						</view>
					</view>

					<view class="vip-footer">
						<view class="vf-left">
							<template v-if="!isFree(item)">
								<text class="vf-yen">¥</text>
								<text class="vf-num">{{ item.price }}</text>
							</template>
							<template v-else>
								<!-- 0元不展示价格 -->
								<text class="vf-free">免费</text>
							</template>
						</view>
						<view class="vf-btn" :class="[isFree(item) ? 'btn-free' : 'btn-buy']" @click.stop="openBuy(item)">
							<text>{{ isFree(item) ? '领取' : '购买' }}</text>
						</view>
					</view>
				</view>

				<u-empty v-if="vipList.length === 0" mode="data" text="暂无可购买的会员卡" margin-top="120"></u-empty>
			</view>
		</view>

		<!-- 购买弹窗 -->
		<u-mask :show="showBuy" :z-index="100" />
		<view class="sheet" v-if="showBuy">
			<view class="sheet-hd">
				<text class="sheet-title">{{ isFree(selectedVip) ? '确认领取' : '确认购买' }}</text>
				<text class="sheet-close" @click="closeBuy">×</text>
			</view>

			<view class="sheet-card">
				<view class="sc-top">
					<view class="sc-name">
						<text class="name">{{ selectedVip.name || '会员卡' }}</text>
						<text class="badge" v-if="selectedVip.discountValue">{{ selectedVip.discountValue }}折</text>
					</view>
					<view class="sc-price">
						<template v-if="isFree(selectedVip)">
							<text class="free">免费</text>
						</template>
						<template v-else>
							<text class="yen">¥</text>
							<text class="num">{{ selectedVip.price }}</text>
						</template>
					</view>
				</view>
				<view class="sc-sub">
				{{ formatVipMeta(selectedVip) }}
				</view>
				<view class="sc-desc" v-if="selectedVip.description">
					{{ selectedVip.description }}
				</view>
			</view>

			<view class="sheet-actions">
				<view class="btn ghost" @click="closeBuy">取消</view>
				<view class="btn primary" @click="payNow">
					<text>{{ paying ? '处理中...' : (isFree(selectedVip) ? '立即领取' : '立即支付') }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bgc: { backgroundColor: "#F7F8FA" },
			promotionId: '',
			rawQ: '',
			loading: false,
			detail: {},
			vipList: [],
			areaId: '',
			areaName: '',
			channelId: '',
			showBuy: false,
			selectedVip: {},
			paying: false,
			redirectVipId: '' // 从登录页带回的 vipId，用于自动重新发起购买
		}
	},
	onLoad(option) {
		const id = this.extractPromotionId(option || {})
		if (!id) {
			uni.showToast({ title: '缺少推广参数', icon: 'none' })
			return
		}
		this.promotionId = String(id)
		if (option && option.vipId) this.redirectVipId = String(option.vipId)
		uni.setStorageSync('areaPromotionId', this.promotionId)
		this.getDetail()
	},
	methods: {
		isFree(vip) {
			if (!vip) return false
			const p = Number(vip.price)
			return !isNaN(p) && p <= 0
		},
		showCounts(item) {
			if (!item) return false
			return (item.perUserCount || item.perUserCount === 0) || (item.totalCount || item.totalCount === 0)
		},
		// 从小程序跳转参数里提取推广ID（兼容：i/id/scene/q）
		extractPromotionId(option) {
			if (option.i || option.id) return option.i || option.id

			// scene 兼容：可能是 "i=2" 或直接 "2"
			if (option.scene) {
				const sc = decodeURIComponent(String(option.scene))
				return this.getQueryValue(sc, 'i') || this.getQueryValue(sc, 'id') || sc
			}

			// 微信扫码进入常见：q=encodeURIComponent(完整URL)
			if (option.q) {
				const decoded = decodeURIComponent(String(option.q))
				this.rawQ = decoded
				return (
					this.getQueryValue(decoded, 'i') ||
					this.getQueryValue(decoded, 'id') ||
					this.getQueryValue(decoded, 'promotionId') ||
					this.getQueryValue(decoded, 'areaPromotionId')
				)
			}

			return ''
		},
		// 从 URL 或 querystring 中取参数
		getQueryValue(urlOrQuery, key) {
			if (!urlOrQuery) return ''
			let q = String(urlOrQuery)
			// 允许传入完整URL
			if (q.indexOf('?') > -1) q = q.split('?')[1] || ''
			if (q.indexOf('#') > -1) q = q.split('#')[0] || ''
			if (!q) return ''
			const parts = q.split('&')
			for (let i = 0; i < parts.length; i++) {
				const kv = parts[i].split('=')
				if (!kv.length) continue
				const k = decodeURIComponent(kv[0] || '').trim()
				if (k !== key) continue
				return decodeURIComponent(kv.slice(1).join('=') || '').trim()
			}
			return ''
		},
		copyPromotionId() {
			if (!this.promotionId) return
			uni.setClipboardData({
				data: this.promotionId,
				success: () => uni.showToast({ title: '已复制', icon: 'success' })
			})
		},
		getDetail() {
			if (!this.promotionId) return
			this.loading = true
			this.$u.get(`/app/areaPromotion/detail?id=${this.promotionId}`).then(res => {
				this.loading = false
				if (res.code !== 200) {
					uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' })
					return
				}
				const data = res.data || {}
				this.detail = data

				let list = []
				if (Array.isArray(data)) list = data
				else if (Array.isArray(data.list)) list = data.list
				else if (Array.isArray(data.rows)) list = data.rows
				else if (Array.isArray(data.vipList)) list = data.vipList
				else if (Array.isArray(data.couponList)) list = data.couponList
				else if (Array.isArray(data.data)) list = data.data

				this.vipList = list || []

				// areaId：用于获取支付通道（如果接口没给，就从列表项兜底）
				this.areaId =
					data.areaId ||
					data.vipAreaId ||
					(this.vipList[0] && (this.vipList[0].areaId || this.vipList[0].vipAreaId)) ||
					''

				// 运营区名称：用于展示
				this.areaName =
					data.areaName ||
					data.vipAreaName ||
					(this.vipList[0] && (this.vipList[0].areaName || this.vipList[0].vipAreaName)) ||
					''

				if (this.areaId) this.getChannelId()

				// 从登录页带回：自动打开该会员卡并重新发起购买
				if (this.redirectVipId) {
					const vip = this.vipList.find(v => String(v.id) === String(this.redirectVipId))
					const vid = this.redirectVipId
					this.redirectVipId = ''
					if (vip) {
						this.openBuy(vip)
						setTimeout(() => this.payNow(), 800)
					}
				}
			}).catch(() => {
				this.loading = false
				uni.showToast({ title: '网络错误', icon: 'none' })
			})
		},
		// 列表中展示的简短描述，避免拥挤
		formatVipMeta(item) {
			if (!item) return ''
			const parts = []
			if (item.validDays || item.validDays === 0) parts.push(`有效期${item.validDays}天`)
			if (item.limitTotal || item.limitTotal === 0) parts.push(`共${item.limitTotal}次`)
			if (item.enableLimit) {
				const r = item.limitRound
				const c = item.limitCount
				if ((r || r === 0) && (c || c === 0)) parts.push(`每${r}天${c}次`)
			} else if (item.enableLimit === false) {
				parts.push('无频率限制')
			}

			if (item.perUserCount || item.perUserCount === 0) parts.push(`每人限购${item.perUserCount}`)

			// 使用门槛（minAmount）：0/空 => 无门槛
			const min = Number(item.minAmount)
			if (!isNaN(min) && min > 0) parts.push(`使用门槛¥${item.minAmount}`)
			else parts.push('无门槛')

			return parts.length ? parts.join(' · ') : '—'
		},
		getChannelId() {
			if (!this.areaId) return
			const appId = this.$store && this.$store.state ? this.$store.state.appid : ''
			if (!appId) return
			this.$u.get(`/app/channel/list?appId=${appId}&areaId=${this.areaId}&bstType=3&appType=1`).then(res => {
				if (res.code === 200 && res.data && res.data.length) {
					this.channelId = res.data[0].id
				}
			})
		},
		openBuy(item) {
			this.selectedVip = item || {}
			this.showBuy = true
			// 弹出时尽量提前准备支付通道
			if (!this.channelId && this.areaId) this.getChannelId()
		},
		closeBuy() {
			this.showBuy = false
			this.selectedVip = {}
		},
		// 静默登录（仅用 wx.login 的 code 换 token）
		silentLogin() {
			return new Promise((resolve) => {
				// #ifdef MP-WEIXIN
				wx.login({
					success: (res) => {
						if (!res.code) {
							resolve(false)
							return
						}
						const data = { loginCode: res.code, appId: this.$store.state.appid }
						this.$u.post('/wxLogin', data).then((loginRes) => {
							if (loginRes.code === 200) {
								uni.setStorageSync('token', loginRes.token)
								resolve(true)
							}else if(res.code == 401){
								resolve(false)
							} else {
								resolve(false)
							}
						}).catch(() => resolve(false))
					},
					fail: () => resolve(false)
				})
				// #endif
				// #ifndef MP-WEIXIN
				resolve(false)
				// #endif
			})
		},
		// 跳转登录页，登录成功后带参数回到本页重新购买
		goLoginWithRedirect() {
			const backUrl = '/pages/tuihuang?i=' + encodeURIComponent(this.promotionId) + '&vipId=' + encodeURIComponent(this.selectedVip.id)
			uni.navigateTo({
				url: '/pages/login/login?redirect=' + encodeURIComponent(backUrl)
			})
		},
		payNow() {
			if (this.paying) return
			if (!this.selectedVip || !this.selectedVip.id) {
				uni.showToast({ title: '缺少会员卡信息', icon: 'none' })
				return
			}
			if (!this.channelId) {
				uni.showToast({ title: '支付通道未准备好，请稍后重试', icon: 'none' })
				if (this.areaId) this.getChannelId()
				return
			}
			const appId = this.$store && this.$store.state ? this.$store.state.appid : ''
			if (!appId) {
				uni.showToast({ title: '缺少appId配置', icon: 'none' })
				return
			}

			this.paying = true
			uni.showLoading({ title: '加载中...', mask: true })

			const vip = this.selectedVip
			const data = {
				channelId: this.channelId,
				appId,
				appType: 1,
				vipId: vip.id,
				vip
			}

			const doPayResult = (res) => {
				if (res.data && res.data.needPay) {
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.payParams.timeStamp,
						nonceStr: res.data.payParams.nonceStr,
						package: res.data.payParams.packageVal,
						signType: res.data.payParams.signType,
						paySign: res.data.payParams.paySign,
						success: () => {
							this.$u.put(`/app/pay/refreshPayResult?no=${res.data.pay.no}`).then(() => {
								this.paying = false
								this.showBuy = false
								uni.hideLoading()
								uni.showToast({ title: '购买成功', icon: 'success', duration: 2000 })
							}).catch(() => {
								this.paying = false
								uni.hideLoading()
								uni.showToast({ title: '支付结果刷新失败', icon: 'none' })
							})
						},
						fail: () => {
							this.paying = false
							uni.hideLoading()
							uni.showToast({ title: '已取消支付', icon: 'none' })
						}
					})
				} else {
					this.paying = false
					this.showBuy = false
					uni.hideLoading()
					uni.showToast({ title: '购买成功', icon: 'success', duration: 2000 })
				}
			}

			this.$u.post(`/app/vipOrder`, data).then(res => {
				if (res.code === 401) {
					this.silentLogin().then((silentOk) => {
						if (silentOk) {
							// 静默登录成功，用新 token 再请求一次并直接调起支付
							this.$u.post(`/app/vipOrder`, data).then(res2 => {
								if (res2.code !== 200) {
									this.paying = false
									uni.hideLoading()
									uni.showToast({ title: res2.msg || '下单失败', icon: 'none', duration: 5000 })
									return
								}
								doPayResult(res2)
							}).catch(() => {
								this.paying = false
								uni.hideLoading()
								uni.showToast({ title: '网络错误', icon: 'none', duration: 5000 })
							})
						} else {
							this.paying = false
							uni.hideLoading()
							this.goLoginWithRedirect()
						}
					})
					return
				}
				if (res.code !== 200) {
					this.paying = false
					uni.hideLoading()
					uni.showToast({ title: res.msg || '下单失败', icon: 'none' ,duration:5000})
					return
				}
				doPayResult(res)
			}).catch(() => {
				this.paying = false
				uni.hideLoading()
				uni.showToast({ title: '网络错误', icon: 'none',duration:5000 })
			})
		}
	}
}
</script>

<style lang="scss">
page {
	background: #F7F8FA;
	min-height: 100vh;
}

.page {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.hero {
	margin: 18rpx 24rpx 8rpx;
	border-radius: 28rpx;
	overflow: hidden;
	position: relative;
	background: linear-gradient(135deg, #EAF2FF 0%, #F7FBFF 40%, #FFFFFF 100%);
	border: 1rpx solid rgba(37, 99, 235, 0.12);
	box-shadow: 0 18rpx 40rpx rgba(17, 24, 39, 0.08);
}

.hero-bg {
	position: absolute;
	inset: 0;
	.b {
		position: absolute;
		border-radius: 50%;
		filter: blur(40rpx);
		opacity: 0.5;
	}
	.b1 { width: 360rpx; height: 360rpx; background: #60A5FA; top: -140rpx; right: -120rpx; }
	.b2 { width: 280rpx; height: 280rpx; background: #34D399; bottom: -140rpx; left: -120rpx; opacity: 0.35; }
	.b3 { width: 240rpx; height: 240rpx; background: #A78BFA; top: 40rpx; left: 120rpx; opacity: 0.22; }
}

.hero-content {
	position: relative;
	padding: 30rpx 28rpx 26rpx;
}

.hero-title {
	font-size: 38rpx;
	font-weight: 800;
	color: #111827;
	letter-spacing: 1rpx;
}

.hero-sub {
	margin-top: 10rpx;
	font-size: 26rpx;
	color: #4B5563;
}

.hero-meta {
	margin-top: 18rpx;
	display: flex;
	gap: 12rpx;
	flex-wrap: wrap;
}

.meta-pill {
	display: flex;
	align-items: center;
	gap: 10rpx;
	padding: 12rpx 16rpx;
	border-radius: 999rpx;
	background: rgba(37, 99, 235, 0.08);
	border: 1rpx solid rgba(37, 99, 235, 0.12);
	.meta-text {
		font-size: 24rpx;
		color: #1F2937;
	}
	&.ghost {
		background: rgba(255, 255, 255, 0.7);
	}
}

.list {
	padding: 14rpx 28rpx 90rpx;
}

.section-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 14rpx 6rpx 10rpx;
	.st-main {
		font-size: 30rpx;
		font-weight: 700;
		color: #111827;
	}
	.st-sub {
		font-size: 22rpx;
		color: #9CA3AF;
	}
}

.vip-card {
	background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
	border-radius: 28rpx;
	padding: 32rpx 28rpx 26rpx;
	margin-bottom: 22rpx;
	box-shadow: 0 18rpx 44rpx rgba(17, 24, 39, 0.08);
	border: 1rpx solid rgba(37, 99, 235, 0.08);
	overflow: hidden;
	position: relative;
	&:active { transform: scale(0.99); }
}

.vip-card::after {
	content: '';
	position: absolute;
	right: -120rpx;
	top: -120rpx;
	width: 240rpx;
	height: 240rpx;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(66, 151, 243, 0.18), rgba(66, 151, 243, 0));
}

.vip-head {
	display: flex;
	gap: 18rpx;
	align-items: center;
	position: relative;
	z-index: 1;
}

.vip-icon {
	width: 84rpx;
	height: 84rpx;
	border-radius: 26rpx;
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(99, 102, 241, 0.12) 100%);
	border: 1rpx solid rgba(37, 99, 235, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.vip-left { display: none; }
.vip-right { display: none; }
.vip-head-main { flex: 1; min-width: 0; }

.vip-name-row { display: none; }
.vip-title-row {
	display: flex;
	align-items: center;
	gap: 12rpx;
	.tag {
		padding: 4rpx 12rpx;
		border-radius: 999rpx;
		background: rgba(245, 158, 11, 0.12);
		color: #B45309;
		font-size: 22rpx;
		font-weight: 600;
		border: 1rpx solid rgba(245, 158, 11, 0.18);
	}
}

.vip-title {
	font-size: 36rpx;
	font-weight: 900;
	color: #0F172A;
	max-width: 520rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	letter-spacing: 1rpx;
}

.vip-desc {
	margin-top: 10rpx;
	font-size: 26rpx;
	color: #64748B;
	line-height: 1.6;
	word-break: break-all;
}

.vip-footer {
	margin-top: 18rpx;
	height: 96rpx;
	border-radius: 22rpx;
	background: #F8FAFC;
	border: 1rpx solid rgba(15, 23, 42, 0.08);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 18rpx 0 22rpx;
	position: relative;
	z-index: 1;
}

.vf-left {
	display: flex;
	align-items: baseline;
	min-width: 220rpx;
}

.vf-yen {
	font-size: 24rpx;
	font-weight: 900;
	color: #EF4444;
	margin-right: 6rpx;
}

.vf-num {
	font-size: 44rpx;
	font-weight: 900;
	color: #EF4444;
	font-family: 'DIN Alternate', sans-serif;
	letter-spacing: 1rpx;
}

.vf-free {
	font-size: 30rpx;
	font-weight: 900;
	color: #16A34A;
	background: rgba(22, 163, 74, 0.10);
	border: 1rpx solid rgba(22, 163, 74, 0.16);
	padding: 10rpx 16rpx;
	border-radius: 999rpx;
}

.vf-btn {
	height: 72rpx;
	min-width: 176rpx;
	border-radius: 999rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 26rpx;
	font-size: 30rpx;
	font-weight: 900;
	letter-spacing: 2rpx;
	color: #FFFFFF;
	box-shadow: 0 12rpx 24rpx rgba(37, 99, 235, 0.25);
}

.btn-buy {
	background: linear-gradient(135deg, #3B82F6 0%, #2563EB 55%, #1D4ED8 100%);
}

.btn-free {
	background: linear-gradient(135deg, #22C55E 0%, #16A34A 60%, #15803D 100%);
	box-shadow: 0 12rpx 24rpx rgba(22, 163, 74, 0.22);
}

.vip-counts { display: none; }
.vip-chips {
	margin-top: 16rpx;
	display: flex;
	gap: 12rpx;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

.count-pill { display: none; }
.chip {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 10rpx 14rpx;
	border-radius: 999rpx;
	background: rgba(2, 132, 199, 0.06);
	border: 1rpx solid rgba(2, 132, 199, 0.12);
	.chip-label {
		font-size: 22rpx;
		color: #475569;
	}
	.chip-val {
		font-size: 22rpx;
		font-weight: 800;
		color: #0F172A;
	}
}

.vip-note {
	margin-top: 10rpx;
	background: #F9FAFB;
	border-radius: 14rpx;
	padding: 14rpx 14rpx;
	.note-label { font-size: 22rpx; color: #9CA3AF; }
	.note-text {
		font-size: 22rpx;
		color: #4B5563;
		line-clamp: 2;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

.buy-btn { display: none; }
.buy-price { display: none; }
.buy-split { display: none; }
.buy-text { display: none; }

.vip-action {
	margin-top: 18rpx;
	height: 96rpx;
	border-radius: 24rpx;
	padding: 0 22rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(135deg, #3B82F6 0%, #2563EB 55%, #1D4ED8 100%);
	box-shadow: 0 16rpx 34rpx rgba(37, 99, 235, 0.30);
	position: relative;
	overflow: hidden;
}

.vip-action::before {
	content: '';
	position: absolute;
	left: -80rpx;
	top: -80rpx;
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
}

.va-left, .va-right {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: baseline;
	color: #fff;
}

.va-yen {
	font-size: 24rpx;
	font-weight: 900;
	margin-right: 6rpx;
	opacity: 0.95;
}

.va-num {
	font-size: 42rpx;
	font-weight: 900;
	font-family: 'DIN Alternate', sans-serif;
	letter-spacing: 1rpx;
}

.va-free {
	font-size: 34rpx;
	font-weight: 900;
	letter-spacing: 2rpx;
}

.va-right {
	gap: 10rpx;
	align-items: center;
}

.va-text {
	font-size: 30rpx;
	font-weight: 900;
	letter-spacing: 2rpx;
}

.loading {
	padding: 10rpx 0 0;
	.loading-text {
		display: block;
		text-align: center;
		margin-top: 18rpx;
		font-size: 24rpx;
		color: #9CA3AF;
	}
}

.skeleton {
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 26rpx 24rpx;
	margin-bottom: 18rpx;
	box-shadow: 0 10rpx 28rpx rgba(17, 24, 39, 0.04);
	border: 1rpx solid rgba(17, 24, 39, 0.06);
	position: relative;
	overflow: hidden;
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: -40%;
		width: 40%;
		height: 100%;
		background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
		animation: sk 1.2s infinite;
	}
	.sk-line {
		height: 26rpx;
		border-radius: 999rpx;
		background: #F3F4F6;
		margin-bottom: 14rpx;
	}
	.w60 { width: 60%; }
	.w40 { width: 40%; }
	.sk-btn {
		width: 160rpx;
		height: 64rpx;
		border-radius: 999rpx;
		background: #E5E7EB;
		margin-top: 10rpx;
	}
}

@keyframes sk {
	0% { left: -40%; }
	100% { left: 120%; }
}

.sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 101;
	background: #FFFFFF;
	border-radius: 32rpx 32rpx 0 0;
	padding: 22rpx 24rpx 24rpx;
	padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	box-shadow: 0 -14rpx 36rpx rgba(17, 24, 39, 0.18);
}

.sheet-hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.sheet-title {
		font-size: 32rpx;
		font-weight: 800;
		color: #111827;
	}
	.sheet-close {
		font-size: 52rpx;
		color: #9CA3AF;
		line-height: 1;
		padding: 0 8rpx;
	}
}

.sheet-card {
	margin-top: 18rpx;
	border-radius: 24rpx;
	padding: 22rpx 22rpx 20rpx;
	background: linear-gradient(180deg, #FFFFFF 0%, #F9FBFF 100%);
	border: 1rpx solid rgba(66, 151, 243, 0.12);
	.sc-top {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 16rpx;
	}
	.sc-name {
		flex: 1;
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 12rpx;
		.name {
			font-size: 32rpx;
			font-weight: 800;
			color: #111827;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.badge {
			font-size: 22rpx;
			color: #D97706;
			background: rgba(217, 119, 6, 0.12);
			padding: 4rpx 12rpx;
			border-radius: 999rpx;
			border: 1rpx solid rgba(217, 119, 6, 0.16);
		}
	}
	.sc-price {
		display: flex;
		align-items: baseline;
		color: #EF4444;
		.yen { font-size: 22rpx; font-weight: 800; margin-right: 4rpx; }
		.num { font-size: 44rpx; font-weight: 900; font-family: 'DIN Alternate', sans-serif; }
	}
	.sc-sub {
		margin-top: 12rpx;
		font-size: 26rpx;
		color: #64748B;
		line-height: 1.7;
		word-break: break-all;
	}
	.sc-desc {
		margin-top: 14rpx;
		font-size: 24rpx;
		color: #4B5563;
		background: #F9FAFB;
		border-radius: 16rpx;
		padding: 14rpx 14rpx;
		line-height: 1.6;
	}
}

.sheet-actions {
	margin-top: 18rpx;
	display: flex;
	gap: 16rpx;
	.btn {
		flex: 1;
		height: 92rpx;
		border-radius: 999rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		font-weight: 800;
	}
	.ghost {
		background: #FFFFFF;
		color: #374151;
		border: 2rpx solid #E5E7EB;
	}
	.primary {
		background: linear-gradient(135deg, #4297F3 0%, #2B76E5 100%);
		color: #FFFFFF;
		box-shadow: 0 10rpx 22rpx rgba(66, 151, 243, 0.28);
	}
}
</style>