<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 @scrolltolower="scrolltolower" style="height: 100%;">
				<!-- 加入成员 -->
				<view v-if="currentTab==0" class="grid-container">
					<view class="grid-item" v-for="(item, index) in 10" :key="index" style="position: relative;">
						<image style="width: 100%;height: 100%;" src="@/static/logo.png"></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;">旅行的小七仔</text>
									<text style="color:#878787;font-size: 24rpx;margin-top: 10rpx;">19岁/巨蟹座</text>
								</view>
								<image class="wh-57 br-28" src="@/static/logo.png"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 拼卡信息 -->
				<view v-if="currentTab==1">
					<view v-for="(item,index) in 10" :key="index">
						<view class="item flex-column">
							<view style="position: relative;">
								<text v-if="index!=2"
									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: #9FFF00;">进行中</text>
								<text v-if="index==2"
									style="position:absolute;top: -20rpx;right: -20rpx;width: 130rpx;height: 48rpx;line-height: 48rpx;text-align: center; background: #999999;border-radius: 0rpx 20rpx 0rpx 4rpx;">已结束</text>
							</view>
							<view class="flex-column fs-28 mar-15">
								<text style="color: white;">【双十一单身派对】@DREAM单身畅饮</text>
								<text style="color:#878787;font-size: 24rpx;margin: 10rpx 0;">2024/11/14 22:00</text>
							</view>
							<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 class="wh-120 br-60" :src="item.src" mode="aspectFill"></image>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</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'
					}
				]
			};
		},
		onLoad(options) {

		},
		computed: {


		},
		methods: {
			onChangeTab(e) {
				this.currentTab = e.index

			},
			onSubmit() {
				if (!this.userNickName) {
					return this.$u.toast('请填写昵称')
				}
				const params = {
					url: '/api/user/profile',
					loadingTip: '',
					data: {
						nickname: this.userNickName
					}
				}
				this.$request(params).then(res => {
					// console.log(res)
					this.$u.toast(res.msg || '修改成功')
					setTimeout(() => {
						this.$wskj.goBack(1)
					}, 600)
				}).catch(err => {
					// console.log(err)
					this.$u.toast(err.msg || '修改失败')
				})
			}
		},
	};
</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-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;
	}

	.item {
		display: flex;
		background: rgba(159, 255, 0, 0.08);
		border-radius: 20rpx;
		border: 1rpx solid #9FFF00;
		margin: 0 24rpx;
		margin-bottom: 40rpx;
		padding: 20rpx;

	}

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

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