<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 list" :key="index" style="position: relative;">
						<image class="full br-20" :src="$config.cdnUrl+item.avatar"></image>
						<view style="position:absolute;bottom: 0px;left: 0px;height: auto;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 ptb-20">
								<view class="flex-column" style="flex: 1;">
									<view v-if="index==0">
										<text class="fs-28 plr-15 ptb-5 br-30"
											style="color:white;background-color: #FD46B9;">头号玩家</text>
									</view>
									<text
										style="color:white;font-size: 28rpx;margin-top: 10rpx;">{{item.nickname}}</text>
									<text
										style="color:#878787;font-size: 24rpx;margin-top: 10rpx;">{{$wskj.getAgeFromDateString(item.birthday)}}岁/{{$wskj.getConstellationFromStr(item.birthday)}}</text>
								</view>
								<image class="wh-57 br-28"
									:src="item.sex==1?'/static/icon_sex_1.png':'/static/icon_sex_2.png'"></image>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex-column pt-20" style="background-color: #0D0D0D;">
			<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;">{{leaderInfo.nickname}}</text>
					<text>{{$wskj.getTime(data.startTime)}}</text>
					<text>{{data.address}}</text>
				</view>
				<image class="wh-146 br-100" :src="$config.cdnUrl+leaderInfo.avatar"></image>
			</view>
			<view class="h-100 mtb-30 mlr-24">
				<view @click="onAdd" class="fullscreen-btn" style="background-color: #FE42C2;">
					<text>{{text}}</text>
				</view>
			</view>
			<u-popup :show="payShow" round="10" @close="onShowPay(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="onShowPay(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">时间：{{$wskj.getTime(data.startTime)}}</text>
						<text class="mt-20">活动：{{data.name}}</text>
						<text class="mt-20">地址：{{data.address}}</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;">￥{{data.joinPrice*number}}</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>
			<wskj-model-close :show="show" :showClose="false" @close="onShowYqh(false)">
				<view class="flex-column">
					<view class="h-1200 mlr-24 mb-100" style="position: relative;color: white;">
						<image class="full" :src="yqhImg"></image>
						<view class="flex-column" style="position: absolute;bottom: 50rpx;left: 0;right: 0;">
							<view class="flex-column fs-36 mlr-50" v-if="data.type==2">
								<text class="fw-600">欢迎加入{{data.partyName}}</text>
								<text
									class="fs-72 fw-600 mt-26 mb-20">{{data.startTime.slice(5,10).replace('-','/')}}</text>
								<text>{{data.startTime.slice(10,16)}}</text>
								<text class="fs-60 fw-600 mt-20"></text>
							</view>
							<view class="flex-column fs-36 mlr-50" style="margin-bottom: -100rpx;">
								<text class="fw-600">邀请您加入{{data.name}}</text>
								<text class="fs-72 fw-600 mt-26">{{data.startTime.slice(5,10).replace('-','/')}}</text>
								<text class="mt-20">{{data.startTime.slice(10,16)}}</text>
								<text class="mt-20">{{data.name}}</text>
								<text class="mt-20">{{data.address}}</text>
								<!-- 								<text class="mt-20">邀请人</text>
												<text class="mt-20">huhuhaha</text> -->
							</view>
							<view class="flex" style="justify-content: flex-end;">
								<view class="flex-column w-200 fs-24 flex-center mlr-24">
									<image class="wh-200" src=""></image>
									<text>长按添加领队微信</text>
								</view>
							</view>
							<view class="flex-center-center fs-32 mlr-24 mt-50">
								<button class="fullscreen-btn" style="background-color: #FE42C2;"
									open-type="share">我是领队，分享我的邀请函</button>
							</view>
						</view>
					</view>
				</view>
			</wskj-model-close>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number: 1,
				payShow: false,
				timeIndex: 0,
				type: 0, //0 直接支付  1选择头号玩家 2查看成员信息
				list: [],
				data: {},
				datas: {},
				partyId: '',
				leaderId: '',
				leaderInfo: {},
				show: false,
				text: '加入拼卡',
				index: '',
				yqhImg: '',
				address: "",
				name: "",
				nikeName: "",
				startTime: ""
			};
		},
		onLoad(e) {
			const token = uni.getStorageSync('token')
			console.log("拼卡分享信息", e);
			this.partyId = e.partyId;
			this.leaderId = e.leaderId;
			this.type = e.type;
			if (e.type == 0) {
				this.text = '加入拼卡'
			} else if (e.type == 1) {
				this.text = '加入拼卡'
			} else {
				this.text = '邀请拼卡'
			}
			if (!token) {
				//沒有登录  先登录
				if (!e.share == false) {
					this.$wskj.to('/pages/login/wechatlogin?share=1')
				}
			}
		},
		onShow() {
			this.getData()
			this.getList()
			this.getImg(5)
		},
		onShareAppMessage() {
			return {
				title: '花海',
				path: `/pagesMain/pages/ldxx?partyId=${this.partyId}&leaderId=${this.leaderId}&type=0&share=1`
			};
		},
		methods: {
			onShowPay(b) {
				this.payShow = b
			},
			onShowYqh(b) {
				this.show = b
			},
			//获取活动详情
			getData() {
				const params = {
					url: '/system/party/getPartyById/' + this.partyId,
					method: "GET",
					data: {}
				}
				this.$request(params).then(res => {
					this.data = res.data

				})
			},

			//获取参与拼卡的会员列表
			getList() {
				const params = {
					url: '/system/party/listPlayerByPartyIdAndLeaderId',
					method: "GET",
					data: {
						partyId: this.partyId,
						leaderId: this.leaderId,
					}
				}
				this.$request(params).then(res => {
					// for (var i = 0; i < res.rows.length; i++) {
					// 	if (res.rows[i]?.birthday != null) {
					// 		res.rows[i].age = this.getAgeFromDateString(res.rows[i].birthday);
					// 		res.rows[i].xz = this.getConstellationFromStr(res.rows[i].birthday);
					// 	}
					// }
					this.list = res.rows
					for (var i = 0; i < res.rows.length; i++) {
						if (res.rows[i].id == this.leaderId) {
							this.leaderInfo = res.rows[i]
						}
					}

				})
			},
			getImg(id) {
				//1 分享 2 客服二维码 3 头号玩家背景 4 定卡邀请函背景 5 拼卡邀请函背景
				const params = {
					url: '/system/member/gbImg?bgId=' + id,
					data: {}
				}
				this.$request(params).then(res => {
					console.log(res.data.bgImg);
					this.yqhImg = res.data.bgImg
				})
			},
			onAdd() {
				if (this.type == 0) {
					//直接支付
					this.payShow = true
					return
				}
				if (this.type == 1) {
					uni.$emit('select', {
						data: '1'
					})
					this.$wskj.goBack(1)
					return
				}
				if (this.type == 2) {
					this.show = true
					return
				}
			},
			onSubmit() {
				const params = {
					url: '/system/party/buyMember',
					data: {
						shopId: this.data.shopId,
						partyId: this.data.id,
						leaderId: parseInt(this.leaderId),
						joinNumber: this.number,
						price: this.data.joinPrice * this.number,
						type: 2,
					}
				}
				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);
						}
					});
				})
			},
			getAgeFromDateString(dateString) {
				const today = new Date(); // 当前日期
				const birthDate = new Date(dateString); // 出生日期
				let age = today.getFullYear() - birthDate.getFullYear(); // 计算年龄
				// 如果今天的日期还没到出生年份的下一个 birthDate.getMonth() + 1 月份和 birthDate.getDate() 日期，则年龄减一
				if (today.getMonth() < birthDate.getMonth() || (today.getMonth() === birthDate.getMonth() && today
						.getDate() <
						birthDate.getDate())) {
					age--;
				}
				return age;
			},
			getConstellationFromStr(dateStr) {
				const date = new Date(dateStr);
				const month = date.getMonth() + 1; // 月份范围是0-11，所以要加1
				const day = date.getDate();

				if ((month === 3 && day >= 21) || (month === 4 && day <= 19)) {
					return "白羊座";
				} else if ((month === 4 && day >= 20) || (month === 5 && day <= 20)) {
					return "金牛座";
				} else if ((month === 5 && day >= 21) || (month === 6 && day <= 21)) {
					return "双子座";
				} else if ((month === 6 && day >= 22) || (month === 7 && day <= 22)) {
					return "巨蟹座";
				} else if ((month === 7 && day >= 23) || (month === 8 && day <= 22)) {
					return "狮子座";
				} else if ((month === 8 && day >= 23) || (month === 9 && day <= 22)) {
					return "处女座";
				} else if ((month === 9 && day >= 23) || (month === 10 && day <= 23)) {
					return "天秤座";
				} else if ((month === 10 && day >= 24) || (month === 11 && day <= 22)) {
					return "天蝎座";
				} else if ((month === 11 && day >= 23) || (month === 12 && day <= 21)) {
					return "射手座";
				} else if ((month === 12 && day >= 22) || (month === 1 && day <= 19)) {
					return "摩羯座";
				} else if ((month === 1 && day >= 20) || (month === 2 && day <= 18)) {
					return "水瓶座";
				} else if ((month === 2 && day >= 19) || (month === 3 && day <= 20)) {
					return "双鱼座";
				}
			}

		},
	};
</script>

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

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

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

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