<template>
	<view class="page fc">
		<uni-nav-bar fixed statusBar left-icon="left" background-color="transparent" :border="false" @clickLeft="back"
			title="换装"></uni-nav-bar>
		<image class="back"
			src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/5199a68fb335c7d892665b66637f60c4.png"
			mode="widthFix"></image>
		<scroll-view scroll-y="true" class="scroll-view f1" show-scrollbar>
			<view class="body">
				<view class="list">
					<image class="list_backA"
						src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/7c383199322fbf1544fe3acf58c6cae5.png"
						mode="widthFix"></image>
					<view class="list_content">
						<view class="list_top">
							<view class="list_module">
								<view class="list_title">上衣</view>
								<scroll-view scroll-x="true" class="list_table fa" show-scrollbar>
									<view class="list_detail"
										:class="{ 'list_detail_selected': isSelectedTop(item.id) }"
										v-for="(item, index) in outfitListInfo.top" :key="index"
										@click="selectTop(item)">
										<image class="list_picture"
											:src="item.image_url ? item.image_url : '/static/images/replacement_pictureA.png'"
											mode="aspectFill" @longpress="handleLongPress(item)"></image>
										<view class="list_name" v-if="item.is_current">使用中</view>
										<image class="list_lock" v-if="item.is_lock && !item.is_free"
											src="/static/images/replacement_lock.png"></image>
									</view>
								</scroll-view>
							</view>
							<view class="list_module">
								<view class="list_title">下装</view>
								<scroll-view scroll-x="true" class="list_table fa">
									<view class="list_detail"
										:class="{ 'list_detail_selected': isSelectedBottom(item.id) }"
										v-for="(item, index) in outfitListInfo.bottom" :key="index"
										@click="selectBottom(item)">
										<image class="list_picture"
											:src="item.image_url ? item.image_url : '/static/images/replacement_pictureA.png'"
											mode="aspectFill" @longpress="handleLongPress(item)"></image>
										<view class="list_name" v-if="item.is_current">使用中</view>
										<image class="list_lock" v-if="item.is_lock && !item.is_free"
											src="/static/images/replacement_lock.png"></image>
									</view>
								</scroll-view>
							</view>
							<view class="list_module">
								<view class="list_title">连体服</view>
								<scroll-view scroll-x="true" class="list_table fa">
									<view class="list_detail"
										:class="{ 'list_detail_selected': isSelectedDress(item.id) }"
										v-for="(item, index) in outfitListInfo.dress" :key="index"
										@click="selectDress(item)">
										<image class="list_picture"
											:src="item.image_url ? item.image_url : '/static/images/replacement_pictureA.png'"
											mode="aspectFill" @longpress="handleLongPress(item)"></image>
										<view class="list_name" v-if="item.is_current">使用中</view>
										<image class="list_lock" v-if="item.is_lock && !item.is_free"
											src="/static/images/replacement_lock.png"></image>
									</view>
								</scroll-view>
							</view>
						</view>
						<view class="list_bottom">
							<view class="list_title">形象栏</view>
							<scroll-view scroll-x="true" class="list_table fa">
								<view class="list_detailB"
									:class="selectedAvatarIndex === index ? 'list_detailB_active' : ''"
									v-for="(item, index) in outfitListInfo.looks" :key="index"
									@click="selectAvatar(index)">
									<image class="list_pictureB"
										:class="selectedAvatarIndex === index ? 'list_pictureB_active' : ''"
										:src="item.image_url ? item.image_url : '/static/images/replacement_pictureB.png'"
										mode="aspectFill"></image>
									<image class="list_delete" v-if="selectedAvatarIndex === index"
										src="/static/images/replacement_delete.png" @click="showsChat(item.id)">
									</image>
									<image class="list_switch" v-if="selectedAvatarIndex === index"
										src="/static/images/replacement_switch.png" @click="switchAvatar(item.id)">
									</image>
								</view>
								<view class="list_detailB" v-if="outfitListInfo"
									v-for="(item, index) in (outfitListInfo.outfit_slots - outfitListInfo.looks.length)"
									:key="index">
									<image class="list_pictureB" src="/static/images/replacement_pictureB.png"
										mode="aspectFill"></image>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
			<view class="opt">
				<view class="opt_module">
					<view class="opt_data">
						<view class="opt_btn faj" @click="bottomClick()">
							换装
						</view>
					</view>
				</view>
			</view>
			<view class="bottom" v-if="bottomStats">
				<view class="bottom_content">
					<view class="bottom_title">确认是否换装
						<image src="/static/images/close.png" @click="bottomClick()"></image>
					</view>
					<view class="bottom_number faj" @click="tofrequency">换装次数：{{ outfitListInfo.clothes_num }}次<image
							src="/static/images/replacement_more.png"></image>
					</view>
					<view class="bottom_module">
						<scroll-view scroll-x="true" class="bottom_table fa">
							<view class="bottom_details" v-for="(item, index) in outfitListInfo.looks" :key="index">
								<image class="bottom_picture"
									:src="item.image_url ? item.image_url : '/static/images/replacement_pictureB.png'"
									mode="aspectFill">
								</image>
							</view>
						</scroll-view>
					</view>
					<view class="bottom_detail faj" @click="selectClick()">
						<view class="bottom_select faj">
							<image :src="selectStats ? '/static/images/selectA.png' : '/static/images/select.png'">
							</image>
						</view>
						<view class="bottom_name">保存为形象栏</view>
					</view>
					<view class="bottom_item fa sb">
						<view class="bottom_btn faj" @click="noClick()">否</view>
						<view class="bottom_btn faj" @click="yesClick()">是</view>
					</view>
				</view>
			</view>
			<view class="detail" v-if="detailStats">
				<view class="detail_content">
					<view class="detail_title">详情
						<image src="/static/images/close.png" @click="detailClick()"></image>
					</view>
					<view class="detail_module fa">
						<image class="detail_image"
							:src="detailList.image_url ? detailList.image_url : '/static/images/replacement_image.png'"
							mode="aspectFill">
						</image>
						<view class="detail_detail f1">
							<view class="detail_item fa">
								<image src="/static/images/star.png"></image>
								<view class="detail_name">{{ detailList.name ? detailList.name : '-' }}</view>
								<image src="/static/images/star.png"></image>
							</view>
							<view class="detail_money fx">
								{{ detailList.price_gold ? detailList.price_gold : '0' }}<text>金币</text></view>
						</view>
					</view>
					<view class="detail_btn faj" v-if="detailList.is_lock && !detailList.is_free"
						@click="shoppingClick()">购买</view>
					<view class="detail_btn faj" v-if="!detailList.is_lock || detailList.is_free">已拥有</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import {
	OutfitList,
	OutfitPurchase,
	OutfitChange,
	OutfitLooks,
	OutfitLooksUse,
	LoverBasic
} from '@/utils/api.js'
import notHave from '@/components/not-have.vue';
import topSafety from '@/components/top-safety.vue';
export default {
	components: {
		notHave,
		topSafety,
	},
	data() {
		return {
			form: {
				item_id: '',
			},
			bottomStats: false,
			detailStats: false,
			selectStats: false,
			selectedAvatarIndex: -1,
			outfitListInfo: '',
			detailList: '',
			// 当前选择模式：1为连体服模式，2为上衣下装模式
			currentMode: null,  // null表示未选择模式
			formTopBottom: {
				"top_item_id": '',
				"bottom_item_id": '',
				"save_to_look": false
			},
			formDress: {
				"dress_item_id": '',
				"save_to_look": false
			},
		}
	},
	computed: {
		// 根据 outfitListInfo.outfit_slots 数量显示形象栏，没有的使用默认图片
		displayAvatarList() {
			if (this.outfitListInfo && this.outfitListInfo.outfit_slots && Array.isArray(this.outfitListInfo.outfit_slots)) {
				// 如果有 outfit_slots 数据，使用该数据
				return this.outfitListInfo.outfit_slots.map(slot => {
					return {
						id: slot.id,
						image: slot.image_url || '/static/images/replacement_pictureB.png'
					};
				});
			} else {
				// 如果没有数据，返回空数组，稍后在方法中处理
				return Array(7).fill().map((_, index) => {
					return {
						id: null,
						image: '/static/images/replacement_pictureB.png'
					};
				});
			}
		}
	},
	onLoad() {

	},
	onShow() {
		this.outfitList()
	},
	mounted() {
		// 页面加载完成后，自动选中当前正在使用的服装
		this.$nextTick(() => {
			this.selectCurrentOutfit();
		});
	},
	methods: {
		// 自动选中当前正在使用的服装
		selectCurrentOutfit() {
			// 检查是否有当前使用的连体服
			if (this.outfitListInfo && this.outfitListInfo.current_outfit && this.outfitListInfo.current_outfit.dress_id) {
				const currentDress = this.outfitListInfo.dress.find(item => item.id === this.outfitListInfo.current_outfit.dress_id);
				if (currentDress) {
					// 设置当前模式为连体服模式
					this.currentMode = 1;
					// 设置选中的连体服
					this.formDress.dress_item_id = currentDress.id;
					// 清除上衣和下装选择
					this.formTopBottom.top_item_id = '';
					this.formTopBottom.bottom_item_id = '';
					return;
				}
			}

			// 检查是否有当前使用的上衣或下装
			if (this.outfitListInfo && this.outfitListInfo.current_outfit) {
				const currentTop = this.outfitListInfo.top.find(item => item.id === this.outfitListInfo.current_outfit.top_id);
				const currentBottom = this.outfitListInfo.bottom.find(item => item.id === this.outfitListInfo.current_outfit.bottom_id);

				if (currentTop || currentBottom) {
					// 设置当前模式为上衣下装模式
					this.currentMode = 2;
					if (currentTop) {
						this.formTopBottom.top_item_id = currentTop.id;
					}
					if (currentBottom) {
						this.formTopBottom.bottom_item_id = currentBottom.id;
					}
					return;
				}
			}
		},
		outfitList() {
			OutfitList({}).then(res => {
				if (res.code == 1) {
					this.outfitListInfo = res.data
					console.log(this.outfitListInfo)

					// 处理上衣
					for (let i = 0; i < this.outfitListInfo.top.length; i++) {
						if (this.outfitListInfo.current_outfit.top_id == this.outfitListInfo.top[i].id) {
							this.outfitListInfo.top[i].is_current = true;
						} else {
							this.outfitListInfo.top[i].is_current = false;
						}
						// 根据 owned_outfit_ids 确定是否已解锁
						this.outfitListInfo.top[i].is_lock = !this.outfitListInfo.owned_outfit_ids.includes(this.outfitListInfo.top[i].id);
						console.log(this.outfitListInfo.top[i].is_lock)
					}

					// 处理下装
					for (let i = 0; i < this.outfitListInfo.bottom.length; i++) {
						if (this.outfitListInfo.current_outfit.bottom_id == this.outfitListInfo.bottom[i].id) {
							this.outfitListInfo.bottom[i].is_current = true;
						} else {
							this.outfitListInfo.bottom[i].is_current = false;
						}
						// 根据 owned_outfit_ids 确定是否已解锁
						this.outfitListInfo.bottom[i].is_lock = !this.outfitListInfo.owned_outfit_ids.includes(this.outfitListInfo.bottom[i].id);
						console.log(this.outfitListInfo.bottom[i].is_lock)
					}

					// 处理连体服
					for (let i = 0; i < this.outfitListInfo.dress.length; i++) {
						if (this.outfitListInfo.current_outfit.dress_id == this.outfitListInfo.dress[i].id) {
							this.outfitListInfo.dress[i].is_current = true;
						} else {
							this.outfitListInfo.dress[i].is_current = false;
						}
						// 根据 owned_outfit_ids 确定是否已解锁
						this.outfitListInfo.dress[i].is_lock = !this.outfitListInfo.owned_outfit_ids.includes(this.outfitListInfo.dress[i].id);
						console.log(this.outfitListInfo.dress[i].is_lock)
					}

					// 在数据加载完成后，自动选中当前正在使用的服装
					this.$nextTick(() => {
						this.selectCurrentOutfit();
					});

				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		outfitPurchase() {
			OutfitPurchase(this.form).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '购买成功',
						icon: 'none',
						position: 'top'
					})
					this.detailStats = false
					this.outfitList()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		outfitLooks(id) {
			OutfitLooks(id).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '换装成功',
						icon: 'none',
						position: 'top'
					})
					this.outfitList()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		outfitLooksUse(id) {
			OutfitLooksUse(id).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '更换成功',
						icon: 'none',
						position: 'top'
					})
					this.outfitList()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		loverBasic() {
			LoverBasic().then(res => {
				if (res.code == 1) {
					this.loverBasicList = res.data
					uni.setStorageSync('loverBasicList', res.data)
					uni.navigateBack({
						delta: 1,
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		shoppingClick() {
			console.log(this.form)
			this.outfitPurchase()
		},
		// 选择上衣
		selectTop(item) {
			// 如果是当前使用的服装，不需要弹出购买弹窗
			if (item.is_current) {
				// 直接选中当前使用的服装
				this.currentMode = 2;

				// 如果再次点击已选中的上衣，则取消选择
				if (this.formTopBottom.top_item_id === item.id) {
					this.formTopBottom.top_item_id = '';
				} else {
					this.formTopBottom.top_item_id = item.id;
				}
				return;
			}

			// 检查是否已解锁或是否免费
			if (item.is_lock && !item.is_free) {
				// 如果服装未解锁且不是免费的，弹出购买弹窗
				this.detailClick(item);
				return;
			}

			// 如果当前是连体服模式，不能选择上衣
			if (this.currentMode === 1 && this.formDress.dress_item_id) {
				uni.showToast({
					title: '连体服模式下不能选择上衣',
					icon: 'none'
				});
				return;
			}

			// 设置当前模式为上衣下装模式
			this.currentMode = 2;

			// 如果再次点击已选中的上衣，则取消选择
			if (this.formTopBottom.top_item_id === item.id) {
				this.formTopBottom.top_item_id = '';
			} else {
				this.formTopBottom.top_item_id = item.id;
			}
		},
		// 选择下装
		selectBottom(item) {
			// 如果是当前使用的服装，不需要弹出购买弹窗
			if (item.is_current) {
				// 直接选中当前使用的服装
				this.currentMode = 2;

				// 如果再次点击已选中的下装，则取消选择
				if (this.formTopBottom.bottom_item_id === item.id) {
					this.formTopBottom.bottom_item_id = '';
				} else {
					this.formTopBottom.bottom_item_id = item.id;
				}
				return;
			}

			// 检查是否已解锁或是否免费
			if (item.is_lock && !item.is_free) {
				// 如果服装未解锁且不是免费的，弹出购买弹窗
				this.detailClick(item);
				return;
			}

			// 如果当前是连体服模式，不能选择下装
			if (this.currentMode === 1 && this.formDress.dress_item_id) {
				uni.showToast({
					title: '连体服模式下不能选择下装',
					icon: 'none'
				});
				return;
			}

			// 设置当前模式为上衣下装模式
			this.currentMode = 2;

			// 如果再次点击已选中的下装，则取消选择
			if (this.formTopBottom.bottom_item_id === item.id) {
				this.formTopBottom.bottom_item_id = '';
			} else {
				this.formTopBottom.bottom_item_id = item.id;
			}
		},
		// 选择连体服
		selectDress(item) {
			// 如果是当前使用的服装，不需要弹出购买弹窗
			if (item.is_current) {
				// 直接选中当前使用的服装
				this.currentMode = 1;

				// 如果再次点击已选中的连体服，则取消选择
				if (this.formDress.dress_item_id === item.id) {
					this.formDress.dress_item_id = '';
				} else {
					// 选择新的连体服时，取消上衣和下装的选择
					this.formTopBottom.top_item_id = '';
					this.formTopBottom.bottom_item_id = '';
					this.formDress.dress_item_id = item.id;
				}
				return;
			}

			// 检查是否已解锁或是否免费
			if (item.is_lock && !item.is_free) {
				// 如果服装未解锁且不是免费的，弹出购买弹窗
				this.detailClick(item);
				return;
			}

			// 如果当前是上衣下装模式，不能选择连体服
			if (this.currentMode === 2 && (this.formTopBottom.top_item_id || this.formTopBottom.bottom_item_id)) {
				uni.showToast({
					title: '上衣下装模式下不能选择连体服',
					icon: 'none'
				});
				return;
			}

			// 设置当前模式为连体服模式
			this.currentMode = 1;

			// 如果再次点击已选中的连体服，则取消选择
			if (this.formDress.dress_item_id === item.id) {
				this.formDress.dress_item_id = '';
			} else {
				// 选择新的连体服时，取消上衣和下装的选择
				this.formTopBottom.top_item_id = '';
				this.formTopBottom.bottom_item_id = '';
				this.formDress.dress_item_id = item.id;
			}
		},
		// 检查是否选中了指定上衣
		isSelectedTop(id) {
			return this.formTopBottom.top_item_id === id;
		},
		// 检查是否选中了指定下装
		isSelectedBottom(id) {
			return this.formTopBottom.bottom_item_id === id;
		},
		// 检查是否选中了指定连体服
		isSelectedDress(id) {
			return this.formDress.dress_item_id === id;
		},
		// 处理长按事件
		handleLongPress(item) {
			// 检查是否已解锁或是否免费
			if (item.is_lock && !item.is_free) {
				// 如果服装未解锁且不是免费的，不触发长按事件
				uni.showToast({
					title: '请先解锁该服装',
					icon: 'none'
				});
				return;
			}

			// 如果满足条件，触发详情查看
			this.detailClick(item);
		},
		// 换装按钮点击
		yesClick() {
			if (!this.outfitListInfo.clothes_num) {
				uni.showToast({
					title: '当前暂无次数',
					icon: 'none'
				});
				return;
			}
			if (this.currentMode === 1 && this.formDress.dress_item_id) {
				// 连体服模式：调用连体服换装接口
				this.changeDress();
			} else if (this.currentMode === 2 && (this.formTopBottom.top_item_id || this.formTopBottom.bottom_item_id)) {
				// 上衣下装模式：调用上衣下装换装接口
				this.changeTopBottom();
			} else {
				uni.showToast({
					title: '请先选择要换装的服装',
					icon: 'none'
				});
				return;
			}

			if (this.bottomStats) {
				this.bottomStats = false
			} else {
				this.bottomStats = true
			}
		},
		// 调用连体服换装接口
		changeDress() {
			OutfitChange(this.formDress).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '换装成功',
						icon: 'success'
					});
					// 重新加载数据以更新当前使用状态
					this.outfitList();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		// 调用上衣下装换装接口
		changeTopBottom() {
			OutfitChange(this.formTopBottom).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '换装成功',
						icon: 'success'
					});
					// 重新加载数据以更新当前使用状态
					this.outfitList();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		noClick() {
			this.bottomStats = false
		},
		back() {
			this.loverBasic()

		},
		selectAvatar(index) {
			this.selectedAvatarIndex = index;
		},
		selectClick() {
			if (this.selectStats) {
				this.selectStats = false
				this.formDress.save_to_look = false
				this.formTopBottom.save_to_look = false
			} else {
				this.selectStats = true
				this.formDress.save_to_look = true
				this.formTopBottom.save_to_look = true
			}
		},
		bottomClick() {
			if (this.bottomStats) {
				this.bottomStats = false
			} else {
				this.bottomStats = true
			}
		},
		detailClick(item) {
			if (this.detailStats) {
				this.detailStats = false
				this.form.item_id = ''
				this.detailList = ''
			} else {
				this.detailStats = true
				this.form.item_id = item.id
				this.detailList = item
			}
			console.log(this.detailList)
			console.log(this.form.item_id)
		},
		showsChat(id) {
			uni.showModal({
				title: '提示',
				content: '确认删除吗',
				success: (res) => {
					if (res.confirm) {
						this.outfitLooks(id)
					}
				},
				fail: (res) => {
					console.log(res)
				}
			})
		},
		switchAvatar(id) {
			this.outfitLooksUse(id)
		},
		tofrequency() {
			uni.navigateTo({
				url: '/pages/index/frequency'
			})
		},
	}
}
</script>

<style>
.page {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.scroll-view {
	overflow: hidden;
}

.body {
	position: relative;
}

.back {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1624rpx;
	display: block;
}


.body {
	position: relative;
	padding: 54rpx 0 0 0;
}

.list {
	position: relative;
}

.list_backA {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	display: block;
}

.list_content {
	position: relative;
	padding: 40rpx;
}

.list_top {
	position: relative;
}

.list_module {
	position: relative;
}

.list_title {
	font-weight: 500;
	font-size: 32rpx;
	color: #222222;
	line-height: 50rpx;
}

.list_table {
	position: relative;
	margin: 30rpx 0 0 0;
	white-space: nowrap;
}

.list_detail {
	position: relative;
	margin: 0 42rpx 0 0;
	box-sizing: border-box;
	display: inline-block;
	border-radius: 12rpx;
	border: 4rpx solid #FFFFFF;
}

.list_picture {
	width: 220rpx;
	height: 240rpx;
	display: block;
	border-radius: 12rpx;
}

.list_name {
	position: absolute;
	right: 0;
	top: 0;
	padding: 2rpx 5rpx;
	font-weight: 400;
	font-size: 16rpx;
	color: #FFFFFF;
	line-height: 28rpx;
	background: #F661B5;
	border-radius: 0 12rpx 0 12rpx;
}

.list_lock {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 36rpx;
	height: 36rpx;
	z-index: 2;
}

.list_detail_selected {
	border: 4rpx solid #4CAF50;
	/* 绿色边框表示选中 */
	border-radius: 12rpx;
	/* 保持与原始样式一致的圆角 */
	box-sizing: border-box;
	/* 确保边框不会影响布局 */
}

.list_bottom {
	position: relative;
}

.list_detailB {
	position: relative;
	margin: 0 20rpx 0 0;
	box-sizing: border-box;
	display: inline-block;
	border-radius: 12rpx;
}

.list_pictureB {
	width: 210rpx;
	/* height: 250rpx; */
	border-radius: 12rpx;
	display: block;
}

.list_detailB_active {
	position: relative;
	border-radius: 12rpx;
	box-shadow: 0 0 20rpx rgba(204, 204, 204, 0.8);
}

.list_pictureB_active {
	width: 260rpx;
	/* height: 280rpx; */
	border-radius: 12rpx;
	display: block;
}

.list_delete {
	position: absolute;
	right: 10rpx;
	bottom: 10rpx;
	width: 48rpx;
	height: 48rpx;
	z-index: 2;
}

.list_switch {
	position: absolute;
	left: 10rpx;
	top: 10rpx;
	width: 48rpx;
	height: 48rpx;
	z-index: 2;
}


.list_image {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 12rpx 8rpx;
	background: rgba(249, 249, 249, 0.5);
	border-radius: 12rpx;
	box-sizing: border-box;
}

.list_image image {
	width: 36rpx;
	height: 36rpx;
}

.opt {
	position: relative;
	height: 150rpx;
}

.opt_module {
	position: fixed;
	padding: 5rpx 0 70rpx 0;
	height: 85rpx;
	width: 100%;
	bottom: 0;
	left: 0;
	box-sizing: content-box;
	z-index: 2;
}

.opt_data {
	padding: 5rpx 50rpx;
	font-size: 28rpx;
}

.opt_btn {
	padding: 24rpx 0;
	font-weight: 400;
	font-size: 32rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
	border-radius: 12rpx;
}

.bottom {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.bottom_content {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, #EDD6F5 0%, #FFFFFF 100%);
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	padding: 46rpx 80rpx 68rpx 80rpx;
}

.bottom_title {
	position: relative;
	font-weight: 500;
	font-size: 36rpx;
	color: #333333;
	line-height: 50rpx;
	text-align: center;
}

.bottom_title image {
	position: absolute;
	right: -20rpx;
	top: 0;
	bottom: 0;
	width: 22rpx;
	height: 22rpx;
	margin: auto 0;
}

.bottom_number {
	position: relative;
	margin: 42rpx 0 0 0;
	font-weight: 500;
	font-size: 32rpx;
	color: #9779FA;
	line-height: 50rpx;
	text-align: center;
}

.bottom_number image {
	margin: 0 0 0 14rpx;
	width: 10rpx;
	height: 18rpx;
}

.bottom_module {
	position: relative;
	margin: 42rpx 0 0 0;
}

.bottom_table {
	position: relative;
	white-space: nowrap;
}

.bottom_details {
	display: inline-block;
}

.bottom_picture {
	margin: 0 78rpx 0 0;
	width: 144rpx;
	height: 198rpx;
	border-radius: 12rpx;
	display: block;
}

.bottom_detail {
	position: relative;
	margin: 38rpx 0 0 0;
}

.bottom_select {
	position: relative;
}

.bottom_select image {
	width: 32rpx;
	height: 32rpx;
}

.bottom_name {
	margin: 0 0 0 10rpx;
	font-weight: 500;
	font-size: 32rpx;
	color: #8449FE;
	line-height: 50rpx;
}

.bottom_item {
	position: relative;
	margin: 42rpx 0 0 0;
}

.bottom_btn {
	position: relative;
	padding: 26rpx 112rpx;
	font-weight: 500;
	font-size: 30rpx;
	color: #8449FE;
	line-height: 50rpx;
	border-radius: 12rpx;
	border: 2rpx solid #817EFE;
}

.bottom_btn:nth-child(2) {
	color: #FFFFFF;
	background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%), #D8D8D8;
}


.detail {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.detail_content {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, #EDD6F5 0%, #FFFFFF 100%);
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	padding: 46rpx 40rpx 68rpx 40rpx;
}

.detail_title {
	position: relative;
	font-weight: 500;
	font-size: 36rpx;
	color: #333333;
	line-height: 50rpx;
	text-align: center;
}

.detail_title image {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 22rpx;
	height: 22rpx;
	margin: auto 0;
}

.detail_module {
	position: relative;
	margin: 30rpx 0 0 0;
	padding: 0 30rpx;
}

.detail_image {
	width: 260rpx;
	height: 300rpx;
	display: block;
	flex-shrink: 0;
}

.detail_detail {
	position: relative;
	margin: 0 0 0 60rpx;
}

.detail_item {
	position: relative;
}

.detail_item image {
	width: 36rpx;
	height: 48rpx;
}

.detail_name {
	margin: 0 28rpx;
	font-weight: 500;
	font-size: 32rpx;
	color: #9779FA;
	line-height: 50rpx;
}

.detail_money {
	margin: 12rpx 0 0 0;
	font-weight: 700;
	font-size: 44rpx;
	color: #FF0000;
	line-height: 50rpx;
}

.detail_money text {
	font-size: 28rpx;
	line-height: 58rpx;
}

.detail_btn {
	position: relative;
	margin: 162rpx 0 0 0;
	padding: 26rpx 112rpx;
	font-weight: 500;
	font-size: 30rpx;
	line-height: 50rpx;
	border-radius: 12rpx;
	color: #FFFFFF;
	background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%), #D8D8D8;
}
</style>