<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.domain}`+ 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">时间：{{Eventsmsg.startTime}}</text>
						<text class="mt-20">活动：{{Eventsmsg.name}}</text>
						<text class="mt-20">地址：{{siteaddress}}</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-160 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;">￥500</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 style="width: 100%;height: 100%;" :src="`${$config.domain}`+ floor.image"></image>
					</view>
					<view class="flex-column mtb-50 mlr-24">
						<text class="fs-42 mb-30" style="color: white;">选区</text>
						<view class="grid-container">
							<view class="grid-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>
						</view>

					</view>
					<view class="flex-column mlr-24">
						<text class="fs-42 mb-30" style="color: white;">选座</text>
						<view class="grid-container" v-if="form.boothall.length>0">
							<view class="grid-item" style="height: 200rpx;border-radius: 20rpx;"
								v-for="(item, index) in form.boothall" :key="index" @click="xz_number=index">
								<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>2人</text>
								</view>
							</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: '', //楼层数据
				form: {
					boothtext: '未选择卡座', //卡座
					region: [],
					booth: [],
					boothall: [],
				},
				Eventsmsg: {},
				site: {},
				siteaddress: '',
				zwShow: false,
				number: 0,
				payShow: false,
				timeIndex: 0,
				type: 1,
				xzwj_number: 0, //确定索引
				xzwj_num: 0, //临时索引
				xq_number: 0, //选区索引
				xz_number: 0, //选座索引
				itemList: []

			};
		},
		onLoad() {
			console.log(this.$store.state.lclist,"this.$store.state.lclist")
			this.floor = this.$store.state.lclist
			this.siteaddress = this.$store.state.messagelist.address
			this.Eventsmsg = this.$store.state.Eventsmsg
			this.$api.getlistLeaderByParty(this.$store.state.Eventsmsg.id).then(res=>{
				this.itemList=res.rows
			})
		},
		onShow() {
			//确认选择的头号玩家监听
			uni.$on('select', this.select)
		},
		methods: {
			getFloorlist() {
				this.zwShow = true
				this.$api.getlistAreaByFloor(this.floor.id).then(res => {
					this.form.region = res.rows
					this.getByFloorlist(res.rows[0])
				})

			},
			getByFloorlist(e) {
				this.xz_number=0
				const params = {
					id: this.floor.id,
					area: e
				}
				this.$api.getlistSeatByByFloor(params).then(res => {
					this.form.boothall = res.rows
				})
			},
			// 选座的确认
			onSubmitBooth(){
				
			},
			onTab(e) {
				this.type = e;

			},
			onXzthwj(item, index) {
				this.xzwj_num = index;
				const data={
					type:1,
					item
				}
				this.$wskj.to('/pages/ldxx?obj='+ encodeURIComponent(JSON.stringify(data)))
			},
			select(e) {
				this.xzwj_number = this.xzwj_num;
			},
			onSubmit() {
				this.$wskj.to('/pages/zfjg?type=' + 1)
			}

		},
	};
</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-around; // 可以根据需求调整元素的水平排列方式，这里是均匀分布
		align-items: center; // 垂直方向居中对齐
	}

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


	}

	.grid-item .text-item-sel {
		width: 100%;
		height: 100%;
		border: 1px solid #FD46B9;
		border-radius: 30rpx;
		color: #FD46B9;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.grid-item .text-item {
		width: 100%;
		height: 100%;
		border-radius: 30rpx;
		border: 1px solid #808080;
		color: #808080;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>