<template>
	<view class='container'>
		<u-tabs :list="tabList" lineHeight="0" :current="currentTab" @click="onChangeTab" :scrollable="true"
			lineColor="#FFF" :inactiveStyle="{'font-size': '28rpx', 'color': '#878787'}"
			:activeStyle="{'font-size': '32rpx', 'color': '#FFFFFF'}"></u-tabs>
		<view class="list">
			<scroll-view scroll-y style="height: 100%;">
				<!-- 加入成员 -->
				<view v-if="currentTab==0" style="width: 100%;">
					<view class="grid-container">
						<view class="grid-item" v-for="(item, index) in memberlist" :key="index"
							style="position: relative;">
							<image style="width: 100%;height: 100%;" :src="$config.cdnUrl+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.nickname}}</text>
										<text
											style="color:#878787;font-size: 24rpx;margin-top: 10rpx;">{{item.age}}岁/{{item.xz}}</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>
					<emptydata v-if="memberlist.length == 0"></emptydata>
				</view>

				<!-- 拼卡信息 -->
				<view v-if="currentTab==1" style="width: 100%;">
					<view v-for="(item,index) in partyList" :key="index">
						<view class="item flex-column"
							@click="$wskj.to('/pagesMain/pages/ldxx?partyId='+item.id+'&leaderId='+item.leaderInfo.id+'&type=2')">
							<view style="position: relative;">
								<text
									style="position:absolute;top: -20rpx;right: -20rpx;width: 130rpx;height: 48rpx;line-height: 48rpx;text-align: center; background: #0F0F0F;border-radius: 0rpx 20rpx 0rpx 4rpx;color:#FE42C2;">
									{{item.state=='2'?'已结束':'进行中'}}
								</text>
							</view>
							<view class="flex-column fs-28 mar-15">
								<text style="color: black;">{{item.name}}</text>
								<text style="color:#878787;font-size: 24rpx;margin: 10rpx 0;">{{item.startTime}}</text>
							</view>
							<view style="width: 100%;">
								<scroll-view class="scroll-view-x" scroll-x="true">
									<view class="images" v-for="(sonitem, index) in getSonList(item)" :key="index">
										<image class="wh-120 br-60" :src="$config.cdnUrl+sonitem.avatar"
											mode="aspectFill">
										</image>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
					<emptydata v-if="partyList.length == 0"></emptydata>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				tabList: [{
						name: '加入成员',
					},
					{
						name: '拼卡信息',
					}
				],
				itemList: [{
						src: 'https://cdn.uviewui.com/uview/goods/1.jpg'
					},
					{
						src: 'https://cdn.uviewui.com/uview/goods/1.jpg'
					},
					{
						src: 'https://cdn.uviewui.com/uview/goods/1.jpg'
					},
					{
						src: 'https://cdn.uviewui.com/uview/goods/1.jpg'
					},
					{
						src: 'https://cdn.uviewui.com/uview/goods/1.jpg'
					},
					{
						src: 'https://cdn.uviewui.com/uview/goods/1.jpg'
					}
				],
				memberlist: [], //我的队伍
				partyList: [], //拼卡列表
			};
		},
		onLoad(options) {
			console.log(options, "dasdasdasd")
			this.getList()
		},
		methods: {
			getSonList(item) {
				const list = []
				list.push(item.leaderInfo)
				for (var i = 0; i < item.memberList.length; i++) {
					list.push(item.memberList[i])
				}
				return list
			},
			onChangeTab(e) {
				this.currentTab = e.index

			},
			getList() {
				const params = {
					url: '/system/party/getMyTeam',
					loadingTip: '',
					method: "GET",
					data: {
						leaderId: uni.getStorageSync('id')
					}
				}
				this.$request(params).then(res => {
					for (var i = 0; i < res.data.memberList.length; i++) {
						if (res.data.memberList[i]?.birthday != null) {
							res.data.memberList[i].age = this.getAgeFromDateString(res.data.memberList[i]
								.birthday);
							res.data.memberList[i].xz = this.getConstellationFromStr(res.data.memberList[i]
								.birthday);
						}
					}
					this.memberlist = res.data.memberList
					this.partyList = res.data.partyList
				})
			},
			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 {
		height: 100%;
		height: 100%;
		background: #0F0F0F;
		display: flex;
		flex-direction: column;
	}

	.list {
		overflow: hidden;
		height: calc(100% - 60rpx);
	}

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

	.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;

	}

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

	.item {
		display: flex;
		background: url('/static/icon_pk_bg.png');
		border-radius: 20rpx;
		margin: 0 24rpx;
		margin-bottom: 40rpx;
		padding: 20rpx;

	}

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