<template>
	<view class='container'>
		<view class="sv-y">
			<scroll-view scroll-y>
				<view class="flex-column">
					<view class="flex-column mar-24">
						<text class="fs-42" style="color: white;">订卡/拼卡</text>
						<view class="flex mt-30 fs-32" style="color: white;">
							<text @click="onTab(1)" :class="type==1?'fl-item-sel':'fl-item'">定卡</text>
							<text @click="onTab(2)" :class="type==2?'fl-item-sel':'fl-item'"
								style="margin-left: 20rpx;">拼卡</text>
						</view>
					</view>
					<view class="flex-column mar-24" v-if="type==1" @click="getFloorlist()">
						<text class="fs-32" style="color: white;">预订卡座</text>
						<view class="flex mt-30 fs-32 ydkz-item" style="color: white;">
							<text>{{form.boothtext}}</text>
							<text class="fs-42">→</text>
						</view>
					</view>

					<view class="flex-column mar-24" v-if="type==2">
						<view class="flex-column mt-30 fs-32 xzwj-item" style="color: white;height: 250rpx; ">
							<text class="fs-32 mtb-30" style="color: white;justify-content: flex-start;">选择头号玩家</text>
							<view style="width: 100%;">
								<scroll-view class="scroll-view-x" scroll-x="true">
									<view class="images" v-for="(item, index) in itemList" :key="index">
										<image @click="onXzthwj(item, index)"
											:class="xzwj_number==index?'img-item-sel':'img-item'"
											:src="`${$config.cdnUrl}`+ item.avatar" mode="aspectFill"></image>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
					<view class="flex-column mlr-24 mt-25 br-10 pad-20 fs-32"
						style="color:white;background-color: #191919;">
						<text style="font-size: 42rpx;">信息确认</text>
						<text class="mt-50">时间：{{$wskj.getTime(sysj.startTime)}}</text>
						<text class="mt-20">活动：{{sysj.name}}</text>
						<text class="mt-20">地址：{{sysj.address}}</text>
						<view class="flex-column mt-50 br-10 pad-20 fs-32"
							style="color: #878787;background-color: #272727;">
							<text style="color: white;">预订须知</text>
							<text class="fs-24 mt-25">1.支付成功之后将获得入场电子券
								2.参与购票后电子券直接生效，有效期从预约时间到次日早上8点
								3.未成年人禁止购票，购票后无法进入，门店概不负责
								4.多次下单不支付系统将判定您恶意下单，当日无法再下单
								5.如果您执行的是定卡操作，请注意您支付的为定卡押金
								6.最终解释权由本司所有</text>
						</view>
					</view>
					<view class="flex mlr-24 mt-60 mb-100 br-10 plr-20 ptb-30 fs-32 flex-between"
						style="color: #878787;background-color: #303030;align-items: center;">
						<text style="color: white;">应付定金</text>
						<text class="fs-42" style="color: #FD46B9;">￥{{type==1?boothPrice:sysj.joinPrice}}</text>
					</view>

				</view>
			</scroll-view>
			<u-popup :show="zwShow" round="10" @close="zwShow = false">
				<view class="flex-column" style="background-color: #272727;border-radius: 20rpx 20rpx 0rpx 0rpx;">
					<view class="flex" style="justify-content: flex-end;">
						<image @click="zwShow = false" class="wh-46 mar-24" src="/static/icon_zftck_x.png">
						</image>
					</view>
					<view class="h-400 mlr-24 ">
						<image class="full br-20" :src="`${$config.cdnUrl}`+ sysj.localSeat"></image>
					</view>
					<view class="flex-column mtb-50 mlr-24">
						<text class="fs-42 mb-30" style="color: white;">选区</text>
						<view style="width: 100%;">
							<scroll-view class="scroll-view-x" scroll-x="true">
								<view class="view-item" v-for="(item, index) in form.region" :key="index"
									@click="getByFloorlist(item),xq_number=index">
									<view :class="xq_number==index?'text-item-sel':'text-item'">
										<text>{{item}}</text>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="flex-column mlr-24">
						<text class="fs-42 mb-30" style="color: white;">选座</text>
						<view style="width: 100%;" v-if="form.boothall.length>0">
							<scroll-view class="scroll-view-x" scroll-x="true">
								<view class="view-item" style="height: 200rpx;border-radius: 20rpx;"
									v-for="(item, index) in form.boothall" :key="index"
									@click="xz_number=index,booth=item.seatNo,boothId=item.id,boothPrice=item.price">
									<view :class="xz_number==index?'text-item-sel':'text-item'"
										style="flex-direction: column;">
										<text>{{item.seatNo}}</text>
										<text class="mtb-25">￥{{item.price}}</text>
										<text>{{item.memberLimit}}人</text>
									</view>
								</view>
							</scroll-view>
						</view>
						<view v-else class="h-200 flex align-center fw-500 fs-32"
							style="width: 100%;justify-content: center;color: #878787;">
							<text>暂无座位</text>
						</view>
					</view>
					<view class="h-100 mtb-30 mlr-24">
						<view @click="onSubmitBooth" class="fullscreen-btn" style="background-color: #FE42C2;">
							<text>确认</text>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="h-100 mtb-30 mlr-24">
			<view @click="onSubmit" class="fullscreen-btn" style="background-color: #FE42C2;">
				<text>立即支付</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				floor: '', //楼层id
				shopId: '', //门店id
				form: {
					boothtext: '未选择卡座', //卡座
					region: [],
					booth: [],
					boothall: [],
				},
				region: "", //选择的区域
				boothId: '', //选择的卡座ID
				booth: '', //选择的卡座
				boothPrice: '', //卡座金额
				price: '', //因付定金
				leaderId: '',
				Eventsmsg: {},
				site: {},
				zwShow: false,
				number: 0,
				payShow: false,
				timeIndex: 0,
				type: 1,
				xzwj_number: 0, //确定索引
				xzwj_num: 0, //临时索引
				xq_number: 0, //选区索引
				xz_number: 0, //选座索引
				itemList: [],
				sysj: {}, //活动信息
				pkprice: 0.01
			};
		},
		onLoad(options) {
			let list = JSON.parse(decodeURIComponent(options.data))
			console.log('传入的参数',list)
			this.sysj = list
			this.floor = list.floorId
			this.shopId = list.shopId
			this.Eventsmsg = list
			this.$api.getlistLeaderByParty(list.id).then(res => {
				this.itemList = res.rows
				this.leaderId = res.rows[0].id
			})
		},
		onShow() {
			//确认选择的头号玩家监听
			uni.$on('select', this.select)
		},
		methods: {
			getFloorlist() {
				this.zwShow = true
				this.$api.getlistAreaByFloor(this.shopId).then(res => {
					this.form.region = res.rows
					this.getByFloorlist(res.rows[0])
				})
			},
			getByFloorlist(e) {
				this.region = e
				this.xz_number = 0
				const params = {
					id: this.shopId,
					area: e
				}
				this.$api.getlistSeatByByFloor(params).then(res => {
					this.form.boothall = res.rows
					if (res.rows.length != 0) {
						this.booth = res.rows[0].seatNo
						this.boothId = res.rows[0].id
						this.boothPrice = res.rows[0].price
					}
				})
			},
			// 选座的确认
			onSubmitBooth() {
				this.zwShow = false
				this.form.boothtext = this.region + " " + this.booth

			},
			onTab(e) {
				this.type = e;

			},
			onXzthwj(item, index) {
				this.leaderId = item.id
				this.xzwj_num = index;
				const data = {
					type: 1,
					item
				}
				this.$wskj.to('/pagesMain/pages/ldxx?partyId=' + this.Eventsmsg.id + '&leaderId=' + item.id +
					'&type=1')
			},
			select(e) {
				this.xzwj_number = this.xzwj_num;
			},
			onSubmit() {
				let params; // 在这里定义 params
				if (this.type == 1) {
					if (!this.boothId) {
						this.$u.toast('请选择卡座')
						return
					}
					params = {
						url: '/system/party/buySeat',
						data: {
							area: this.region, //卡座区域
							seatNo: this.booth, //卡座编号
							seatId: this.boothId, //卡座编号id
							shopId: this.shopId,
							partyId: this.Eventsmsg.id,
							price: this.boothPrice,
							type: 1,
						}
					}
				} else {
					params = {
						url: '/system/party/buyMember',
						data: {
							price: this.sysj.joinPrice, //价格
							joinNumber: 1,
							shopId: this.shopId,
							partyId: this.Eventsmsg.id,
							leaderId: this.leaderId,
							type: 2,
						}
					}
				}

				console.log(params, "params"); // 现在 params 在这里是可访问的
				this.$request(params).then(res => {
					this.wechatpay(res.data);
				});
			},

			wechatpay(orderId) {
				const params = {
					url: '/system/party/wechatpay?orderId=' + orderId + '&openId=' + uni.getStorageSync('openId'),
					data: {}
				}
				this.$request(params).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						appid: res.data.result.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
						nonceStr: res.data.result.nonceStr, // 随机字符串
						package: res.data.result.package, // 固定值
						timeStamp: res.data.result.timeStamp, // 时间戳（单位：秒）
						paySign: res.data.result.paySign, // 签名，这里用的 MD5/RSA 签名
						signType: 'MD5',
						success: (res) => {
							this.$wskj.to('/pagesMain/pages/zfjg?orderId=' + orderId)
						},
						fail: (err) => {
							console.log(err);
						}
					});
				})
			},


		},
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		background: #0F0F0F;
		background-color: ;
		display: flex;
		flex-direction: column;
	}

	.fl-item-sel {
		flex: 1;
		height: 100rpx;
		background: #FE42C2;
		border-radius: 20rpx;
		line-height: 100rpx;
		text-align: center;
		border: 1rpx solid #FE42C2;
	}

	.fl-item {
		flex: 1;
		height: 100rpx;
		background: rgba(253, 70, 185, 0.1);
		border-radius: 20rpx;
		line-height: 100rpx;
		text-align: center;
		border: 1rpx solid #FE42C2;
	}

	.ydkz-item {
		height: 100rpx;
		background: rgba(253, 70, 185, 0.1);
		border-radius: 20rpx;
		border: 1rpx solid #FE42C2;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
	}

	.xzwj-item {
		height: 100rpx;
		background: rgba(253, 70, 185, 0.1);
		border-radius: 20rpx;
		border: 1rpx solid #FE42C2;
		padding: 0 30rpx;


	}

	.xzwj-item .img-item-sel {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		border: 3px solid #fff;
	}

	.xzwj-item .img-item {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		border: 0px solid #fff;
	}

	.scroll-view-x {
		width: 100%;
		white-space: nowrap;
		/* 让内部元素不换行，保证水平排列 */
		overflow-x: auto;
		/* 允许横向溢出滚动 */
	}

	.images {
		display: inline-block;
		/* 让元素水平排列 */
		width: 120rpx;
		margin-right: 10px;
	}



	.grid-container {
		display: flex;
		/* flex-wrap: wrap; */
		/* justify-content: space-between; // 可以根据需求调整元素的水平排列方式，这里是均匀分布 */
		align-items: center; // 垂直方向居中对齐
	}

	.grid-item {
		width: 150rpx; // 可以根据设计需求调整宫格宽度
		height: 60rpx; // 宫格高度
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 20rpx;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.view-item {
		display: inline-block;
		/* 让元素水平排列 */
		width: auto;
		margin-right: 10px;
	}

	.text-item-sel {
		border: 1px solid #FD46B9;
		border-radius: 30rpx;
		color: #FD46B9;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 40rpx;
	}

	.text-item {
		border-radius: 30rpx;
		border: 1px solid #808080;
		color: #808080;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 40rpx;
	}
</style>