<template>
	<view class='container'>
		<view class="sv-y">
			<scroll-view scroll-y>
				<view class="grid-container">
					<view class="grid-item" v-for="(item, index) in leaderList" :key="index"
						style="position: relative;">
						<image style="width: 100%;height: 100%;" :src="`${$config.domain}`+ item.avatar"></image>
						<view style="position:absolute;bottom: 0px;left: 0px;height: 50%;width: 100%;justify-content: space-between;background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 49%, #000000 100%);
				border-radius: 0rpx 0rpx 20rpx 20rpx;">
							<view class="flex mt-130 mlr-20 flex-center-center">
								<view class="flex-column" style="flex: 1;">
									<text style="color:white;font-size: 28rpx;">{{item.nikename}}</text>
									//生日转年龄待处理
									<text
										style="color:#878787;font-size: 24rpx;margin-top: 10rpx;">{{item.birthday}}/{{item.star}}</text>
								</view>
								<image class="wh-57 br-28" :src="item.sex=='男' ?'/static/na.pag':'/static/nv.png'">
								</image>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex-column pt-20">
			<view class="flex mar-24">
				<view class="flex-column fs-24 flex-1 flex-between" style="color: #878787;">
					<text style="color: #fff;font-size: 32rpx;">{{userlist.nickname}}</text>
					<text>{{Eventsmsglist.startTime}}</text>
					<text>{{storeobj.address}}</text>
				</view>
				<image class="wh-146 br-100" :src="`${$config.domain}`+userlist.avatar"></image>
			</view>
			<view class="h-100 mtb-30 mlr-24">
				<view @click="onAdd" class="fullscreen-btn" style="background-color: #FE42C2;">
					<text>加入拼卡</text>
				</view>
			</view>
			<u-popup :show="payShow" round="10" @close="payShow = 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="payShow = false" class="wh-46 mar-24" src="/static/icon_zftck_x.png"></image>
					</view>
					<view class="flex-column mlr-24 mt-25 br-10 pad-20 fs-32"
						style="color:white;background-color: #303030;">
						<text style="font-size: 42rpx;">信息确认</text>
						<text class="mt-50">时间：11/14 周四 22:00</text>
						<text class="mt-20">活动：双十一单身狂欢派对</text>
						<text class="mt-20">地址：郑州市华山路121号磨街文创园7号</text>
						<view class="flex-column mt-25 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-25 br-10 plr-20 ptb-30 fs-32 flex-between"
						style="color: #878787;background-color: #303030;align-items: center;">
						<text style="color: white;">选择数量</text>
						<view class="flex fs-28">
							<text class="wh-50 flex-center-center" style="color:white;"
								@click="number==1?1:number--">-</text>
							<view class="flex-center-center"
								style="color:white; background: #2B2B2B; width: 120rpx;border-radius: 26rpx;margin: 0 20rpx;">
								<input placeholder="1" v-model="number" style="text-align: center;" />
							</view>
							<text class="wh-50 flex-center-center" style="color:white;" @click="number++">+</text>
						</view>

					</view>
					<view class="flex mlr-24 mt-25 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 class="h-100 mtb-30 mlr-24">
						<view @click="onSubmit" class="fullscreen-btn" style="background-color: #FE42C2;">
							<text>确认支付</text>
						</view>
					</view>
				</view>

			</u-popup>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				leaderList: [],
				Eventsmsglist:'',
				storeobj: '',
				userlist: '',
				number: 0,
				payShow: false,
				timeIndex: 0,
				type: 0, //0 直接支付  1选择头号玩家
			};
		},
		onLoad(options) {
			let a = JSON.parse(decodeURIComponent(options.obj))
			console.log(a,"asdasda")
			this.Eventsmsglist= this.$store.state.Eventsmsg
			this.storeobj = this.$store.state.messagelist
			this.userlist = a.item
			this.type = a.type;
			let data = {
				partyId: a.item.id,
				leaderId: this.$store.state.Eventsmsg.id
			};
			this.$api.getAndLeader(data).then(res => {
				this.leaderList = res.rows
			})
			
		},
		methods: {
			onAdd() {
				if (this.type == 1) {
					uni.$emit('select', {
						data: '1'
					})
					this.$wskj.goBack(1)
					return
				}
				//直接支付
				this.payShow = true

			}

		},
	};
</script>

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

	.sv-y {
		flex: 1;
		/* 自动占满剩余的空间 */
		overflow-y: auto;
		/* 允许纵向滚动 */
	}

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

	.grid-item {
		width: 46%; // 可以根据设计需求调整宫格宽度
		height: 445rpx; // 宫格高度
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #f5f5f5; // 宫格背景色示例，可按需修改
		border-radius: 10px; // 宫格圆角效果
		margin-bottom: 20rpx;
	}
</style>