<template>
	<view class="page">
		<u-navbar title="拼桌详情" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
			title-size='36' height='36' :custom-back="btns" id="navbar">
		</u-navbar>
        <view class="tablexx">
        	<view class="top">
        		<view class="zhuti">
        			拼桌主题：
        		</view>
				<button open-type="share"><image src="https://api.ccttiot.com/smartmeter/img/static/uOBU07kcJQjEVSNLyxPC" mode=""></image></button>
        	</view>
			<view class="jieshao">
				{{pinzhuoobj.topic == undefined ? '--' : pinzhuoobj.topic}}
			</view>
			<view class="dangqian">
				当前桌号：{{pinzhuoobj.boothName == undefined ? '--' : pinzhuoobj.boothName}}
			</view>
			<view class="pianhao">
				<view class="">
					<image style="height:26rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uSFf09L8mtvqhjMOu0RV" mode=""></image> 
					{{pinzhuoobj.prefer == 1 ? '意向偏好男性' : pinzhuoobj.prefer == 2 ? '意向偏好女性' : '男女不限'}} 
				</view>
				<view class="">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uL0SnLLV5kxVrM1dGGsQ" mode=""></image> 已加入{{pinzhuoobj.currentNum == undefined ? '--' : pinzhuoobj.currentNum}}人 | 还可以加入{{Number(pinzhuoobj.limitNum == null ? 0 : pinzhuoobj.limitNum) - Number(pinzhuoobj.currentNum == null ? 0 : pinzhuoobj.currentNum)}}人
				</view>
				<!-- <view class="">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uf45u1lwsm91885jvYu0" mode=""></image> {{pinzhuoobj.storeName}}
				</view> -->
			</view>
        </view>
		<view class="wei" v-if="false">
			<image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/uYfyyXASVUp0WH0ENhys" mode=""></image>
			<view class="">
				<image class="dw" src="https://api.ccttiot.com/smartmeter/img/static/uKlGyV8Crgtwj0g00ajj" mode=""></image>
				<view class="">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uGowFf3hKJcXHYIkB4SO" mode=""></image> 邀请好友加入
				</view>
			</view>
		</view>
		<view class="you">
			<view class="myimg" v-for="(item,index) in yonghulist" :key="index">
				<image class="tx" v-if="item.avatar" :src="item.avatar" mode=""></image>
				<view v-else class="tx default-avatar"></view>
				<image class="xb" v-if="item.sex == 1" src="https://api.ccttiot.com/smartmeter/img/static/urkC56KUGEuJxuV58Foa" mode=""></image>
				<image class="xb" v-else src="https://api.ccttiot.com/smartmeter/img/static/uK5bsCu9k1JFbVfIINRV" mode=""></image>
				<text>{{item.nickName == undefined ? '--' : item.nickName}}</text>
			</view>
		</view>
		<view class="anniu">
			<view class="qx" v-if="user.userId == pinzhuoobj.sponsorId" @click="btnjs">
				解散拼桌
			</view>
			<view class="qx" v-else @click="btnqx">
				退出拼桌
			</view>
			<view class="qun" @click="btnqun">
				进入群聊
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#010000",
                },
				teamId:'',
			    pinzhuoobj:{},
				yonghulist:[],
				user:{},
				fxid:''
			}
		},
		onLoad(option) {
			console.log(option);
			if(option.fxid){ //判断是否是朋友分享进入
				this.teamId = option.fxid
				this.fxid = option.fxid
				this.getinfo()
				this.getxq()
				setTimeout(()=>{
					this.getyonghu()
				},100)
			}else if(option.teamId){
				this.teamId = option.teamId
				this.getinfo()
				this.getxq()
				this.getyonghu()
			}
		},
		onShareAppMessage(res) { //分享好友
			let that = this
			console.log(that.teamId,'12121212121');
		    if (res.from === 'button') { // 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '深度酒吧',
			  imageUrl:'https://api.ccttiot.com/smartmeter/img/static/u1dVlFYFsW87hp0Rs014',
		      path: '/page_user/pingzhuo/zhuozixq?fxid=' + that.teamId 
		    }
		},
		methods: {
			// 自定义返回 判断有无分享id 返回不同页面
			btns(){
				if(this.fxid == ''){
					uni.navigateBack()
				}else{
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
			},
			// 点击解散拼桌
			btnjs(){
				let that = this
				uni.showModal({
				    title: '提示', 
				    content: '您确定要解散当前拼桌吗？',
				    success: function (res) {
				        if (res.confirm) {
				          that.$u.put(`/app/team/disTeam?teamId=${that.teamId}`).then(res =>{
				          	if(res.code == 200){
				          		uni.showToast({
				          			title: '解散成功',
				          			icon: 'success',
				          			duration:2000
				          		})
				          		setTimeout(()=>{
				          			uni.navigateBack()
				          		},1000)
				          	}else{
				          		uni.showToast({
				          			title: res.msg,
				          			icon: 'none',
				          			duration:2000
				          		})
				          	}
				          })
				        } else if (res.cancel) {
				             console.log('用户点击取消');
				        }
				    }
				})
			},
			// 点击取消拼桌
			btnqx(){
				let that = this
				uni.showModal({
				    title: '提示', 
				    content: '您确定要退出当前拼桌吗？',
				    success: function (res) {
				        if (res.confirm) {
				           that.$u.put(`/app/team/exitTeam?teamId=${that.teamId}`).then(res =>{
				           	if(res.code == 200){
				           		uni.showToast({
				           			title: '退出成功',
				           			icon: 'success',
				           			duration:2000
				           		})
				           		setTimeout(()=>{ // 根据是否有分享id 判断自定义返回页面
									if(that.fxid){
										uni.switchTab({
											url:'/pages/index/index'
										})
									}else{
										uni.navigateBack()
									}
				           		},1000)
				           	}else{
				           		uni.showToast({
				           			title: res.msg,
				           			icon: 'none',
				           			duration:2000
				           		})
				           	}
				           })
				        } else if (res.cancel) {
				             console.log('用户点击取消');
				        }
				    }
				})
			},
			// 查询拼桌信息
			getxq(){
				this.$u.get(`/app/team/getTeamInfo?id=${this.teamId}`).then(res =>{
					if(res.code == 200){
						this.pinzhuoobj = res.data
					}else if(res.code == 401){ //判断被分享人是否登录 未登录则直接跳转到登录页
						uni.redirectTo({
							url:'/pages/login/login?fxid=' + this.teamId
						})
					}else{ //报错则直接跳转到首页
						uni.showModal({
						  title: '提示',
						  content: res.msg,
						  showCancel: false,
						  confirmText: '知道了',
						  success: (res) => {
						    if(res.confirm) {
						      uni.switchTab({ url:'/pages/index/index' })
						    }
						  }
						})
					}
				})
			},
			// 查询拼桌用户信息
			getyonghu(){
				this.$u.get(`/app/team/getTeammate?teamId=${this.teamId}`).then(res =>{
					if(res.code == 200){
						this.yonghulist = res.data
						if(this.fxid) {
						  // 检查用户是否已在拼桌中 
						  if(!this.yonghulist.some(item => item.userId === this.user.userId)) {
						    this.$u.post(`/app/team/joinTeam?teamId=${this.fxid}`).then(res => { //未在拼桌中则加入
						      if(res.code == 200) {
						        this.getinfo()
						        this.getxq()
						        this.getyonghu()
						      } else {
						        uni.showModal({
						          title: '提示',
						          content: res.msg,
						          showCancel: false,
						          confirmText: '知道了',
						          success: (res) => {
						            if(res.confirm) {
						              uni.switchTab({ url:'/pages/index/index' })
						            }
						          }
						        })
						      }
						    })
						  }
						}
					}
				})
			},
			// 获取个人信息
			getinfo(){
				this.$u.get(`/getInfo`).then(res => {
				    if (res.code == 200) {
						this.user = res.user
				    }
				})
			},
			// 点击进入群聊
			btnqun(){
				uni.navigateTo({
					url:'/page_user/pingzhuo/qunliao?teamId=' + this.teamId
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #010000;
	}
	.you{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 100rpx;
		box-sizing: border-box;
		margin-top: 112rpx;
		gap: 50rpx;
		flex-wrap: wrap;
	   .myimg{
	   	width: 20%;
	   	height: 160rpx;
	   	position: relative;
	   	margin-right: 30rpx;
		text-align: center;
		text{
			display: block;
			color: #fff;
		}
	   	.tx{
	   		width: 102rpx;
	   		height: 102rpx;
	   		border-radius: 50%;
	   	}
	   	.xb{
	   		width: 36rpx;
	   		height: 36rpx;
	   		position: absolute;
	   		bottom: 60rpx;
	   		right: 0rpx;
	   	}
	   }	
	}
	.anniu{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 46rpx;
		width: 100%;
		padding: 0 22rpx;
		box-sizing: border-box;
		.qx{
			width: 266rpx;
			height: 88rpx;
			background: #322C2D;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FF8998;
			text-align: center;
			line-height: 88rpx;
		}
		.qun{
			width: 412rpx;
			height: 88rpx;
			background: #FF8998;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #322C2D;
			text-align: center;
			line-height: 88rpx;
		}
	}
	.wei{
		width: 480rpx;
		margin: auto;
		margin-top: 84rpx;
		view{
			text-align: center;
			margin-top: 68rpx;
			position: relative;
			.dw{
				width: 398rpx;
				height: 78rpx;
			}
			view{
				position: absolute;
				top: -48rpx;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				align-items: center;
				image{
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}
			}
		}
		.bj{
			width: 480rpx;
			height: 373rpx;
		}
	}
	.tablexx{
		width: 700rpx;
		height: 266rpx;
		background: linear-gradient( 270deg, #1C1C1E 0%, rgba(255,137,152,0) 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border-image: linear-gradient(226deg, rgba(255, 137.00000703334808, 152.0000061392784, 0.1899999976158142), rgba(255, 137.00000703334808, 152.0000061392784, 0)) 2 2;
		margin: auto;
		margin-top: 48rpx;
		padding: 32rpx 36rpx;
		box-sizing: border-box;
		.jieshao{
			font-size: 24rpx;
			color: #FFFFFF;
			margin-top: 16rpx;
		}
		.dangqian{
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 26rpx;
		}
		.pianhao{
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			view{
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #6E7191;
				display: flex;
				align-items: center;
				image{
					height: 32rpx;
					width: 32rpx;
					margin-right: 16rpx;
				}
			}
		}
		.top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			button{
				background-color: transparent;
				margin: 0 !important;
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				position: relative;
				image{
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					right: 10rpx;
				}
			}
		}
	}
   .tx.default-avatar {
     background: #ccc;
     width: 102rpx;
     height: 102rpx;
     border-radius: 50%;
     display: inline-block;
   }
</style>