<template>
	<view class="container">
			<view class="" :style="{'height':heightG+'px'}"  @click="quanju">
		<view class="top-do-box">
			<view class="room-info">
				<view class="room-logo-box">
					<image :src="room.cover" class="room-logo-box"></image>
				</view>
				<view class="room-info-message">
					<view class="room-user-name">
						<text
							style="color: #fff;font-size: 25rpx;">{{room.live_name.length>6?room.live_name.substring(0, 6)+'...': room.live_name}}</text>
					</view>
					<view class="room-user-money">
						<text style="color: #fff;font-size: 25rpx;">4000</text>
					</view>
				</view>
				<view class="room-guanzhu" @click="interest">
					<text class="guanzhu" v-if="!follow">关注</text>
					<text class="guanzhu" v-else>已关注</text>
				</view>
			</view>
			<view class="room-users-box">
				<scroll-view class="right_top_scroll" scroll-x="true" scroll-left="0">
					<view class="top-scroll-users-header" v-for="(bitem,bindex) in users" :key="bindex">
						<image :src="bitem.app_user_avatar" class="top-scroll-users-header"
							v-if="bitem.app_user_avatar"></image>
						<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/default_avtar.png"
							class="top-scroll-users-header" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>

			<view class="users-count web-font">
				<view class="users-count web-font">
					<text class="users-count-text"> {{users.length}}</text>
				</view>
				<view class="users-count " @click="outroom">
					<image src="@/static/img/close.png" class="users-count-img" mode="aspectFit"></image>
				</view>
			</view>
		</view>


		<view class="top-left" v-if="isshow">
			<view class="top-left-a" @click="switchCamera">
				<image class="left-img" src="/static/img/qiehuan.png" mode=""></image>
			</view>
		</view>
		<view class="msgview">
			<mh-msgList ref="msgList" :msgList="msgList"></mh-msgList>
		</view>
		<!-- 底部操作 -->
</view>

		<view class="inpit-box-bg" v-if="focus">
			<view class="inpit-box-body">
				<input class="uni-input" @input="onKeyInput" maxlength="20" cursor-spacing="10" hold-keyboard
					placeholder="说点什么吧..." :value="inputValue" :focus="focus" />
				<view v-if="inputValue!=''" @click="send_message">
					<text class="send-but">发送</text>
				</view>
			</view>
		</view>
		<view class="dobox" v-else>
			<view class="inpit-box">
				<view class="input-tpl" @click="set_focus">
					<text class="input-tpls">说点什么..</text>
				</view>
				<view class="functionbox">
					<view class="function-box">

						<view class="ico-box" @click="send_liwu">
							<image class="ico-box-img" src="@/static/img/li.png" mode="aspectFit"></image>
						</view>
						<view class="ico-box" @click="send_shop">
							<image class="ico-box-img" src="@/static/img/shanpin.png" mode="aspectFit"></image>
						</view>
						<view class="ico-box" @click="send_lick">
							<image class="ico-box-img" src="@/static/img/gn.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true" @change="change">
			<template v-if="popup==1">
				<view class="uni-share" style="background-color: #333333;">

					<view class="send-boj" id="tes">
						<view class="send-boj-txt">
							<text class="send-boj-txta">礼物</text>
							<view class="gift-jb-con">
								<image class="gift-jb-img" src="@/static/img/jb.png" mode=""></image>
								<text class="gift-web-je">
									{{now_money}}
								</text>

							</view>

						</view>
						<view class="send-boj-close" @tap="close">
							<image class="send-boj-close-img" src="/static/img/close.png" mode=""></image>
						</view>
					</view>
					<scroll-view scroll-y style="height: 480rpx;overflow: hidden;">

						<view class="uni-share-content">
							<view class="lw-box" v-for="(litem,lindex) in liwu" :key="lindex"
								@click="send_liwu_obj(litem)" @touchstart="handleTouchStart(lindex)"
								@touchend="handleTouchEnd(lindex)" :class="{ 'hovered': lindex== hoveredIndex }">
								<image class="lw-ico" :src="litem.gift_img"></image>
								<view class="lw-name">
									<text class="lw-name">{{litem.gift_name}}</text>
								</view>
								<view class="lw-money">
									<image class="lw-money-img" src="@/static/img/jb.png" mode=""></image>

									<text class="lw-moneya">{{litem.gift_price}}
									</text>
								</view>
								<text class="send-m" v-if="lindex== hoveredIndex">赠送</text>
							</view>
						</view>

					</scroll-view>
					<!-- <view class="gift-botton-view" @click="rechargejb">
						<text class="gift-web-cz">充值</text>
					</view> -->
				</view>
			</template>
			<template v-if="popup==2">
				<view class="uni-shop">

					<view class="shop">
						<view class="shop-top">
							<image class="shop-top-img" :src="room.cover" mode=""></image>
							<text class="shop-top-txt">{{roomDetail.live_name}}</text>
						</view>
						<view class="shop-close" @tap="close">
							<image class="shop-close-img" src="/static/img/colse1.png" mode=""></image>
						</view>
					</view>
					<scroll-view scroll-y style="height: 680rpx;overflow: hidden;">
						<view class="uni-shop-content">

							<view class="shop-content" v-for="(litem,lindex) in roomDetail.goods" :key="lindex">
								<image class="shop-content-img" :src="litem.app_goods_pic"></image>
								<view class="shop-content-txt">
									<view class="sp-txta">{{litem.app_goods_name}}</view>
									<view class="sp-txtb">
										<view class="txtba">
											<text class="txtba-a">￥</text>
											<text class="txtba-b">{{litem.app_goods_price.split('.')[0]}}.</text>
											<text class="txtba-c">{{litem.app_goods_price.split('.')[1]}}</text>
										</view>
										<text class="txtbb" @click="shopp(litem)">去抢购</text>
									</view>
								</view>
							</view>
						</view>

					</scroll-view>

				</view>
			</template>
		</uni-popup>
		<uni-popup ref="recharge" :type="type" :custom="true" @change="change">
			<view class="uni-recharge">
				<view class="recharge">
					<view class="recharge_title">
						<text class="recharge_title">我的金币</text>
					</view>
					<view class="recharge-one">
						<image class="recharge-one-img" src="../../static/img/jb.png" mode="aspectFit"></image>
						<view class="recharge-one-txt"><text class="recharge-one-txt" {{now_money}}</text></view>
					</view>
					<view class="recharge-con">
						<view class="recharge-con-title">
							<text class="recharge-con-title">金币充值</text>
						</view>
						<view class="recharge-con-detail">

							<view class="con-detail" v-for="(item,ik) in Recharglist" :key='ik'
								@click="RechargClick(ik)" :class="{ 'carecharge': ik== regIndex }">
								<view class="" v-if='item.id=="AA"'>
									<!-- <text class="con-detaila">输入金额</text> -->
									<input type="text" class="con-detaila" value="" placeholder="输入金额" />
									<text class="con-detailb">最低可充值1元</text>
								</view>
								<view class="" v-else>
									<text class="con-detaila">{{item.data.give}}金币</text>
									<text class="con-detailb">{{item.data.price}}元</text>
								</view>
							</view>
						</view>

						<text class="recharge-conbottom">
							立即充值
						</text>
					</view>
				</view>
			</view>

		</uni-popup>
		<!-- 礼物弹窗 -->
		<view class="gift-alert" v-for="(gift,gindex) in giftobj" :key="gindex"
			:style="{ top: gift.top + 'px', left: gift.left + 'px' }">

			<view class="gift-alerta">
				<view class="send-boj-user-header">
					<image :src="gift.app_user_avatar" class="send-boj-user-header-img" mode="aspectFill"
						v-if="gift.app_user_avatar"></image>
					<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/default_avtar.png"
						class="send-boj-user-header-img" mode="aspectFill"></image>
				</view>
				<view class="gift-detail">
					<text class="gifta">{{gift.app_user_name}}</text>
					<text class="giftb">送{{room.app_user_name}}{{gift.gift_name}}</text>
				</view>
				<view class="gift-ico">
					<image :src="gift.gift_img" class="gift-ico-img" mode="aspectFill"></image>
				</view>
			</view>
			<view class="gift-alertb">
				<image class="gift-alertb-img" src="@/static/img/X.png" mode=""></image>
				<view class="gift-alertb-txt"> <text class="gift-alertb-txt">{{gift.gift_num}}</text> </view>
			</view>
		</view>
		<!-- 用户进入弹窗 -->
		<view class="join-box" v-for="(join,jindex) in join_arr" :key="jindex" :animation="join.animationData">
			<view class="user-lever" style="margin-right: 10upx;">
				<view class="user-lever-ico-box">
					<image class="user-lever-ico" src="/static/img/room-user-lever.png"></image>
				</view>
				<view class="web-font user-lever-text">2</view>
			</view>
			<text class="join-box-text web-font">
				{{join.message}}
			</text>
		</view>

		<gb-popup :isShow="isShow1" rName="确定" :isBut="false" lName="取消" @lEvent="show1" @rEvent="copyData"
			title="请输入礼物数量">
			<view style="padding: 30rpx;">
				<input type="value" v-model="gift_num" placeholder="请输入" />
			</view>
		</gb-popup>
	</view>
</template>

<script>
	import {
		joinChatRoom,
		sendGroupMessage,
		bindUser,
		stopPushLive,
		liveDetail,
		getfans,
		rewardList,
		giftList,
		liveAudience,
		getuser,
		getRechargeApi,
		sendGift,
		getAjuser
	} from '@/api/live.js'
	import {
		VUE_APP_WS_URL_ONE
	} from '@/config/app.js';

	import uniPopup from '@/components/unipopup/live-uni-popup.vue';
	import msgList from '@/components/mh-msgList/mh-msgList.vue';
	import gbpopup from '@/components/gb-popup/gb-popup.vue';
	export default {
		name: "sd-float-page",
		props: {
			role_val: {
				type: String,
				default: '0'
			},
			roomid_val: {
				type: String,
				default: '0'
			},
			room: {
				type: Object,
			},
			heightG :{
				type: String,
				default: '760'
			},
		},
		components: {
			uniPopup,
			'mh-msgList': msgList,
			'gb-popup': gbpopup,
		},
		data() {
			return {
				windowWidth: '',
				// room: [], //房间信息
				roomobj: [],
				users: [{
						url: require('@/static/images/bg1.png'),
					},
					{
						url: require('@/static/images/bg1.png'),
					},
					{
						url: require('@/static/images/bg1.png'),
					}, {
						url: require('@/static/images/bg1.png'),
					}
				],
				rid: 0, //房间id
				role: '', //角色
				focus: false,
				inputValue: '',
				isshow: false,
				message_arr: [

				],
				msgList: [{
					userName: "系统通知",
					content: "倡导绿色直播，严禁发布涉黄涉毒涉赌，严禁发布涉政、违法及低俗违规内容。健康直播，文明互动",
					cmd: "say",
					msg_type: "system"
				}, ],
				view_id: '',
				liwu: [],
				liwu2: [],
				liwu3: [],
				type: 'bottom',
				follow: false, //关注
				popup: 3, //1礼物操作 2其他操作 3.商品
				user: '',
				giftobj: [], //礼物
				join_arr: [],
				userName: '',
				now_money: 0,
				roomDetail: '',
				userinfo: null,
				hoveredIndex: -1,
				regIndex: -1,
				gifts: [],
				gifsobj: {},
				gift_num: '',
				isShow1: false,
			}
			/*定义IM消息类型
			1：进群通知
			2：发送自定义消息
			3：收到礼物
			*/
		},

		mounted() {


			this.userinfo = JSON.parse(uni.getStorageSync('USER_INFO'))
			this.getjuser()
		
			this.get_live_room(); //调用直播间信息
			this.rewardList()
			this.giftList()
			this.liveAudience()
			this.getuser()
			this.getRecharg()

		},
		onReady() {
			this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
			const t = this;
			t.role = this.$props.role_val;
			t.rid = this.$props.roomid_val;
			t.user = uni.getStorageSync('user');
			console.log('浮动模板被加载的事件')
			console.log(this.$props)
			// 保持屏幕常亮
			uni.setKeepScreenOn({
				keepScreenOn: true,
				success: (res) => {
					console.log('手机长亮时间')
					console.log(res)
				},
				fail: (e) => {
					console.log(e)
					console.log('手机长亮时间')
				}
			});
			uni.onKeyboardHeightChange(res => {
				if (res.height == 0) {
					this.focus = false;
				}
			})


		},
		beforeDestroy() {
			uni.closeSocket({
				success: function() {
					console.log('WebSocket连接已关闭')
				},
				fail: function(err) {
					console.log('关闭WebSocket连接失败:', err)
				}
			})
		},
		methods: {
			//关注
			getjuser() {
				getAjuser(this.room.app_user_id).then((res) => {
					if (res.status == 200) {
						this.follow = res.data.is_start
					}
				}).catch((err) => {

				})
			},
			//获取充值数据
			getRecharg() {
				getRechargeApi().then((res) => {
					console.log(res.data.recharge_quota, '11111111')
					this.Recharglist = res.data.recharge_quota
					this.Recharglist.push({
						data: {},
						id: 'AA'
					})
					// this.now_money = res.data.now_money
				})
			},
			//获取余额
			getuser() {
				getuser().then((res) => {

					this.now_money = res.data.now_money
				})
			},
			//获取房间人数列表
			liveAudience() {
				let data = {
					app_name: 'shop',
					live_stream_id: this.room.live_stream_id
				}
				liveAudience(data).then((res) => {
					this.users = res.data.lists
				})
			},
			//礼物列表
			rewardList() {
				rewardList().then((res) => {
					console.log(res, '11111111')
				})
			},
			//送礼
			//送礼

			bosendGift(gif) {
				// 执行关闭模态对话框的操作
				let data = {
					app_name: 'shop',
					gift_id: gif.gift_id,
					live_stream_id: this.room.live_stream_id,
					gift_num: gif.gift_num,
				}
				console.log(data)
				sendGift(data).then((res) => {

					if (res.code == 1) {
						this.$refs.share.close()
						uni.hideModal()
						this.getuser()
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							confirmColor: '#ee6666', //确定字体颜色
							showCancel: false, //没有取消按钮的弹框
							buttonText: '确定',
							success: function(res) {
								if (res.confirm) {

								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}
				})

			},
			//礼物列表
			giftList() {
				giftList().then((res) => {
					this.liwu = res.data
				})
			},
			//关注
			interest() {
				this.follow = !this.follow
				if (this.follow) {
					getfans(this.room.app_user_id, {
						status: 1
					}).then((res) => {
						console.log(res, '11111111')
						if (res.status == 200) {

							console.log('关注成功')
						}

					}).catch((err) => {
						console.log(err)
					})
				} else {
					getfans(this.room.app_user_id, {
						status: 0
					}).then((res) => {
						if (res.status == 200) {

							console.log('已取消关注')
						}
					}).catch((err) => {
						console.log(err)
					})
				}

			},

			//充值
			RechargClick(index) {
				this.regIndex = index
			},
			//hover效果设置
			handleTouchStart(index) {
				this.hoveredIndex = index;
			},
			handleTouchEnd(index) {
				this.hoveredIndex = -1;
			},
			//加入直播间
			joinChatRoom() {
				let data = {
					live_stream_id: this.room.live_stream_id,
					app_name: 'shop',
					app_user_id: uni.getStorageSync('UID'),
					app_user_name: '用户' + uni.getStorageSync('UID'),
					app_user_avatar: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
				}
				joinChatRoom(data).then((res) => {
					if (res.code == 1) {
						console.log('加入房间成功')
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							confirmColor: '#ee6666', //确定字体颜色
							showCancel: false, //没有取消按钮的弹框
							buttonText: '确定',
							success: function(res) {
								if (res.confirm) {
									uni.redirectTo({
										url: '/pages/room/index'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
			},

			//购买商品

			shopp(item) {
				// console.log(item)
				uni.navigateTo({
					url:'/pages/goods_details/index?id='+item.app_goods_id
				})
			},
			//绑定用户id
			bindUser(client_id) {
				let data = {
					app_name: 'shop',
					app_user_id: uni.getStorageSync('UID'),
					client_id: client_id
				}
				bindUser(data).then((res) => {
					if (res.code == 1) {
						console.log('绑定成功')
						this.joinChatRoom()
					}

				}).catch((err) => {
					console.log(err)
				})
			},

			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
			connectSocketInit() {
				console.log(VUE_APP_WS_URL_ONE)
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: VUE_APP_WS_URL_ONE,
					success(data) {
						console.log("websocket连接成功", data);
					},
					fail() {
						console.log("websocket连接失败", data);
					},
					complete(data) {
						console.log("websocket连接完成", data);
					}
				});
				this.socketTask.onError((res) => {
					console.log("连接发生错误", res)
				})
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask.onOpen(res => {
					console.log(res, '连接打开');
				})

				this.socketTask.onMessage((res) => {
					console.log("收到服务器内容：" + res.data);
					let str = res.data
					let obj = JSON.parse(str);
					if (obj.type == 'init') {
						this.bindUser(obj.client_id)
					} else if (obj.type == 'message') {

						// console.log(this.msgList.length, '11111111111')


						let data1 = {
							userName: obj.name,
							content: obj.text,
							avatar: obj.avatar,
							cmd: "say",
							msg_type: "user"
						}
						this.msgList.push(data1)
						this.$refs.msgList.setMsgPanelScroll()
					} else if (obj.type == 'sys_message') {
						let data1 = {
							userName: obj.name,
							content: obj.text,
							avatar: obj.avatar,
							cmd: "say",
							msg_type: "system"
						}
						this.msgList.push(data1)
						this.$refs.msgList.setMsgPanelScroll()
					} else if (obj.type == 'stream') {
						if (obj.status == -1) {
							uni.showModal({

								title: '提示',
								content: '直播间已关闭',
								confirmColor: '#ee6666', //确定字体颜色
								showCancel: false, //没有取消按钮的弹框
								buttonText: '确定',
								success: function(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: '/pages/room/index'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})

						}
					}  else if (obj.type == 'gift_message') {
						let data1 = {
							userName: '',
							content: obj.text+'X'+obj.gift_num,
							avatar: obj.app_user_avatar,
							cmd: "say",
							msg_type: "user"
						}
						this.msgList.push(data1)
						this.$refs.msgList.setMsgPanelScroll()
						this.sendGift(obj)

					} else if (obj.type == 'audience') {
						this.liveAudience()
					}






				});
				// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask.onClose(() => {
					console.log("已经被关闭了")
				})
			},
			sendGift(gift) {
				// userName: "11111111",
				// number: 33330,
				// gift_name: "333333333",
				// userAvatar: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
				// gift_ico: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",

				gift.top = Math.random() * 200 // 随机生成礼物的位置
				gift.left = Math.random() * 200 // 随机生成礼物的位置
				this.giftobj.push(gift);
				setTimeout(() => {
					this.giftobj.splice(this.gifts.indexOf(gift), 1); // 礼物消失
				}, 3000);
			},
			start() {
				this.timeoutObj = setTimeout(() => {
					//这里发送一个心跳，后端收到后，返回一个心跳消息，
					//onmessage拿到返回的心跳就说明连接正常
					console.log('ping');
					this.socketTask.send({
						data: "ping"
					});

				}, this.timeout)
			},
			// 关闭websocket【离开这个页面的时候执行关闭】
			closeSocket() {
				this.socketTask.close({
					success(res) {
						this.is_open_socket = false;
						console.log("关闭成功", res)
					},
					fail(err) {
						console.log("关闭失败", err)
					}
				})
			},


			//关闭弹窗
			close() {
				this.$refs.share.close()

			},
			//切换摄像头
			switchCamera() {
				console.log('切换摄像头')
				this.$emit('switchCamera', '')
			},
			onRoomFunc: function(e) {
				const t = this;
				var self = this;

				var message = {
					userName: '11111111',
					number: 33330,
					gift_name: '333333333',
					userAvatar: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png",
					gift_ico: "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/1b716202302251108516996.png"
				};
				var nowTime = new Date();
				var animation = uni.createAnimation({
					duration: 200,
					timingFunction: 'linear'
				});
				animation.left(20).step({
					duration: 200
				});
				message.animationData = animation;
				message.tapTime = nowTime; //加入计时器
				t.giftobj.push(message);
				console.log('t.giftobj', t.giftobj)
				var animation_del = uni.createAnimation({
					duration: 200,
					timingFunction: 'linear'
				});
				animation_del.left(-300).step({
					duration: 200
				});
				setTimeout(function() {
					for (var i = 0; i < t.giftobj.length; i++) {
						if (new Date() - t.giftobj[i].tapTime > 3000) {
							t.giftobj[i].animationData = animation_del;
							// if (new Date() - t.giftobj[i].tapTime > 5000){
							// 	t.giftobj.splice(i,1);//释放内存
							// }
						}
					}
					console.log('t.giftobj', t.giftobj)
				}, 3000)
				message.message = message.userName + '送了' + message.number + '个' + message.gift_name;
				t.message_arr.push(message);
















				// switch (args.tag) {
				// 	case 'recvTextMsg': {
				// 		console.log('收到用户发送消息:', e.detail.detail);
				// 		if (e.detail.detail.nature == 1) {
				// 			var index = t.users.findIndex(i => i.userid == e.detail.detail.userid);
				// 			if (index == -1) {
				// 				t.users.push(e.detail.detail);
				// 			}
				// 			var str = e.detail.detail;
				// 			str.tapTime = new Date();
				// 			str.message = e.detail.detail.userName + " " + " 进入房间";
				// 			var animation = uni.createAnimation({
				// 				duration: 200,
				// 				timingFunction: 'linear'
				// 			});
				// 			animation.left(20).step({
				// 				duration: 200
				// 			});
				// 			str.animationData = animation;
				// 			t.join_arr.push(str);
				// 			console.log('t.join_arr', t.join_arr)
				// 			var animation_del = uni.createAnimation({
				// 				duration: 200,
				// 				timingFunction: 'linear'
				// 			});
				// 			animation_del.left(-300).step({
				// 				duration: 200
				// 			});
				// 			setTimeout(function() {
				// 				for (var i = 0; i < t.join_arr.length; i++) {
				// 					if (new Date() - t.join_arr[i].tapTime > 3000) {
				// 						t.join_arr[i].animationData = animation_del;
				// 						// if (new Date() - t.join_arr[i].tapTime > 5000){
				// 						// 	t.join_arr.splice(i,1);//释放内存
				// 						// }
				// 					}
				// 				}
				// 				console.log('t.join_arr', t.join_arr)
				// 				console.log('t.users', t.users)
				// 			}, 3000)
				// 		} else if (e.detail.detail.nature == 2) {
				// 			t.message_arr.push(e.detail.detail);
				// 		} else if (e.detail.detail.nature == 3) {
				// 			var message = e.detail.detail;
				// 			var nowTime = new Date();
				// 			var animation = uni.createAnimation({
				// 				duration: 200,
				// 				timingFunction: 'linear'
				// 			});
				// 			animation.left(20).step({
				// 				duration: 200
				// 			});
				// 			message.animationData = animation;
				// 			message.tapTime = nowTime; //加入计时器
				// 			t.giftobj.push(message);
				// 			console.log('t.giftobj', t.giftobj)
				// 			var animation_del = uni.createAnimation({
				// 				duration: 200,
				// 				timingFunction: 'linear'
				// 			});
				// 			animation_del.left(-300).step({
				// 				duration: 200
				// 			});
				// 			setTimeout(function() {
				// 				for (var i = 0; i < t.giftobj.length; i++) {
				// 					if (new Date() - t.giftobj[i].tapTime > 3000) {
				// 						t.giftobj[i].animationData = animation_del;
				// 						// if (new Date() - t.giftobj[i].tapTime > 5000){
				// 						// 	t.giftobj.splice(i,1);//释放内存
				// 						// }
				// 					}
				// 				}
				// 				console.log('t.giftobj', t.giftobj)
				// 			}, 3000)
				// 			message.message = message.userName + '送了' + message.number + '个' + message.gift_name;
				// 			t.message_arr.push(message);
				// 		} else if (e.detail.detail.nature == 4) {
				// 			e.detail.detail.message = e.detail.detail.userName + '关注了主播';
				// 			t.message_arr.push(e.detail.detail);
				// 		} else {
				// 			return;
				// 		}
				// 		console.log('t.message_arr', t.message_arr)
				// 		t.view_id = 'demo' + t.message_arr.length;
				// 		break;
				// 	}
				// 	default: {
				// 		console.log('onRoomEvent default: ', e)
				// 		break;
				// 	}
				// }
			},
			//关闭直播间
			outroom: function() {
				uni.showModal({
				  title: '提示', // 对话框标题
				  content: '是否确定退出直播间', // 对话框内容
				  showCancel: true, // 是否显示取消按钮，默认为 true
				  cancelText: '取消', // 取消按钮的文字，默认为 "取消"
				  cancelColor: '#000000', // 取消按钮的文本颜色，默认为 "#000000"
				  confirmText: '确定', // 确定按钮的文字，默认为 "确定"
				  confirmColor: '#3CC51F', // 确定按钮的文本颜色，默认为 "#3CC51F"
				  success(res) {
				    if (res.confirm) {
				    uni.redirectTo({
				    	url: '/pages/room/index'
				    })
				    } else if (res.cancel) {
				      console.log('用户点击了取消按钮')
				    }
				  }
				})
				
			},

			get_live_room() {

				liveDetail({
					app_name: 'shop',
					live_stream_id: this.room.live_stream_id,
				}).then(res => {

					if (res.code == 1) {
						this.roomDetail = res.data
						// console.log(res.data, '房间id 以及当前用户id')
						// console.log(this.room.app_user_id, uni.getStorageSync('user_id'), '房间id 以及当前用户id')
						if (res.data.app_user_id == uni.getStorageSync('Uid')) {
							this.isshow = true
						}
					}
					this.connectSocketInit()
				}).catch((err) => {})
			},
			togglePopup(type, open) {
				this.type = type
				if (open === 'tip') {
					this.show = true
				} else {
					this.$refs[open].open()
				}
			},
			cancel(type) {
				if (type === 'tip') {
					this.show = false
					return
				}
				// this.$refs[type].close()
			},
			change(e) {
				console.log('是否打开:' + e.show)
			},
			//充值
			rechargejb: function() {
				this.$refs['share'].close()
				const t = this;
				this.type = 'bottom'
				this.$refs['recharge'].open()

			},
			send_liwu: function() {
				const t = this;
				t.popup = 1;
				this.type = 'bottom'
				t.togglePopup('bottom', 'share');

				// this.$refs['recharge'].open()
			},
			send_shop: function() {
				const t = this;
				t.popup = 2;

				this.type = 'bottom'
				t.togglePopup('bottom', 'share');
			},
			send_lick: function() {
				this.sendGift()


			},

			//礼物弹窗
			show1() {
				this.isShow1 = !this.isShow1
				this.gift_num = ''
			},
			//礼物弹窗0
			copyData() {
				this.gifsobj.gift_num = this.gift_num
				this.bosendGift(this.gifsobj)
				this.show1()
			},
			//礼物弹窗1
			send_liwu_obj: function(gt) {
				console.log(this.gift_num)
				let gift = {
					'gift_id': gt.id,

				}
				this.isShow1 = true
				this.gifsobj = gift

			},
			//对话监听
			set_focus: function() {
				this.focus = !this.focus
			},

			//对话输入监听
			onKeyInput: function(event) {
				this.inputValue = event.detail.value

			},

			send_message: function() {
				const t = this;
				t.focus = false;

				if (t.to_userid == '') {
					uni.showToast({
						title: '内容不能为空',
						duration: 2000,
						icon: 'none'
					});
					return false;
				}

				let data = {
					live_stream_id: this.room.live_stream_id,
					app_name: 'shop',
					app_user_id: uni.getStorageSync('UID'),
					message: this.inputValue
				}

				sendGroupMessage(data).then(res => {
					console.log('发送的消息' + JSON.stringify(res))
					this.inputValue = ''
					if (res.code == 1) {
						console.log('发送的消息成功')
					}
				})
				// let message = {
				// 	userName: '大黄',
				// 	content: this.inputValue,
				// 	cmd: "say",
				// 	msg_type: "user"
				// };

				// /** 实际应用应发送到服务端，通过监听服务端传回的消息加入的msgList **/
				// if (this.msgList.length > 100) {
				// 	this.msgList.splice(0, 1);
				// 	this.msgList.push(message)
				// 	this.$refs.msgList.setMsgPanelScroll()
				// 	this.inputValue = ''
				// } else {
				// 	this.msgList.push(message)
				// 	this.$refs.msgList.setMsgPanelScroll()
				// 	this.inputValue = ''
				// }
				// console.log(this.msgList)

			},
		},
		// onBackPress() {
		// 	this.$refs['showpopup'].close()
		// 	this.$refs['showtip'].close()
		// 	this.$refs['showimage'].close()
		// 	this.$refs['showshare'].close()
		// }
	}
</script>

<style lang="scss" scoped>
	page {
		position: relative;


	}

	.container {
		width: 100%;
		/* 设置容器的宽度 */
	}

	.dobox {
		position: absolute;

		bottom: 0rpx;
		width: 750rpx;
		background-color: #F8F8F8;
	}

	.inpit-box {
		padding: 20upx 20rpx;
		width: 700rpx;
		flex-direction: row;
		justify-content: space-between;
		/* padding-top: 40upx; */
	}

	.inpit-box-bg {
		position: absolute;

		bottom: 0;
		height: 80rpx;
		width: 750rpx;
		background-color: #F8F8F8;
		z-index: 9999;
	}

	.inpit-box-body {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;

	}

	.uni-input {
		font-size: 32upx;
		height: 60upx;
		margin-top: 10upx;
		padding-left: 20rpx;
		color: #333333;
		background-color: #f8f8f8;
		flex: 1;
	}

	.send-but {
		width: 120upx;
		background-color: #0081FF;
		color: #FFFFFF;
		text-align: center;
		font-size: 28upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 60upx;
		margin-top: 10upx;
	}



	.function-box {
		width: 380rpx;
		flex-direction: row;
		justify-content: space-around;
		padding-left: 20upx;
	}

	.ico-box {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, .1);
		line-height: 77rpx;

	}

	.ico-box-img {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, .1);
		line-height: 77rpx;
	}

	.ico {

		font-size: 48upx;
	}

	.input-tpl {
		height: 70upx;
		width: 300upx;
		line-height: 70upx;
		text-align: left;
		background: rgba(0, 0, 0, 0.25);
		opacity: 1;
		border-radius: 39upx;
	}

	.input-tpls {
		height: 70upx;
		width: 300upx;
		line-height: 70upx;
		text-align: left;
		padding-left: 20rpx;
		font-size: 25upx;
		color: #FFFFFF;
		border-radius: 70upx;
	}

	.top-left {
		// height: auto;
		position: absolute;
		width: 40rpx;
		right: 20rpx;
		top: 230rpx;
		z-index: 99999;
	}

	.left-img {
		width: 40rpx;
		height: 40rpx;
	}



	.gifta {
		font-size: 23rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-bottom: 5rpx;
		text-align: center;
	}

	.giftb {

		font-size: 19rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
	}

	.nickname {
		font-size: 28upx;
		color: #22c8ef;
		/* font-weight: 800; */
		padding: 0 10upx;
		line-height: 40upx;
		padding-left: 4upx;
		font-weight: 800;
	}

	.message-scroll-box {
		line-height: 40upx;
		color: #f9f9f9;
		font-size: 28upx;
		white-space: pre-wrap;
		font-weight: 800;
	}

	.message-scroll-box-xi {
		line-height: 40upx;
		color: #f9f9f9;
		font-size: 28upx;
		white-space: pre-wrap;
	}

	.message-scroll-box-gift {
		color: #22c8ef;
		line-height: 40upx;
		font-size: 28upx;
		white-space: pre-wrap;
	}

	.user-lever {
		background-color: #ebc602;
		padding: 4upx 10upx;
		border-radius: 20upx;
		height: 20upx;
		line-height: 20upx;
		float: left;
		display: flex;
		overflow: hidden;
		margin-top: 10upx;
	}

	.msgview {
		position: fixed;
		width: 540rpx;
		height: 540rpx;
		left: 20rpx;
		bottom: 180rpx;
		overflow: hidden;
		border: none;

		z-index: 9;

	}

	.chat-area-line {
		width: 550upx;
		flex-direction: row;
		margin-bottom: 5upx;
	}

	.system-msg {
		width: 550upx;
		margin-bottom: 5upx;
	}

	.system-msg-detail {
		// max-width: 550upx;

		padding: 10upx;
		border-radius: 30upx;
		background-color: rgba($color: #000000, $alpha: 0.4);
		flex-direction: row;
		flex-wrap: wrap;
		margin-right: 14upx;

		>.system-msg-detail-username {
			color: red;
			font-size: 32upx;
			font-weight: 400;
			line-height: 40upx;

		}

		>.system-msg-detail-content {
			font-size: 32upx;
			font-weight: 400;
			line-height: 40upx;
			color: #A0CFFF;
		}
	}

	.user-line {
		// max-width: 530upx;
		padding: 10upx;
		color: #FFFFFF;
		flex-direction: row;
		border-radius: 30upx;
		background-color: rgba($color: #000000, $alpha: 0.4);
		margin-right: 14upx;
		font-size: 28upx;
		font-weight: 400;
		line-height: 40upx;
	}

	.user-msg {
		width: 530upx;


		margin-bottom: 5upx;
	}

	.user-msg-detail {
		padding: 10upx;
		border-radius: 30upx;
		background-color: rgba($color: #000000, $alpha: 0.4);
		flex-direction: row;
		flex-wrap: wrap;
		margin-right: 14upx;

		>.user-msg-detail-tag {
			color: #A0CFFF;
			background-color: #53C21D;
			width: 80upx;
			height: 40upx;
			border-radius: 20upx;
			font-size: 32upx;
			font-weight: 400;
			line-height: 40upx;
		}

		>.user-msg-detail-username {
			color: #A0CFFF;
			font-size: 32upx;
			font-weight: 400;
			line-height: 40upx;
		}

		>.user-msg-detail-content {
			font-size: 32upx;
			font-weight: 400;
			line-height: 40upx;
			color: #fff;
		}
	}

	.user-lever-ico-box {
		width: 100rpx;
		width: 15upx;
		height: 15upx;
		border-radius: 100%;
		background-color: #e0ad07;
		padding: 2upx;
		margin-right: 5upx;
	}

	.user-lever-ico {
		width: 15upx;
		height: 15upx;

		// margin: auto;
	}

	.user-lever-text {
		color: #FFFFFF;
		font-size: 22upx;
		height: 20upx;
		line-height: 20upx;
	}

	.uni-recharge {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		flex: 1;
		width: 750rpx;
		background: #FFFFFF;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;


	}

	.recharge-one {
		display: flex;
		justify-content: center; //弹性盒子对象在主轴上的对齐方式
		align-items: center;

	}

	.recharge_title {
		font-size: 33rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		text-align: center;
		margin-top: 32rpx;
		margin-bottom: 42rpx;
	}

	.recharge-one-img {
		width: 72rpx;
		height: 72rpx;


		vertical-align: middle;


	}

	.recharge-one-txt {
		font-size: 33rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		text-align: center;
		margin-top: 18rpx;
	}

	.recharge-con {
		padding: 0 32rpx;
	}

	.recharge-con-title {
		font-size: 33rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.recharge-con-detail {
		flex-direction: row;

		margin-top: 32rpx;
		margin-bottom: 200rpx;
	}

	.recharge-conbottom {

		width: 589rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		position: absolute;
		bottom: 30rpx;
		left: 50%;
		margin-left: -299.5rpx;
		background: #F84221;
		border-radius: 42rpx 42rpx;
		font-size: 33rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.con-detail {
		width: 217rpx;
		height: 159rpx;
		margin-right: 18rpx;

		border-radius: 21rpx 21rpx;
		background: #F4F4F4;
		text-align: center;
	}

	.carecharge {
		border-width: 1px;
		border-style: solid;
		border-color: #F84221;
	}

	.con-detaila {
		margin-top: 32rpx;
		margin-bottom: 17rpx;
		font-size: 37rpx;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}

	.con-detailb {

		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	/* 底部分享 */
	.uni-share {

		background-color: #fff;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
	}

	.uni-shop {

		background-color: #fff;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;

	}

	.shop {
		flex-direction: row;
		justify-content: space-between;
	}

	.shop-top {
		flex-direction: row;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
	}

	.shop-top-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.shop-close {
		margin: 20rpx 20rpx;
	}

	.shop-close-img {
		width: 60rpx;
		height: 60rpx;

	}

	.shop-top-txt {
		line-height: 80rpx;
		margin-left: 30rpx;
	}

	.uni-share-title {
		line-height: 60rpx;
		font-size: 24rpx;
		padding: 15rpx 0;
		text-align: center;
	}


	.uni-shop-content {
		/* #ifndef APP-NVUE */
		/* display: flex; */
		/* #endif */
		// width: 750rpx;

		// display: flex;

		flex-wrap: wrap;
		// justify-content: center;


		padding-left: 20rpx;
		padding-bottom: 20rpx;
		margin-top: 20rpx;



		/* padding-bottom: 0; */
	}

	.shop-content {
		width: 700rpx;
		// border-width: 1px;
		// border-style: solid;
		// border-color: red;
		flex-direction: row;
		margin-bottom: 20rpx;
	}

	.shop-content-img {
		width: 160rpx;
		height: 160rpx;
		// border-width: 1px;
		// border-style: solid;
		// border-color: red;
	}

	.shop-content-txt {
		margin-left: 20rpx;
		width: 500rpx;
		position: relative;
	}

	.sp-txta {
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.sp-txtb {
		position: absolute;
		bottom: 20rpx;
		width: 500rpx;

		flex-direction: row;
		justify-content: space-between;

		.txtba {
			color: red;
			flex-direction: row;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #F84221;
		}

		.txtba-a {
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #F84221;
			line-height: 60rpx;
		}

		.txtba-b {
			font-size: 33rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #F84221;
			line-height: 60rpx;
		}

		.txtba-c {
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			line-height: 60rpx;
			color: #F84221;
		}

		.txtbb {
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: red;
			border-radius: 0px 11rpx 11rpx 0px;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.uni-share-content {
		/* #ifndef APP-NVUE */
		/* display: flex; */
		/* #endif */
		// width: 750rpx;

		// display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		// justify-content: center;
		padding: 15px 28rpx;


		/* padding-bottom: 0; */
	}

	.content-image {
		width: 60rpx;
		height: 60rpx;
	}

	.uni-share-content-text {
		font-size: 26rpx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}

	.uni-share-btn {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 14px;
		border-top-color: #f5f5f5;
		border-top-width: 1px;
		border-top-style: solid;
		text-align: center;
		color: #666;
	}

	.gift-botton-view {
		line-height: 90rpx;
		height: 90rpx;
		font-size: 14px;
		border-top-color: #5c1398;
		border-top-width: 1px;
		border-top-style: solid;
		text-align: center;


	}

	.gift-jb-con {
		width: 221rpx;
		height: 43rpx;
		background: rgba(0, 0, 0, 0.25);
		border-radius: 39rpx 39rpx;
		flex-direction: row;
	}

	.gift-web-je {
		font-size: 23rpx;
		line-height: 43rpx;
		font-weight: normal;
		color: #FFFFFF;
	}

	.gift-jb-img {
		width: 33rpx;
		height: 33rpx;
		margin-top: 3rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.gift-web-cz {
		font-size: 25rpx;
		color: #fff;
		text-align: center;
	}

	/* 礼物 */
	.lw-box {
		width: 168rpx;
		height: 224rpx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 21rpx 21rpx;
		margin-bottom: 30upx;
		position: relative;
	}

	.hovered {
		border: 2rpx solid #707070;
	}

	.send-m {
		width: 168rpx;
		height: 49rpx;
		line-height: 49rpx;
		text-align: center;
		position: absolute;
		background: #F84221;
		bottom: 0;
		border-radius: 0 0 21rpx 21rpx;
		font-size: 23rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.lw-ico {
		width: 100rpx;
		height: 100rpx;
		margin-left: 35rpx;
		margin-top: 20rpx;
		margin-bottom: 10rpx;



	}

	.lw-name {
		font-size: 23rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.lw-money {
		flex-direction: row;

	}

	.lw-moneya {
		font-size: 23rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		margin-top: 5rpx;
	}

	.lw-money-img {
		width: 28rpx;
		height: 28rpx;
		margin-left: 38rpx;
		margin-right: 5rpx;
	}

	.send-boj {
		// display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 20upx 30upx;
		// border-bottom: 2upx solid #5c1398;
	}

	.send-boj-txt {
		flex: 1;

		padding-right: 40rpx;

		flex-direction: row;
		justify-content: space-between;
	}

	.send-boj-txta {
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.send-boj-close {
		width: 30rpx;
		height: 30rpx;
	}

	.send-boj-close-img {
		width: 30rpx;
		height: 30rpx;
	}

	.gift-alert {
		width: 430rpx;
		flex-direction: row;
		justify-content: space-between;
		// background-color: green;
		// animation: slideRight 1s linear forwards;
	}

	.gift-alerta {
		width: 359rpx;
		height: 70rpx;
		background: rgba(0, 0, 0, 0.25);
		border-radius: 39rpx 39rpx;
		flex-direction: row;
		justify-content: space-between;

	}

	.gift-alertb {
		flex-direction: row;
		height: 72rpx;
		line-height: 72rpx;
	}

	.gift-alertb-img {
		width: 44rpx;
		height: 72rpx;
	}

	.gift-alertb-txt {
		font-size: 45rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #FFFFFF;

	}

	@keyframes slideRight {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(100%);
		}
	}

	.join-box {
		position: fixed;
		left: -500upx;
		bottom: 350upx;
		border-radius: 70upx;
		display: flex;
		padding: 10upx 30upx;
		z-index: 9999;
		background-color: #ef7526;
	}

	.join-box-text {
		color: #F9F9F9;
		line-height: 40upx;
		font-size: 32upx;
		white-space: pre-wrap;
	}

	.gift-ico {
		width: 60upx;
		height: 60upx;
		margin-top: 10rpx;

	}

	.gift-ico-img {
		width: 60upx;
		height: 60upx;

	}

	.send-boj-user-header {
		width: 63upx;
		height: 63upx;
		border-radius: 50%;
		margin-top: 0rpx;
		margin-left: -7rpx;

	}

	.send-boj-user-header-img {
		width: 63upx;
		height: 63upx;
		border-radius: 50%;


	}

	.top-do-box {
		width: 750rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		margin-top: 60rpx;
	}

	.room-info {
		width: 350rpx;
		display: flex;
		flex-direction: row;
		height: 80upx;
		background-color: rgba(0, 0, 0, .2);

		border-radius: 90upx;

	}

	.room-logo-box {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;

	}


	.room-info-message {
		margin-left: 10rpx;
	}

	.room-user-name {
		width: 150rpx;

		font-size: 25upx;
		color: #fff;
		margin-top: 10rpx;

	}

	.room-user-money {
		font-size: 28upx;
		font-size: 25upx;
		color: #fff;
		margin-top: 5rpx;
	}


	.room-xin-box {
		height: 30upx;
		line-height: 30upx;
		font-size: 20upx;
		color: #FFFFFF;
		border-radius: 30upx;
		background-color: #f4305e;
		margin-top: 10upx;
		padding: 0 10upx;
		margin-right: 4upx;
	}

	.room-money {
		height: 30upx;
		line-height: 30upx;
		font-size: 20upx;
		color: #FFFFFF;
		border-radius: 30upx;
		white-space: nowrap;
		overflow: hidden;
		margin-top: 10upx;
	}

	.room-guanzhu {
		width: 105upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: #f4305e;
		background-color: #FFFFFF;
		border-radius: 50upx;
		margin-top: 10rpx;

	}

	.guanzhu {
		width: 105upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		font-size: 25rpx;
		color: #f4305e;
		background-color: #FFFFFF;
		border-radius: 50upx;

	}

.room-users-box {
		width: 200rpx;
		height: 70upx;

		display: flex;
		margin-top: 10rpx;

	}

	.right_top_scroll {
		overflow: hidden;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 200rpx;
		height: 75upx;

	}



	.top-scroll-users-header {
		width: 63upx;
		height: 63upx;
		border-radius: 50%;
		margin-right: 10upx;
		overflow: hidden;
	
	}

	// .top-scroll-users-header image {
	// 	width: 100%;
	// 	height: 100%;
	// }

	.users-count {
		display: flex;
		flex-direction: row;
		color: #FFFFFF;
		font-size: 28upx;
	}

	.users-count-text {
		margin-top: 10rpx;
		width: 70upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		border-radius: 60upx;
		background-color: rgba(0, 0, 0, .2);
		margin-right: 30rpx;
	}

	.users-count-img {
		width: 40rpx;
		height: 40rpx;
		margin-top: 20rpx;
		margin-right: 20rpx;
	}
</style>