<template>
	<view class="page">
		<u-navbar title="拼桌" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
			title-size='36' height='36' id="navbar">
		</u-navbar>
        <view class="tab">
        	<view class="top">
        		<view class="">
        			<image src="https://api.ccttiot.com/smartmeter/img/static/uGaLZEBgL84ajaRfZ3Ja" mode=""></image>深度酒吧
        		</view>
				<view class="" style="color: #B8B8B8;text-decoration: underline;" @click="btnjilu">
					我的记录
				</view>
        	</view>
			<view class="bot">
				<view :class="tabindex == 1 ? 'active' : ''" @click="btntab(1)">
					现场拼桌
					<view class="" v-if="tabindex == 1"></view>
				</view>
				<view :class="tabindex == 2 ? 'active' : ''" @click="btntab(2)">
					预约拼桌
					<view class="" v-if="tabindex == 2"></view>
				</view>
			</view>
        </view>
		<view class="bd" v-if="dateflag" @click="btnchaxun">
			<view class="bdtop">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uFfH3gMS0VJVIvFPFzRR" class="bj" mode=""></image>
				<view class="fabu">
					发布拼桌，找人一起玩
				</view>
				<view class="myxx">
					<view class="myimg">
						<image class="tx" :src="teamobj.sponsorAvatar == null ? 'https://api.ccttiot.com/smartmeter/img/static/uykK7yDBpbUQoLZFZlXo' : teamobj.sponsorAvatar" mode=""></image>
						<image class="xb" src="https://api.ccttiot.com/smartmeter/img/static/urkC56KUGEuJxuV58Foa" mode=""></image>
						<image class="xb" src="https://api.ccttiot.com/smartmeter/img/static/uK5bsCu9k1JFbVfIINRV" mode=""></image>
					</view>
					<view class="myname">
						<view class="wo">
							<text v-if="teamtwoobj.userId == teamobj.sponsorId">我</text> {{teamobj.name}}
						</view>
						<view class="zhuohao">
							当前桌号：{{teamobj.boothName}}
						</view>
					</view>
				</view>
			</view>
			<view class="bdbot">
				<view class="lt">
				    正在拼 : {{ dots }}
				  </view>
				<view class="cen">
				  （ <text>{{teamobj.currentNum}}</text> / {{teamobj.limitNum == null ? 0 : teamobj.limitNum}} · <text>拼桌成功</text> ）
				</view>
				<view class="rt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uYtfNn24hW5c7V1upB2T" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="yuyue" v-else @click="btnfabu">
			<image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/uKUaflogbDvZoaRlGXhL" mode=""></image>
			<view class="wenzi">
				<view class="top">
					发布拼桌，找人一起玩
				</view>
				<view class="duoshao">
					<view class="img">
						<image v-for="(img, index) in randomImages" :key="index" :src="img" mode=""></image>
					</view>
					<text style="margin-left: 30rpx;">快来一起发起拼桌吧</text>
				</view>
			</view>
		</view>
		
		<view class="xzname">
			{{tabindex == 1 ? '现成拼桌池' : '预约拼桌池'}}
		</view>
		<view class="list">
			<view class="item_list" v-for="(item,index) in pinzhuolist" :key="index">
				<view class="top">
					{{item.name}}
				</view>
				<view class="myxx">
					<view class="myimg">
						<image class="tx" :src="item.sponsorAvatar" mode=""></image>
						<image v-if="item.sponsorSex == 1" class="xb" src="https://api.ccttiot.com/smartmeter/img/static/urkC56KUGEuJxuV58Foa" mode=""></image>
						<image v-if="item.sponsorSex == 0" class="xb" src="https://api.ccttiot.com/smartmeter/img/static/uK5bsCu9k1JFbVfIINRV" mode=""></image>
					</view>
					<view class="myname">
						<view class="wo" v-if="user.userId == item.sponsorId">
							<text>我</text> {{item.sponsorName}}
						</view>
						<view class="zhuohao">
							桌号：{{item.boothName}}
						</view>
					</view>
				</view>
				<view class="jairu">
					<image :src="i" mode=""></image> 
					已加{{item.currentNum == null ? '0' : item.currentNum}}人 | 剩余<text style="color: #FF8998;">{{Number(item.limitNum == null ? 0 : item.limitNum) - Number(item.currentNum == null ? 0 : item.currentNum)}}</text>人
				</view>
				<view class="jairu">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uQJLuuCQzeAGrFQ995Nm" mode=""></image> 
					{{item.prefer == 1 ? '偏好男性' : item.prefer == 2 ? '偏好女性' : '男女不限'}}
				</view>
				<!-- <view class="anniu">
					进入群聊
				</view> -->
				<view class="anniu" v-if="dateflag" style="background-color: #ccc;color: #fff;" @click="btnjrpz(item)">
					加入拼桌
				</view>
				<view class="anniu" v-else style="background-color: #FF8998;color: #fff;" @click="btnjrpz(item)">
					加入拼桌
				</view>
			</view>
			<view class="wu" style="width: 480rpx;height: 370rpx;margin: auto;margin-top: 80rpx;" v-if="pinzhuolist.length == 0">
				<image style="width: 480rpx;height: 370rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uQziwcKvCYhaHoaw5u93" mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#010000",
                },
				tabindex:1,
				pinzhuolist:[],
				user:'',
				teamobj:{},
				teamtwoobj:{},
				dateflag:false,
				dots: '.',
				timer: null,
				// 添加所有可选的图片数组
				allImages: [
					'https://api.ccttiot.com/smartmeter/img/static/uW6Nsdsbk3cm0JZcYdZ3',
					'https://api.ccttiot.com/smartmeter/img/static/u7ZMnMLrVfVloU1aQqlk',
					'https://api.ccttiot.com/smartmeter/img/static/uL3sR8uy6FQGX1WJlcuc',
					'https://api.ccttiot.com/smartmeter/img/static/uXnB3jfIGCwoAIGcNPsC',
					'https://api.ccttiot.com/smartmeter/img/static/uMo03QdTdngUdZXCXZLx',
					'https://api.ccttiot.com/smartmeter/img/static/uVbSWjNqRhZPiho4AIiJ',
					'https://api.ccttiot.com/smartmeter/img/static/uac9z9s7LPIMjidGwEUU',
					'https://api.ccttiot.com/smartmeter/img/static/uJPWutuFYeOejOAXn8FI',
					'https://api.ccttiot.com/smartmeter/img/static/uc95pV4gpCPfacUT56Sb',
					'https://api.ccttiot.com/smartmeter/img/static/uw3LumlMvIFxoR46Nk2M',
					'https://api.ccttiot.com/smartmeter/img/static/uWWUYfXUOpWsDGKO2cXT',
					'https://api.ccttiot.com/smartmeter/img/static/uuMZ9EM9dNIxvJJQ8PyG',
					'https://api.ccttiot.com/smartmeter/img/static/uAgBadpkh4G5w2ICo3Ri',
					'https://api.ccttiot.com/smartmeter/img/static/uQbjOPxJQsghlY79wutq',
					'https://api.ccttiot.com/smartmeter/img/static/u2ZFV9n4icW2oQr3rXPj',
					'https://api.ccttiot.com/smartmeter/img/static/ulR8mk1SEOghBK40NV6a',
					'https://api.ccttiot.com/smartmeter/img/static/uJpyxbAjX1iI0qRfXxHj',
					'https://api.ccttiot.com/smartmeter/img/static/uoxy6mhPIFyO2ojpEPNW',
				],
				// 随机选择的4张图片
				randomImages: []
			}
		},
		onLoad() {

		},
		onShow() {
			this.getdangqian()
			this.getinfo()
			this.getlist()
			this.getRandomImages() // 添加获取随机图片的调用
		},
		mounted() {
		    this.timer = setInterval(() => {
		      this.dots = this.dots.length >= 3 ? '.' : this.dots + '.'
		    }, 500)
		},
		beforeDestroy() {
		  clearInterval(this.timer)
		},
		methods: {
			// 查询是否有拼桌
			getdangqian(){
				this.$u.get(`/app/team/myTeam`).then(res => {
				    if (res.code == 200) {
						this.teamtwoobj = res.data
						if (res.data) {
						    this.teamobj = res.data.team
						    this.dateflag = true
						}else{
							this.dateflag = false
						}
				    }
				})
			},
			// 获取个人信息
			getinfo(){
				this.$u.get(`/getInfo`).then(res => {
				    if (res.code == 200) {
						this.user = res.user
				    }
				})
			},
			// 点击跳转到发布拼桌
			btnfabu(){
				uni.navigateTo({
					url:'/page_user/pingzhuo/cjpinzhuo?type=' + this.tabindex
				})
			},
			// 请求拼桌列表
			getlist(){
				this.$u.get(`/app/team/getTeamList?pageNum=1&pageSize=99&type=${this.tabindex}`).then(res =>{
					if(res.code == 200){
						this.pinzhuolist = res.rows
					}
				})
			},
			// 点击切换tab
			btntab(num){
				this.tabindex = num
				this.getlist()
			},
			// 点击我的记录
			btnjilu(){
				uni.navigateTo({
					url:'/page_user/pingzhuo/jilu?userid=' + this.user.userId
				})
			},
			// 点击进入我的拼桌详情
			btnchaxun(){
				uni.navigateTo({
					url:'/page_user/pingzhuo/zhuozixq?teamId=' + this.teamobj.id
				})
			},
			// 点击加入拼桌
			btnjrpz(item){
				this.$u.post(`/app/team/joinTeam?teamId=${item.id}`).then(res =>{
					if(res.code == 200){
						uni.navigateTo({
							url:'/page_user/pingzhuo/zhuozixq?teamId=' + item.id
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration:2000
						})
					}
				})
			},
			// 获取随机图片
			getRandomImages() {
				// 复制原数组
				let tempArray = [...this.allImages]
				// 随机选择4张图片
				this.randomImages = []
				for(let i = 0; i < 4; i++) {
					if(tempArray.length > 0) {
						const randomIndex = Math.floor(Math.random() * tempArray.length)
						this.randomImages.push(tempArray[randomIndex])
						tempArray.splice(randomIndex, 1)
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #010000;
		padding-bottom: 50rpx;
		box-sizing: border-box;
	}
	.active{
		font-weight: 600;
		font-size: 32rpx !important;
		color: #FFFFFF !important;
	}
	.yuyue{
		width: 700rpx;
		height: 202rpx;
		position: relative;
		margin: auto;
		margin-top: 42rpx;
		.wenzi{
			position: absolute;
			top: 0;
			left: 0;
			padding: 36rpx 32rpx;
			box-sizing: border-box;
			.top{
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}
			.duoshao{
				display: flex;
				align-items: center;
				margin-top: 44rpx;
				.img{
					display: flex;
					align-items: center;
					image{
						width: 34rpx;
						height: 34rpx;
						border-radius: 50%;
						margin-left: -10rpx;
						filter: blur(10px);
						-webkit-filter: blur(1px);
					}
				}
			}
		}
		.bj{
			position: absolute;
			top: 0;
			left: 0;
			width: 700rpx;
			height: 202rpx;
		}
	}
	.list{
		width: 100%;
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.item_list{
			width: 340rpx;
			height: 344rpx;
			background: #1C1C1E;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			padding: 26rpx 22rpx;
			box-sizing: border-box;
			margin-top: 22rpx;
			.anniu{
				width: 296rpx;
				height: 56rpx;
				background: #322C2D;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				font-weight: 600;
				font-size: 24rpx;
				color: #FF8998;
				text-align: center;
				line-height: 56rpx;
				margin-top: 18rpx;
			}
			.top{
				font-size: 24rpx;
				color: #FFFFFF;
			}
			.jairu{
				margin-top: 22rpx;
				display: flex;
				align-items: center;
				image{
					width: 22rpx;
					height: 22rpx;
					margin-right: 10rpx;
				}
				font-size: 22rpx;
				color: #FFFFFF;
			}
			.myxx{
				display: flex;
				align-items: center;
				margin-top: 26rpx;
				.myname{
					.zhuohao{
						font-weight: 600;
						font-size: 24rpx;
						color: #FFFFFF;
					}
					.wo{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #FFFFFF;
						text{
							width: 24rpx;
							height: 24rpx;
							background: linear-gradient( 135deg, #76FF8E 0%, #BAFFE5 100%);
							border-radius: 6rpx 6rpx 6rpx 6rpx;
							font-size: 16rpx;
							color: #1D5013;
							text-align: center;
							line-height: 24rpx;
							margin-right: 8rpx;
						}
					}
				}
				.myimg{
					width: 62rpx;
					height: 62rpx;
					position: relative;
					margin-right: 30rpx;
					.tx{
						width: 62rpx;
						height: 62rpx;
						border-radius: 50%;
					}
					.xb{
						width: 26rpx;
						height: 26rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
			}
		}
	}
	.xzname{
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		width: 700rpx;	
		margin: auto;
		margin-top: 42rpx;
	}
	.bd{
		width: 700rpx;
		height: 284rpx;
		margin: auto;
		margin-top: 42rpx;
		position: relative;
		.bdbot{
			position: absolute;
			bottom:0;
			left: 0;
			width: 700rpx;
			height: 82rpx;
			background: #1C1C1E;
			display: flex;
			justify-content: space-between;
			align-items:center;
			padding: 26rpx 40rpx;
			box-sizing: border-box;
			border-radius:  0 0 24rpx 24rpx;
			.lt{
				font-size: 24rpx;
				color: #FFFFFF;
				width: 200rpx;
			}
			.cen{
				font-size: 24rpx;
				color: #FFFFFF;
				text{
					color: #FF8998;
				}
			}
			.rt{
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.bdtop{
			position: absolute;
			top: 0;
			left: 0;
			padding: 36rpx 32rpx;
			box-sizing: border-box;
			.myxx{
				display: flex;
				align-items: center;
				margin-top: 26rpx;
				.myname{
					.zhuohao{
						font-weight: 600;
						font-size: 24rpx;
						color: #FFFFFF;
					}
					.wo{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #FFFFFF;
						text{
							width: 24rpx;
							height: 24rpx;
							background: linear-gradient( 135deg, #76FF8E 0%, #BAFFE5 100%);
							border-radius: 6rpx 6rpx 6rpx 6rpx;
							font-size: 16rpx;
							color: #1D5013;
							text-align: center;
							line-height: 24rpx;
							margin-right: 8rpx;
						}
					}
				}
				.myimg{	
					width: 62rpx;
					height: 62rpx;
					position: relative;
					margin-right: 30rpx;
					.tx{
						width: 62rpx;
						height: 62rpx;
						border-radius: 50%;
					}
					.xb{
						width: 16rpx;
						height: 16rpx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
			}
			.fabu{
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}
			.bj{
				width: 700rpx;
				height: 202rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
		}
	}
	.tab{
		width: 750rpx;
		height: 180rpx;
		background: #1C1C1E;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding-top: 24rpx;
		padding-left: 52rpx;
		padding-right: 52rpx;
		padding-bottom: 28rpx;
		margin-top: 28rpx;
		box-sizing: border-box;
		color: #fff;
		font-size: 28rpx;
		.bot{
			display: flex;
			justify-content: space-between;
			padding: 0 140rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			color: #808080;
			margin-top: 38rpx;
			view{
				view{
					width: 40rpx;
					height: 6rpx;
					background: #FF8998;
					border-radius: 5rpx 5rpx 5rpx 5rpx;
					margin: auto;
					margin-top: 10rpx;
				}
			}
		}
		.top{
			display: flex;
			justify-content: space-between;
			view{
				display: flex;
				align-items: center;
				image{
					width: 26rpx;
					height: 26rpx;
					margin-right: 14rpx;
				}
			}
		}
	}

</style>