<template>
	<view class="whole">
		<view id="video-content-box" preload="auto" playsinline webkit-playsinline>
			<!-- <video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
			</video> -->
		</view>
		
		<view class="topBox">
			<view class="flex1">
				<view class="backBox flex2">
					<view class="back flex1" @click="toBack('back')"><up-icon name="arrow-left" size="18" color="#333" /></view>
					<zb-popover placement="bottom-start" :options="actions" @select="selectPop">
						<view class="home"><up-icon name="list-dot" size="20" color="#333" /></view>
					</zb-popover>
				</view>
				
				<view class="cover">
					<up-avatar :src="liveInfo.cover_img" size="22"></up-avatar>
					<span>&nbsp;&nbsp;{{liveInfo.name}}</span>
				</view>
			</view>
			
			
			<view class="rank" @click="openRank">
				<image style="width: 22px;height: 22px;" src="/static/image/rank.png" mode="aspectFit"></image>
				<span>&nbsp;&nbsp;邀请排行榜</span>
			</view>
		</view>
		
		<view class="stbox" v-if="liveInfo.time_status == 1">
			<video v-if="liveInfo.warm_img.indexOf('.mp4') >= 0" :src="liveInfo.warm_img" class="img" :autoplay="true" :muted="true" :loop="true" :controls="false" object-fit="fill"></video>
		    <img class="img" :src="liveInfo.warm_img" />
			
		    <view class="box">
		        <up-avatar size="100" :src="liveInfo.cover_img" />
		        <view class="tit">{{ liveInfo.name }}</view>
		        <view class="time">{{ parseTime(liveInfo.live_start_time) }}直播</view>
		        <!-- <up-button plain round @click="toOther">看看其他直播吧</up-button> -->
		    </view>
		</view>
		
		<view class="stbox" v-if="liveInfo.time_status == 2 && !isPlay">
		    <video v-if="liveInfo.warm_img.indexOf('.mp4') >= 0" :src="liveInfo.warm_img" class="img" :autoplay="true" :muted="true" :loop="true" :controls="false" object-fit="fill"></video>
		    <img class="img" :src="liveInfo.warm_img" />
			
		    <view class="box">
				<image style="width: 80px;height: 80px;" src="/static/image/wait.png" mode="aspectFit"></image>
		        <view class="text">主播暂时离开，马上回来...</view>
		    </view>
		</view>
		
		<view class="stbox" v-else-if="liveInfo.time_status == 3">
		    <video v-if="liveInfo.warm_img.indexOf('.mp4') >= 0" :src="liveInfo.warm_img" class="img" :autoplay="true" :muted="true" :loop="true" :controls="false" object-fit="fill"></video>
		    <img class="img" :src="liveInfo.warm_img" />
			
		    <view class="box">
		        <up-avatar size="100" :src="liveInfo.cover_img" />
		        <view class="tit">直播已结束</view>
		        <!-- <up-button plain round @click="toOther">看看其他直播吧</up-button> -->
		    </view>
		</view>
		
		<view :class="showGood ? 'fadeIn' : 'fadeOut'" class="spBox" @click="toGroup">
			<view class="face_img">
				<img :src="curGroup.face_img" class="img" />
				<view class="close" @click.stop="showGood = false">
					<up-icon name="close" size="12" color="#fff"></up-icon>
				</view>
			</view>
			<view class="tit">{{curGroup.title}}</view>
			<view class="price">
				<view class="icon">￥</view>
				<text v-if="curGroup.max_price === curGroup.min_price">{{curGroup.min_price}}</text>
				<text v-else>{{curGroup.min_price * 1}}~{{curGroup.max_price * 1}}</text>
			</view>
			<view class="btn flex1" @click.stop="toPay(curGroup.id)">立即购买</view>
		</view>
		
		<view class="msgBox" id="msgBox">
			<view class="scrollBox" id="scrollBox">
				<view class="row" v-for="(it, i) in messageList" :key="i" :id="'item' + i">
					<text v-if="it.name">{{it.name}}</text>{{it.text}}
				</view>
			</view>
		</view>
		
		<view class="btmBox flex2">
			<view class="inpBox">
				<input v-model="keyValue" id="sendInput" :focus="sendFocus" type="text" class="inpt" placeholder="说点什么..." @confirm="sendBarrage" confirm-type="send" />
				<view class="more flex1" @click="showMore = true">
					<text class="iconfont icon-more"></text>
				</view>
			</view>
			<view class="iconBox flex2">
				<view class="icon flex1" @click="showGroups = true">
					<image class="img" src="/static/image/cart.png" mode="aspectFit"></image>
				</view>
				<view class="icon flex1" v-if="userId == 7280430 || userId == 7438380 || userId == 7280144 || userId == 242927" @click="showError = true">
					<image class="img" src="/static/image/zan.png" mode="aspectFit"></image>
				</view>
				<view class="icon flex1" @click="toShare">
					<image class="img" src="/static/image/share.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		<up-popup :show="showRank" :round="10" mode="bottom" @close="showRank = false" closeable>
			<view class="topTitle">邀请榜单</view>
			<view class="listbox">
				<view class="rankbox">
					<view v-if="rankloading" class="loadbox">
						<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
					</view>
					<view class="row flex2" v-for="(item, index) in rankList" :key="item.id">
						<view class="box" v-if="item.user">
							<view class="sort flex1" :class="'sort' + index">{{index + 1}}</view>
							<up-avatar shape="square" size="30" :src="item.user.avatar" />
							<text>&nbsp;{{item.user.nickname}}</text>
						</view>
						<view class="num">{{item.invite_count}}位</view>
					</view>
					<view v-if="rankList.length === 0 && !rankloading">
						<up-empty mode="list" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/data.png" text="暂无数据"></up-empty>
					</view>
				</view>
			</view>
			<view class="topname" @click="showInvite = true">
				<up-avatar size="25" :src="myAvatar" />
				<view class="box">
					<view class="name">{{nickname}}</view>
					<view class="desc">已邀请{{inviteList.length}}人</view>
				</view>
			</view>
		</up-popup>
		
		<up-popup :show="showInvite" :round="10" mode="bottom" @close="showInvite = false" closeable>
			<view class="topTitle">我的邀请</view>
			<view class="listbox">
				<up-list height="100%">
					<up-list-item v-for="(item, index) in inviteList" :key="index">
						<up-cell v-if="item.invitee_user" :title="item.invitee_user.nickname">
							<template #icon>
								<up-avatar shape="square" size="30" :src="item.invitee_user.avatar" customStyle="margin: -3px 5px -3px 0"></up-avatar>
							</template>
						</up-cell>
					</up-list-item>
				</up-list>
			</view>
		</up-popup>
		
		<up-popup :show="showCoupon" :round="10" mode="bottom" @close="showCoupon = false" closeable>
			<view class="topTitle">我的优惠券</view>
			<view class="listbox">
				<view class="couponbox" v-if="myCoupon.length !== 0">
					<view class="coupon-box" v-for="(item, index) in myCoupon" :key="index">
						<view class="oneBox">
							<view class="coupon-left" :class="item.status == 1 ? 'textColor1' : 'textColor2'">
								<text class="sign">￥<text class="money">{{item.amount}}</text></text>
								<view class="title" v-if="item.full_amount * 100 > 0">满{{item.full_amount}}元可用</view>
								<view class="title" v-else-if="item.type == 51">抵扣金额</view>
								<view class="title" v-else>无门槛</view>
								<view class="vipTag" v-if="item.type == 12">会员优惠券</view>
							</view>
							<view class="coupon-right">
								<view class="birth" v-if="item.source_type == 'birth'">生日优惠券</view>
								<view v-if="item.use_type == 20 || item.use_type === 31" class="text chang" :class="item.status == 1 ? 'textColor' : 'textColor2'">仅该团购可用：{{item.extend.title}}</view>
								<view v-else-if="item.use_type == 21 && item.type === 50" class="text" :class="item.status == 1 ? 'textColor' : 'textColor2'">
									{{item.extend && item.extend.title || '积分商品可用'}}
									<view class="red_label">
										<view class="red_col red_col1">积分实物兑换</view>
										<view class="red_col red_col2">抵扣券</view>
									</view>
								</view>
								<view v-else-if="item.type === 51" class="text" :class="item.status == 1 ? 'textColor' : 'textColor2'">
									{{item.extend && item.extend.title || '实物商品可用'}}
									<view class="red_label">
										<view class="red_col red_col1">实物商品兑换</view>
										<view class="red_col red_col2">抵扣券</view>
									</view>
								</view>
								<view v-else-if="item.use_type === 40 || item.use_type === 41" class="text" :class="item.status == 1 ? 'textColor' : 'textColor2'">
									<text>指定团购分类可用</text>
								</view>
								<view v-else class="text" :class="item.status == 1 ? 'textColor' : 'textColor2'">
									<text v-if="Number(item.amount) < 3">全场通用</text>
									<text v-else>部分团可用</text>
								</view>
								<view v-if="item.shop_groups && (item.use_type === 40 || item.use_type === 41)">
									<view class="solid" :class="item.status == 1 ? 'red' : ''" v-for="it in item.shop_groups" :key="it.id">{{it.name}}</view>
								</view>
								<text class="time">{{item.finish_time.substring(0, 16)}}前有效</text>
								<view class="tips">福利款、活动产品、跨境产品不能使用且不能叠加</view>
							</view>
						</view>
						
						<view v-if="item.status == 2" class="cannot one" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
						<view v-if="item.status == 3" class="cannot two" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
						<view v-if="item.status == 4" class="cannot three"></view>
						
						<view class="tag" v-if="item.is_transfer">
							<up-tag size="mini" type="warning" text="好友赠送"></up-tag>
						</view>
						
						<view class="twoBox" v-if="item.status == 1">
							<view class="coupon-btn" @click="gotoHome(item)">立即使用</view>
						</view>
					</view>
					<view style="height: 1px;"></view>
				</view>
				<template v-if="!couponloading && !myCoupon.length">
					<up-empty mode="coupon" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/coupon.png" text="暂无优惠券"></up-empty>
				</template>
				<view v-if="couponloading" class="loadbox">
					<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
				</view>
			</view>
		</up-popup>
		
		<up-popup :show="showMore" :round="10" mode="bottom" @close="showMore = false" closeable>
			<view class="topTitle">更多</view>
			<view class="morebox">
				<view class="row flex1" v-for="it in moreList" :key="it.id" @click="handleMore(it.id)">
					<view class="icon"><up-icon :name="it.icon" size="28" :color="Color"></up-icon></view>
					<text>{{it.name}}</text>
				</view>
			</view>
		</up-popup>
		
		<up-popup :show="showGroups" :round="10" mode="bottom" @close="showGroups = false" closeable :z-index="190">
			<view class="topTitle flex2">
				<text>团购列表</text>
				<view class="iconBox">
					<view class="icon" @click="handleMore(3)"><up-icon name="shopping-cart-fill" size="20" color="#555"></up-icon>购物车</view>
					<view class="icon" @click="handleMore(2)"><up-icon name="file-text-fill" size="20" color="#555"></up-icon>订单</view>
				</view>
			</view>
			<view class="listbox">
				<view class="groupBox">
					<view class="item" v-for="(item, index) in groupsList" :key="item.id" @click="toGoods(item.id)">
						<view class="faceImg">
							<image :src="item.face_img" mode="aspectFill" class="image"></image>
							<view class="out" v-if="item.sold_status === 2">
								<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/01/16/Cr6cRRhhqYNhScigxIyumyV9hXXMI3vKvsE1jgt0.png" class="out_img" />
							</view>
							<view class="out" v-else-if="item.sold_status === 0">
								<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/QBhUheeYWSJ3OGM27fkAufJAlFSA8GBhWjpY5oNy.png" class="out_img" />
							</view>
							<view class="out" v-else-if="item.total_stock === 0">
								<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/pMTv6QiZZEpSqkJmk7hMcbEzIuNzMyp7YVBbe42H.png" class="out_img" />
							</view>
							<view class="zhibo" v-if="item.id == curGroup.id">
								<text class="iconfont icon-zhibozhong"></text>
								<text>&nbsp;讲解中</text>
							</view>
						</view>
						<view class="info">
							<view class="box">
								<view class="name">{{item.title}}</view>
								<view class="desc">{{item.characteristic}}</view>
							</view>
							
							<view class="price flex2">
								<view>
									<text v-if="parseFloat(item.min_price) == parseFloat(item.max_price)">￥{{item.min_price}}</text>
									<text v-else>￥{{item.min_price * 1}}~{{item.max_price}}</text>
								</view>
								
								<view class="cart flex1" @click.stop="toPay(item.id)">
									<up-icon name="shopping-cart" color="#fff" size="20" />
								</view>
							</view>
						</view>
					</view>
					<template v-if="!groupsList.length">
						<up-empty mode="coupon" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/data.png" text="暂无团购"></up-empty>
					</template>
				</view>
			</view>
		</up-popup>
		
		
		<view v-if="showCouGift" class="dialogbox">
			<view class="rect">
				<image class="img" src="/static/image/dialog.png" mode="widthFix"></image>
				<view class="box">
					<view class="coupon">
						<view class="left">
							<view class="sign"><text>￥</text>{{curCoupon.amount}}</view>
							<view class="title" v-if="curCoupon.use_type === 30 || curCoupon.use_type === 31">满{{curCoupon.full_amount}}元可用</view>
							<view class="title" v-else>无门槛</view>
						</view>
						<view class="right">
							<text v-if="curCoupon.use_type == 20 || curCoupon.use_type === 31">指定团购可用</text>
							<text v-if="curCoupon.use_type == 40 || curCoupon.use_type === 41">指定团购分类可用</text>
							<text v-else>全场通用</text>
						</view>
					</view>
					<!-- <view class="desc">小象八宝粥团购可用</view> -->
					<view class="btn flex1" @click="receiveCoupon">立即领取({{timeNum}})</view>
				</view>
				<view class="close" @click="closeCoupon">
					<up-icon name="close-circle" color="#fff" size="26" />
				</view>
			</view>
		</view>
		
		<!-- 客服 -->
		<call-center :show="showService" @close="showService = false" :type="1" />
		
		<!-- 客服 -->
		<live-share :show="showShare" @close="showShare = false" :id="liveId" :userId="userId" :info="liveInfo"></live-share>
		
		<!-- 商品详情 -->
		<group-detail :show="showDetail" :id="groupId" @close="showDetail = false" :live_id="liveId" :streamer_id="streamerId" @back="showlivePay = true"></group-detail>
		
		<direct-pay
			:show="showMorePay"
			@close="showMorePay = false"
			:sourceId="source_id"
			:sourceType="source_type"
			:show_stock="show_stock"
			:groupId="groupId"
			:skus_1="skus_1"
			:goodId="goodId"
			:live_id="liveId"
			:streamer_id="streamerId">
		</direct-pay>
		
		<view class="bagBox" @click="openBless()" v-if="showBag">
			<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/08/07/0wBdpTq2EEgLUZskqv0VPhIcJZJqxPPFffPGpMJ6.png" mode="aspectFill"></image>
			<view class="box">
				<up-count-down :time="downTime" format="mm:ss" />
			</view>
		</view>
		
		<!-- 福袋 -->
		<up-popup :show="showBless" :round="10" mode="bottom" @close="showBless = false" closeable>
			<view class="bleBox">
				<view class="title"><up-count-down :time="downTime" format="mm:ss后开奖" /></view>
				<view class="tit">{{blessInfo.name}}</view>
				<view class="text">{{blessInfo.num}}个名额</view>
				<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/08/06/VeQDyrVh1hWLad6vISAzz1qWwz7Aqitc6P1oumcY.png" mode="aspectFill"></image>
				<view class="txt" v-if="blessInfo.myLotteryLog">已参与</view>
				<view class="txt" v-else>
					<text v-if="blessInfo.config && blessInfo.config.conditionType == 2">输入指定评论参与抽奖：{{blessInfo.config.conditionData.join('|')}}</text>
					<text v-else>输入任意评价参与抽奖</text>
				</view>
				<view class="btn flex1 hui" v-if="blessInfo.myLotteryLog">参与成功，等待主播开奖</view>
				<view class="btn flex1" v-else @touchend.prevent="toComment"><up-icon name="edit-pen" color="#fff" size="28"></up-icon>发表评论后参与</view>
				
			</view>
		</up-popup>
		
		<!-- 福袋中奖 -->
		<up-popup :show="showLottery" :round="10" mode="bottom" @close="showLottery = false" closeable>
			<view class="lotBox">
				<image class="img" src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/08/07/4F9fwjpL74jHcdFBE1jGJerkszR7VZyz8Q2sjJw0.png" mode="widthFix"></image>
				<view class="title">恭喜中奖</view>
				<view class="box flex1">
					<view class="score" v-if="lottery.reward_type == 4">{{lottery.type_value}}<text>积分</text></view>
					
					<view class="BBox" v-else-if="lottery.reward_type == 3">
						<view class="itm">
							<image :src="lottery.extend.face_img" mode="aspectFill"></image>
							<view class="tit">{{lottery.extend.title}}</view>
						</view>
						<view class="dec">超高折扣商品</view>
					</view>
					
					<view class="couBox" v-else-if="lottery.reward_type == 2">
						<view class="itm">
							<view class="sign flex">
								<view class="num">￥<text class="money">{{lottery.amount * 1}}</text></view>
								<text v-if="lottery.full_amount * 1 > 0">满{{lottery.full_amount * 1}}可用</text>
								<text v-else>无门槛</text>
							</view>
							<view class="mid">
								<view v-if="(lottery.use_type == 20 || lottery.use_type === 31) && lottery.extend" class="text">指定团购可用：{{lottery.extend.title}}</view>
								<view v-else-if="lottery.use_type === 40 || lottery.use_type === 41" class="text">指定团购分类可用</view>
								<view v-else class="text">
									<text v-if="Number(lottery.amount) < 3">全场通用</text>
									<text v-else>部分团可用</text>
								</view>
								<view v-if="lottery.shop_groups && (lottery.use_type === 40 || lottery.use_type === 41)">
									<view class="solid red" v-for="it in lottery.shop_groups" :key="it.id">{{it.name}}</view>
								</view>
								
								<text class="time" v-if="lottery.finish_time">{{lottery.finish_time.substring(0, 16)}}前有效</text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="btn flex1" v-if="lottery.reward_type == 4">已发放至您账户<br />可在“我的-积分"查看</view>
				<view class="btn flex1" v-else>已发放至您账户<br />可在“我的-优惠券"查看</view>
				<view class="desc" @click="viewLotteryLogs">查看中奖记录 ></view>
			</view>
		</up-popup>
		
		<up-popup :show="showFail" :round="10" mode="bottom" @close="showFail = false" closeable>
			<view class="failBox">
				<image class="img" src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/08/07/4F9fwjpL74jHcdFBE1jGJerkszR7VZyz8Q2sjJw0.png" mode="widthFix"></image>
				<view class="title">很遗憾未中奖</view>
				
				<view class="btn flex1">下次再来</view>
				<view class="desc" @click="viewLotteryLogs">查看中奖记录 ></view>
			</view>
		</up-popup>
		
		<up-popup :show="showPlayer" :round="10" mode="bottom">
			<view class="playBox">
				<view class="title">
					<view class="close flex1" @click="showPlayer = false"><up-icon name="arrow-left" color="#953315" size="20" /></view>
					<text>{{lotteryLogs.length}}人中奖</text>
				</view>
				<view class="box">
					<view class="row flex2" v-for="it in lotteryLogs" :key="it.id">
						<view class="name" v-if="it.user">
							<image class="img" :src="it.user.avatar" mode="aspectFill"></image>
							<text>&nbsp;{{it.user.nickname}}</text>
						</view>
						<view v-if="it.reward_type == 2">
							<text v-if="it.user_coupon.full_amount * 100 > 0">满{{it.user_coupon.full_amount * 1}}减{{it.user_coupon.amount * 1}}优惠券</text>
							<text v-else>{{it.user_coupon.amount}}元无门槛优惠券</text>
						</view>
						<view v-else-if="it.reward_type == 3">实物商品抵扣券</view>
						<view v-else-if="it.reward_type == 4">{{it.prize.type_value}}积分</view>
					</view>
				</view>
			</view>
		</up-popup>
		
		<up-popup :show="showMyPrize" :round="10" mode="bottom" @close="showMyPrize = false" closeable>
			<view class="playBox">
				<view class="topTitle">我的奖励</view>
				<view class="box">
					<view class="row flex2" v-for="it in lotteryLogs" :key="it.id">
						<view class="name" v-if="it.user">
							<image class="img" :src="it.user.avatar" mode="aspectFill"></image>
							<view style="padding-left: 3px;text-align: left;">
								<text>{{it.user.nickname}}</text>
								<view v-if="(it.reward_type == 2 || it.reward_type == 3) && it.user_coupon && it.user_coupon.status != 1">
									<text class="minitag">{{Status[it.user_coupon.status]}}</text>
								</view>
							</view>
						</view>
						<view class="right" @click="toCoupon(it)">
							<view v-if="it.reward_type == 2">
								<view style="display: flex;align-items: center;justify-content: flex-end;">
									<text class="iconfont icon-youhuiquan"></text>
									<view v-if="it.user_coupon.use_type == 20 || it.user_coupon.use_type === 31" class="text">仅该团购可用：{{it.user_coupon.extend.title}}</view>
									<view v-else-if="it.user_coupon.type === 51" class="text">
										{{it.user_coupon.extend && it.user_coupon.extend.title || '实物商品可用'}}
										<view class="red_label">
											<view class="red_col red_col1">实物商品兑换</view>
											<view class="red_col red_col2">抵扣券</view>
										</view>
									</view>
									<view v-else-if="it.user_coupon.use_type === 40 || it.user_coupon.use_type === 41" class="text">
										<text>指定团购分类可用</text>
									</view>
									<view v-else class="text">
										<text v-if="Number(it.user_coupon.amount) < 3">全场通用券</text>
										<text v-else>部分团可用</text>
									</view>
									<view v-if="it.user_coupon.shop_groups && (it.user_coupon.use_type === 40 || it.user_coupon.use_type === 41)">
										<view class="solid red" v-for="itm in it.user_coupon.shop_groups" :key="itm.user_coupon.id">{{itm.name}}</view>
									</view>
								</view>
							</view>
							
							<view v-else-if="it.reward_type == 3"><text class="iconfont icon-youhuiquan"></text>实物商品抵扣券</view>
							<view v-else-if="it.reward_type == 4">{{it.prize.type_value}}积分</view>
							<view class="time">{{it.created_at}}</view>
						</view>
						<view v-if="(it.reward_type == 2 || it.reward_type == 3) && it.user_coupon && it.user_coupon.status == 1">
							<up-icon name="arrow-right" size="16" color="#888" />
						</view>
					</view>
					<up-empty v-if="!lotteryLogs.length" mode="data" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/data.png" text="暂无数据"></up-empty>
				</view>
			</view>
		</up-popup>
		
		<up-popup :show="showError" :round="10" mode="bottom" @close="showError = false" closeable>
			<view style="height: 70vh;background-color: #fff;overflow: auto;">
				<view v-for="(it, i) in errorList" :key="i">{{it.text}}</view>
				<up-button @click="errorList = []">清空</up-button>
			</view>
		</up-popup>
		
		<!-- 订单支付页 -->
		<up-popup :show="showlivePay" :round="10" mode="bottom" @close="showlivePay = false" closeable>
			<view style="padding: 24rpx 0;text-align: center;">订单支付</view>
			<view style="height: 70vh;background-color: #f5f5f5;overflow: auto;">
				<live-pay :show="showlivePay" :live_id="liveId" :streamer_id="streamerId" :address="addr"></live-pay>
			</view>
		</up-popup>
	</view>
	
</template>

<script>
	import { reactive, toRefs, watch, ref, nextTick } from 'vue'
	import { get, post } from '@/api/request.js'
	// import TCPlayer from 'tcplayer.js';
	// import 'tcplayer.js/dist/tcplayer.min.css';
	import TencentCloudChat from '@tencentcloud/chat'
	import TIMUploadPlugin from 'tim-upload-plugin'
	import wx from 'weixin-js-sdk'
	import { showToast, judgeShop, userBind } from '@/components/common.js'
	import callCenter from '@/components/callCenter/index.vue'
	import zbPopover from '@/components/Popover/index.vue'
	import liveShare from '@/components/live/share.vue'
	import groupDetail from '@/components/groups/detail.vue'
	import directPay from '@/components/sku/directPay.vue'
	import dayjs from 'dayjs'
	import { sp2 } from '@/components/img.js'
	import livePay from '../pay/index.vue'
	
	export default {
		components: {
			callCenter, zbPopover, liveShare, groupDetail, directPay, livePay
		},
		setup() {
			const data = reactive({
				sp2: sp2,
				liveId: 0,
				Color: uni.getStorageSync('theme_color'),
				player: null,
				liveInfo: {},
				curGroup: {},
				showGood: false,
				keyValue: '',
				sendFocus: false,
				userId: 0,
				userSign: '',
				chat: null,
				messageList: [],
				showRank: false,
				rankList: [],
				rankloading: [],
				inviteList: [],
				showInvite: false,
				myAvatar: uni.getStorageSync('avatar'),
				nickname: uni.getStorageSync('nickname'),
				showCoupon: false,
				myCoupon: [],
				couponloading: false,
				shop_id: uni.getStorageSync('shop_id'),
				groupsMark: {},
				groupsList: [],
				couponMark: {},
				couponList: [],
				showMore: false,
				moreList: [
					{ id: 1, name: '优惠券', icon: 'red-packet-fill' },
					{ id: 2, name: '订单', icon: 'file-text-fill' },
					{ id: 3, name: '购物车', icon: 'shopping-cart-fill' },
					{ id: 4, name: '奖励', icon: 'gift-fill' },
					{ id: 5, name: '投诉', icon: 'info-circle-fill' }
				],
				actions: [
					{ id: 0, text: '首页', icon: 'home-fill' },
					{ id: 1, text: '联系团长', icon: 'chat-fill' },
					{ id: 2, text: '搜索团购', icon: 'bag-fill' },
					{ id: 3, text: '收藏与浏览', icon: 'heart-fill' },
					{ id: 4, text: '购物车', icon: 'shopping-cart-fill' }
				],
				Status: {
					'2': '已使用',
					'3': '已过期',
					'4': '已失效',
					'5': '已转赠'
				},
				isPlay: false,
				showGroups: false,
				streamerId: '',
				intoView: '',
				showCouGift: false,
				timeInterval: null,
				curCoupon: {},
				timeNum: 10,
				showService: false,
				showShare: false,
				groupId: 0,
				showDetail: false,
				show_stock: 0,
				source_id: 0,
				source_type: 'normal',
				showMorePay: false,
				goodId: 0,
				downTime: 60000,
				showBless: false,
				showLottery: false,
				showPlayer: false,
				blessId: 0,
				blessInfo: {},
				showBag: false,
				showFail: false,
				lottery: {},
				lotteryLogs: [],
				showMyPrize: false,
				showError: false,
				errorList: [],
				is_paused: false,
				showlivePay: false,
				addr: {}
			})
			
			function creatVideoDom() {
				const video = document.createElement("video")
				video.setAttribute("id", "player-container-id");
				video.setAttribute("style", "height: 100vh;width: 100%;");
				video.setAttribute('playsinline', true);
				video.setAttribute('webkit-playsinline', true) // video的属性
				// video.setAttribute("preload", "auto");
				// video.setAttribute("x5-video-player-type", "h5");
				// video.setAttribute("x5-video-player-fullscreen", true);
				// video.setAttribute("show-center-play-btn", false);
				// video.setAttribute("x5-playsinline", '');
				// video.setAttribute("x5-video-orientation", 'portrait');
				document.getElementById("video-content-box").appendChild(video);
			}
			
			async function getLiveInfo(from) {
				data.errorList.push({text: 'getLiveInfo:-----' + from})
				await get('/api/v1/live/customer/liveDetail/' + data.liveId).then(async(res) => {
					data.liveInfo = res
					data.isPlay = false
					// time_status 1 未开始 2进行中 3已结束
					if(res.time_status == 2) {
						for (let index = 0; index < res.streamers.length; index++) {
							let item = res.streamers[index]
							if(item.pivot.live_status == 1) {
								data.isPlay = true
								data.streamerId = item.id
								getPullUrl('getLiveInfo')
								break
							}
						}
					}
					
					uni.setNavigationBarTitle({
						title: res.name
					})
					
					data.show_stock = res.shop.show_stock
					
					// 直播团购
					if(res.shop_group_goods && res.shop_group_goods.length) {
						data.groupsList = []
						data.curGroup = {}
						res.shop_group_goods.forEach((it, i) => {
							data.groupsMark[it.id] = i
							if(it.pivot && it.pivot.status == 1) {
								data.curGroup = it
								data.showGood = true
							} else {
								data.groupsList.push(it)
							}
						})
						if(data.curGroup.id) {
							data.groupsList.unshift(data.curGroup)
						}
					}
					
					// 优惠券
					if(res.shop_coupons && res.shop_coupons.length) {
						data.couponList = res.shop_coupons
						res.shop_coupons.forEach((it, i) => {
							data.couponMark[it.id] = i
						})
					}
					
					if(res.live_bags && res.live_bags.length) {
						for(let i = 0; i < res.live_bags.length; i++) {
							if(res.live_bags[i].activity_status == 30 && res.live_bags[i].end_time && dayjs().isBefore(dayjs(res.live_bags[i].end_time))) {
								data.blessId = res.live_bags[i].id
								getBlessInfo()
							}
						}
					}
				})
			}
			
			function regetPull() {
				get('/api/v1/live/customer/liveDetail/' + data.liveId).then(async(res) => {
					data.liveInfo = res
					data.isPlay = false
					// time_status 1 未开始 2进行中 3已结束
					if(res.time_status == 2) {
						for (let index = 0; index < res.streamers.length; index++) {
							let item = res.streamers[index]
							if(item.pivot.live_status == 1) {
								data.isPlay = true
								data.streamerId = item.id
								getPullUrl('regetPull')
								break
							}
						}
					}
				})
			}
		
			async function getPullUrl(from) {
				data.errorList.push({text: 'getPullUrl11:-----' + from + '--id:' + data.liveId})
				await get('/api/v1/live/customer/getPullUrl', {liveId: data.liveId}).then(async(res) => {
					data.player = TCPlayer('player-container-id', {
						sources: [{
							src: res.pullUrl, // 播放地址
						}],
						playsinline: true,
						'webkit-playsinline': true,
						licenseUrl: res.licenseUrl, // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
						autoplay: true,
						muted: false,
						// bigPlayButton: false,
						// controlBar: {
						// 	progressControl: false,
						// 	playToggle: false
						// },
						languages:{
						    "zh-cn":{
						        "A network error caused the media download to fail part-way.": "播放错误，请刷新页面重试"
						    }
						}
					})
					data.is_paused = false
					// data.player.play()
					
					data.player.on('error', function(error) {
						console.log('播放错误', error)
						data.errorList.push({text: '播放错误:' + JSON.stringify(error)})
						refreshPlayer()
					})
					
					data.player.on('pause', function(error) {
						console.log('暂停时触发', error)
						data.is_paused = true
					})
				})
			}
			
			function refreshPlayer() {
				if(data.player) {
					data.player.dispose()
					data.player = null
				}
				const div = document.getElementById('video-content-box')
				if(div) {
					div.replaceChildren()
				}
				creatVideoDom()
				getLiveInfo()
			}
			
			async function getUserSign() {
				await get('/api/v1/live/liveIm/getUserSign').then((res) => {
					data.userId = res.userId + ''
					data.userSign = res.userSign
					initIM()
				})
			}
			
			function initIM() {
				data.chat = TencentCloudChat.create({
					SDKAppID: '1600089204'
				})
				
				data.chat.setLogLevel(1) // 普通级别，日志量较多，接入时建议使用
				// data.chat.setLogLevel(1); // release级别，SDK 输出关键信息，生产环境时建议使用
				data.chat.registerPlugin({'tim-upload-plugin': TIMUploadPlugin})
				
				// 登录 Chat
				let options = {
					userID: data.userId,
					userSig: data.userSign
				} 
				let promise = data.chat.login(options)
				promise.then(function(imResponse) {
					console.log(imResponse.data) // 登录成功
					if (imResponse.data.repeatLogin === true) {
						// 标识账号已登录，本次登录操作为重复登录。
						console.log(imResponse.data.errorInfo)
					}
				}).catch(function(imError) {
					console.warn('login error:', imError) // 登录失败的相关信息
					data.errorList.push({text: 'login error:' + JSON.stringify(imError)})
				})
				
				getHistoryMsg()
				
				setInterval(() => {
					// getOnLineNum()
				}, 10000)
				
				data.chat.on(TencentCloudChat.EVENT.SDK_READY, function(event) {
					// 收到离线消息和会话列表同步完毕通知，接入侧可以调用 sendMessage 等需要鉴权的接口
					// event.name - TencentCloudChat.EVENT.SDK_READY
					console.log('ready事件', event.name)
					let promise1 = data.chat.joinGroup({
						groupID: data.liveInfo.group_id,
						applyMessage: data.nickname + ''
					});
					promise1.then(function(imResponse) {
						switch (imResponse.data.status) {
							case TencentCloudChat.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
								console.log('等待管理员同意');
								break;
							case TencentCloudChat.TYPES.JOIN_STATUS_SUCCESS: //
								console.log('加群成功', imResponse); // 加入的群组资料
								data.messageList.push({
									name: data.nickname,
									text: '进入了直播间'
								})
								setTimeout(() => {
									sendJoinGroup()
								}, 500)
								break;
							case TencentCloudChat.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
								console.log('已经在群中');
								break;
							default:
								break;
						}
					}).catch(function(imError){
						console.warn('加群失败', JSON.stringify(imError)); // 申请加群失败的相关信息
						data.errorList.push({text: '加群失败' + JSON.stringify(imError)})
					})
					
					// 收到推送的单聊、群聊、群提示、群系统通知的新消息
					data.chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, function(event) {
						// event.name - TencentCloudChat.EVENT.MESSAGE_RECEIVED
						// event.data - 存储 Message 对象的数组 - [Message]
						console.log('新消息', event, event.data)
						const List = event.data; // 数组类型，包含多个 Message 对象
						List.forEach((item) => {
						    if(item.type === TencentCloudChat.TYPES.MSG_TEXT) { // 处理文本消息
								console.log(item.payload.text)
								if(item.payload && item.payload.text) {
									data.messageList.push({
										name: item.cloudCustomData || '',
										text: item.payload.text
									})
								}
						    } else if(item.type === TencentCloudChat.TYPES.MSG_GRP_SYS_NOTICE) { // 群系统通知消息
								
							} else if(item.type === TencentCloudChat.TYPES.MSG_GRP_TIP) { // 群提示消息
								
							}
						})
					})
					
					// 监听群属性更新，（更新界面讲解商品、发放的优惠券）
					data.chat.on(TencentCloudChat.EVENT.GROUP_ATTRIBUTES_UPDATED, function(event) {
						let groupID = event.data.groupID // 群组ID
						let attr = event.data.groupAttributes // 更新后的群属性
						console.log('群属性更新', groupID, attr)
						data.errorList.push({text: '群属性更新:' + JSON.stringify(attr)})
						// 监听讲解商品
						if(attr.shopGroupGoodsId === '0') {
							data.showGood = false
							setTimeout(async() => {
								data.curGroup = {}
							}, 500)
						} else if(attr.shopGroupGoodsId && attr.shopGroupGoodsId !== data.curGroup.id) {
							data.showGood = false
							setTimeout(async() => {
								await reGetMarkInfo()
								let i = data.groupsMark[attr.shopGroupGoodsId]
								data.curGroup = data.groupsList[i]
								data.showGood = true
							}, 500)
						}
						
						// 监听发放优惠券
						if(attr.shopCouponId) {
							get('/api/v1/live/customer/liveDetail/' + data.liveId).then((ress) => {
								data.couponList = ress.shop_coupons
								ress.shop_coupons.forEach((it, i) => {
									data.couponMark[it.id] = i
								})
								get('/api/v1/live/liveReward/liveCouponList', {live_id: data.liveId}).then((res) => {
									let flag = true
									for(let i = 0; i < res.data.length; i++) {
										let item = res.data[i]
										if(item.shop_coupon_id == attr.shopCouponId) {
											flag = false
										}
									}
									if(flag) {
										let i = data.couponMark[attr.shopCouponId]
										data.curCoupon = data.couponList[i]
										console.log(data.curCoupon)
										data.showCouGift = true
										data.timeNum = 20
										data.timeInterval = setInterval(() => {
											data.timeNum -= 1
										}, 1000)
									} else {
										console.log('已领取过当前优惠券')
									}
								})
							})
						}
						
						// 监听直播状态，1直播中，2已结束直播，3直播暂停
						if(attr.liveStatus) {
							if(attr.liveStatus == 1) {
								if(data.player) {
									data.player.dispose()
									data.player = null
								}
								const div = document.getElementById('video-content-box')
								if(div) {
									div.replaceChildren()
								}
								creatVideoDom()
								setTimeout(() => {
									regetPull()
								}, 200)
							} else if(attr.liveStatus == 2) {
								data.player.unload()
								data.player = null
								data.liveInfo.time_status = 3
							} else if(attr.liveStatus == 3) {
								data.player.pause()
								data.isPlay = false
								data.liveInfo.time_status = 2
							}
						}
						
						// 监听福袋发放、开奖
						if(attr.liveBag && attr.liveBag * 1 > 0) {
							data.blessId = attr.liveBag
							getBlessInfo()
						}
						
						if(attr.liveBag && attr.liveBag * 1 == 0) {
							if(data.blessInfo.myLotteryLog) {
								data.showBless = false
								get('/api/v1/liveBag/lotteryLogs', {activity_id: data.blessId, is_my: 1, reward_type: '2,3,4'}).then((res) => {
									if(res.data.length) {
										if(res.data[0].reward_type == 2) {
											data.lottery = {
												reward_type: 2,
												...res.data[0].user_coupon
											}
										} else if(res.data[0].reward_type == 3) {
											data.lottery = {
												reward_type: 3,
												...res.data[0].user_coupon
											}
										} else if(res.data[0].reward_type == 4) {
											data.lottery = {
												reward_type: 4,
												type_value: res.data[0].prize.type_value
											}
										}
										data.showLottery = true
										data.showBag = false
									} else {
										// 未中奖
										data.showFail = true
										data.showBag = false
									}
								})
							} else {
								// 未参与抽奖
								data.showBag = false
							}
						}
					})
					
					// 监听群组列表更新
					data.chat.on(TencentCloudChat.EVENT.GROUP_LIST_UPDATED, function(event) {
						console.log('群组列表更新', event.data)
						// event.data.forEach((item) => {
						// 	if(item.lastMessage && item.lastMessage.cloudCustomData && item.lastMessage.cloudCustomData.indexOf('mark') != -1) {
						// 		let nickname = item.lastMessage.cloudCustomData.replace('mark', '')
						// 		data.messageList.push({
						// 			name: nickname,
						// 			text: item.lastMessage.payload.text
						// 		})
						// 	}
						// })
					})
				})
			}
			
			function getOnLineNum() {
				let promise = data.chat.getGroupOnlineMemberCount(data.liveInfo.group_id)
				promise.then(function(imResponse) {
				  console.log('在线人数：' + data.liveInfo.group_id, imResponse.data.memberCount, )
				}).catch(function(imError) {
				  console.warn('获取在线人数错误:', imError)
				})
				
				let promise1 = data.chat.getGroupMemberList({ groupID: data.liveInfo.group_id, count: 15, offset: 0 }); // 从 0 开始拉取 15 个群成员
				promise1.then(function(imResponse) {
				  console.log(imResponse.data.memberList); // 群成员列表
				}).catch(function(imError) {
				  console.warn('getGroupMemberList error:', imError);
				})
			}
			
			async function reGetMarkInfo() {
				await get('/api/v1/live/customer/liveDetail/' + data.liveId).then((res) => {
					if(res.shop_group_goods && res.shop_group_goods.length) {
						let obj = {}
						data.groupsList = []
						for (var i = 0; i < res.shop_group_goods.length; i++) {
							let it = res.shop_group_goods[i]
							if(it.pivot && it.pivot.status == 1) {
								obj = it
							} else {
								data.groupsList.push(it)
							}
						}
						if(obj.id) {
							data.groupsList.unshift(obj)
						}
						data.groupsList.forEach((it, i) => {
							data.groupsMark[it.id] = i
						})
					}
					
					// 优惠券
					if(res.shop_coupons && res.shop_coupons.length) {
						data.couponList = res.shop_coupons
						res.shop_coupons.forEach((it, i) => {
							data.couponMark[it.id] = i
						})
					}
				})
			}
			
			function sendJoinGroup() {
				let message = data.chat.createTextMessage({
					to: data.liveInfo.group_id,
					conversationType: TencentCloudChat.TYPES.CONV_GROUP,
					payload: {
						text: '进入了直播间'
					},
					cloudCustomData: data.nickname
				})
				let promise2 = data.chat.sendMessage(message)
				promise2.then(function(imResponse) {
					console.log('进入了直播间', imResponse)
				}).catch(function(imError) {
					console.warn('发送失败', imError)
					data.errorList.push({text: '进入直播间失败:' + JSON.stringify(imError)})
				})
			}
			
			async function getBlessInfo() {
				await get('/api/v1/liveBag/' + data.blessId).then((res) => {
					data.blessInfo = res.data
					data.blessInfo.num = res.data.activity_prizes && res.data.activity_prizes[0].remaining_quantity
					if(res.data.activity_status == 30 && res.data.end_time && dayjs().isBefore(dayjs(res.data.end_time))) {
						data.downTime = dayjs(res.data.end_time).diff(dayjs())
						console.log(data.downTime)
						data.showBag = true
					}
				})
			}
			
			function parseTime(time) {
				let tt1 = time.split(' ')[0]
				let tt2 = time.split(' ')[1]
				let txt = tt1.split('-')[1] + '月' + tt1.split('-')[2] + '日 ' + tt2.slice(0, 5)
				return txt
			}
			
			function toOther() {
				uni.setStorageSync('msg_index', 3)
				uni.switchTab({ url: '/pages/message/index' })
			}
			
			function toGroup() {
				// uni.navigateTo({
				// 	url: '/pages/groups/index?id=' + data.curGroup.id + '&at=live&live_id=' + data.liveId + '&streamer_id=' + data.streamerId
				// })
				data.groupId = data.curGroup.id
				data.showDetail = true
			}
			
			function toGoods(id) {
				// uni.navigateTo({
				// 	url: '/pages/groups/index?id=' + id + '&at=live&live_id=' + data.liveId + '&streamer_id=' + data.streamerId
				// })
				data.groupId = id
				data.showDetail = true
			}
			
			function toPay(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				get(`/api/v1/goods/group/detail/${id}`).then((res) => {
					if(res.data.group_goods.length == 1 && res.data.total_stock * 1 > 0 && res.data.sold_status == 1) {
						data.goodId = res.data.group_goods[0].id
						data.showMorePay = true
					} else {
						toGoods(id)
					}
					uni.hideLoading()
				})
			}
			
			function sendBarrage() {
				if(!data.keyValue) {
					return
				}
				let message = data.chat.createTextMessage({
					to: data.liveInfo.group_id,
					conversationType: TencentCloudChat.TYPES.CONV_GROUP,
					payload: {
						text: data.keyValue
					},
					cloudCustomData: data.nickname + '：'
				})
				// 发送消息
				let promise = data.chat.sendMessage(message)
				promise.then(function(imResponse) {
					data.messageList.push({
						name: data.nickname + '：',
						text: data.keyValue
					})
					// 未参与
					if(!data.blessInfo.myLotteryLog) {
						if(data.blessId && data.blessInfo.config && (data.blessInfo.config.conditionType == 1 || (data.blessInfo.config.conditionType == 2 && data.blessInfo.config.conditionData.indexOf(data.keyValue) >= 0))) {
							post(`/api/v1/liveBag/join`, {activity_id: data.blessId}).then(async(res) => {
								await getBlessInfo()
								data.showBless = true
							})
						}
					}
					data.keyValue = ''
				}).catch(function(imError) {
					// 发送失败
					console.warn('发送失败', imError)
					data.errorList.push({text: '发送失败:' + JSON.stringify(imError)})
				})
			}
			
			function openRank() {
				data.showRank = true
				getRankList()
			}
			
			function getRankList() {
				data.rankloading = true
				let params = {
					page: 1,
					pageSize: 100,
					live_id: data.liveId,
					with_user: 1
				}
				get('/api/v1/live/customer/inviteRecord', params).then((res) => {
					data.rankList = res.data
					data.inviteList = res.userRecord
					data.rankloading = false
				}).catch(() => {
					data.rankloading = false
				})
			}
			
			function bindInvite(user_id) {
				let params = {
					live_id: data.liveId,
					user_id: user_id
				}
				post('/api/v1/live/customer/saveInviteRecord', params).then((res) => {
					
				})
			}
			
			function updateShare() {
				let shopId = uni.getStorageSync('shop_id')
				let params = {
					shop_id: uni.getStorageSync('shop_id'),
					url: window.location.href.split('#')[0],
					js_api_list: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline']
				}
				post('/api/v1/live/liveIm/config', params).then(res => {
					let config = res.data
					wx.config({
						beta: true,
						debug: false,
						appId: config.appId,
						timestamp: config.timestamp,
						nonceStr: config.nonceStr,
						signature: config.signature,
						jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline']
					})
					wx.ready(() => {
						wx.updateAppMessageShareData({
							title: data.liveInfo.name,
							desc: data.liveInfo.brief || `快来看看我的直播吧`,
							link: `${window.location.origin}/web#/pages/live/index?live_id=${data.liveId}&user_id=${data.userId}&shopId=${shopId}`,
							imgUrl: data.liveInfo.cover_img,
							success: function() {
								console.log('分享成功');
							},
							fail: function(err) {
								console.log('分享失败', JSON.stringify(err));
							}
						});
						wx.updateTimelineShareData({
							title: data.liveInfo.name,
							link: `${window.location.origin}/web#/pages/live/index?live_id=${data.liveId}&user_id=${data.userId}&shopId=${shopId}`,
							imgUrl: data.liveInfo.cover_img,
							success: function(){
								console.log('到朋友圈');
							},
							fail: function(err) {
								console.log('分享朋友圈失败', JSON.stringify(err));
							}
						})
					})
					wx.error(function(res){
					    console.log('wx错误', res)
					})
				})
			}
			
			function toZan() {
				
			}
			
			function toShare() {
				data.showShare = true
			}
			
			function openCoupon() {
				data.showCoupon = true
				getMyCoupon()
			}
			
			function getMyCoupon() {
				data.couponloading = true
				let params = {
					live_id: data.liveId
				}
				get('/api/v1/live/liveReward/liveCouponList', params).then((res) => {
					data.myCoupon = res.data
					data.couponloading = false
				}).catch(() => {
					data.couponloading = false
				})
			}
			
			function handleMore(id) {
				if(id == 1) {
					data.showMore = false
					openCoupon()
				} else if(id == 2) {
					data.showMore = false
					uni.navigateTo({
						url: '/pages/order/list/index'
					})
				} else if(id == 3) {
					data.showMore = false
					uni.switchTab({
						url: '/pages/cart/index'
					})
				} else if(id == 4) {
					data.showMore = false
					viewMyLottery()
				} else if(id == 5) {
					data.showMore = false
					uni.navigateTo({
						url: '/pages/mine/msg/select'
					})
				}
			}
			
			function viewMyLottery() {
				get('/api/v1/liveBag/lotteryLogs', {live_id: data.liveId, is_my: 1, reward_type: '2,3,4'}).then((res) => {
					data.lotteryLogs = res.data
					data.showMyPrize = true
				})
			}
			
			function closeCoupon() {
				data.showCouGift = false
				data.timeInterval = null
			}
			
			function receiveCoupon() {
				post('/api/v1/userCoupon/normal/receive', {shop_coupon_id: data.curCoupon.id}).then((res) => {
					showToast('领取成功', 'success')
					closeCoupon()
				}).catch((err) => {
					showToast(err)
					closeCoupon()
				})
			}
			
			function selectPop(e) {
				if(e.id == 0) {
					toBack('home')
				} else if(e.id == 1) {
					data.showService = true
				} else if(e.id == 2) {
					toPage('/pages/search/index', 1)
				} else if(e.id == 3) {
					toPage('/pages/mine/collection/index', 1)
				} else if(e.id == 4) {
					toPage('/pages/cart/index')
				}
			}
			
			const toBack = (val) => {
				let pages = getCurrentPages()
				let pagesLength = pages.length
				if(val == 'back') {
					if(pagesLength > 1) {
						uni.navigateBack({ delta: 1 })
					} else {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			}
			
			function getHistoryMsg() {
				let params = {
					group_id: data.liveInfo.group_id,
					page: 1,
					pageSize: 20
				}
				get('/api/v1/live/liveIm/messageList', params).then((res) => {
					for (let i = res.data.length - 1; i >= 0; i--) {
						let item = res.data[i]
						if(item.msg_body && item.msg_body[0] && item.msg_body[0].MsgContent && item.msg_body[0].MsgContent.Text != '进入了直播间' && item.user) {
							data.messageList.push({
								name: item.user.nickname + '：',
								text: item.msg_body[0].MsgContent.Text
							})
						}
					}
				})
			}
			
			function openBless() {
				if(data.blessInfo.activity_status == 30) {
					if(data.blessInfo && data.blessInfo.activity_status == 30 && data.blessInfo.end_time && dayjs().isBefore(dayjs(data.blessInfo.end_time))) {
						data.downTime = dayjs(data.blessInfo.end_time).diff(dayjs())
						data.showBless = true
					}
				} else if(data.blessInfo.activity_status == 40) {
					data.downTime = '00:00'
					data.showBless = true
				}
			}
			
			function viewLotteryLogs() {
				get('/api/v1/liveBag/lotteryLogs', {activity_id: data.blessId, is_my: 0, reward_type: '2,3,4'}).then((res) => {
					data.lotteryLogs = res.data
					data.showPlayer = true
				})
			}
			
			
			function toComment() {
				if(data.blessInfo.config && data.blessInfo.config.conditionType == 2) {
					data.keyValue = data.blessInfo.config.conditionData[0]
				}
				data.showBless = false
				data.sendFocus = true
				setTimeout(() => {
					data.sendFocus = false
				}, 1000)
				
			}
			
			function toCoupon(row) {
				if((row.reward_type == 2 || row.reward_type == 3) && row.user_coupon && row.user_coupon.status == 1) {
					let item = row.user_coupon
					if((item.use_type === 20 || item.use_type === 31) && item.extend && item.extend.id) {
						uni.navigateTo({
							url: '/pages/groups/index?id=' + item.extend.id
						})
					} else if(item.use_type === 21 && item.type === 50) {
						uni.navigateTo({
							url: '/pages/mine/scoreShop/good?id=' + item.shop_coupon_id
						})
					} else if(item.type === 51) {
						uni.navigateTo({
							url: '/pages/vip/wheel/good?id=' + item.id
						})
					} else {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				}
			}
			
			
			watch(() => data.messageList, (val) => {
				setTimeout(() => {
					let msgDom = document.getElementById('msgBox')
					let scrollDom = document.getElementById('scrollBox')
					console.log(scrollDom.scrollHeight)
					msgDom.scrollTop = scrollDom.scrollHeight + 30
				}, 100)
				
			}, {
				deep: true
			})
			
			watch(() => data.timeNum, (val) => {
				if(val == 0) {
					closeCoupon()
				}
			}, {
				deep: true
			})
			
			const address = ref(null)
			watch(address, (newValue, oldValue) => {
				console.log('0.0---live')
				data.addr = newValue
			})
			
			return {
				address,
				judgeShop,
				...toRefs(data),
				creatVideoDom,
				getLiveInfo,
				getPullUrl,
				parseTime,
				toOther,
				toGroup,
				sendBarrage,
				getUserSign,
				initIM,
				openRank,
				getRankList,
				bindInvite,
				updateShare,
				openCoupon,
				handleMore,
				toShare,
				toZan,
				toGoods,
				closeCoupon,
				receiveCoupon,
				sendJoinGroup,
				selectPop,
				toBack,
				regetPull,
				getHistoryMsg,
				toPay,
				getBlessInfo,
				openBless,
				viewLotteryLogs,
				viewMyLottery,
				userBind,
				toComment,
				toCoupon,
				reGetMarkInfo,
				refreshPlayer,
				getOnLineNum
			}
		},
		async onLoad(options) {
			// await this.judgeShop()
			this.liveId = options.live_id
			this.errorList.push({text: 'onLoad:进入了onLoad'})
			setTimeout(async() => {
				this.creatVideoDom()
				await this.getLiveInfo('onLoad')
				await this.getUserSign()
				this.updateShare()
			}, 200)
			if(options.user_id) {
				this.bindInvite(options.user_id)
				this.userBind({from: options.user_id})
			}
		},
		onShow() {
			this.errorList.push({text: '触发onShow'})
			const _this = this
			if(this.is_paused) {
				nextTick(() => {
					_this.refreshPlayer()
				})
			}
		},
		onUnload() {
			console.log('0.0')
			this.errorList.push({text: 'onUnload:进入了onUnload'})
			uni.setStorageSync('liveId', this.liveId)
			if(this.player) {
				this.player.dispose()
				this.player = null
			}
			if(this.chat) {
				this.chat.logout()
				this.chat.destroy()
			}
		},
		onHide() {
			uni.setStorageSync('liveId', this.liveId)
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
	
	::v-deep .whole .vjs-control-bar {
		display: none !important;
	}
	.payDialog{
		position: fixed;
		left: 0;
		height: 0;
		overflow: hidden;
		bottom: 0;
		z-index: 300;
		&.show{
			height: calc(70vh + 40px);
		}
	}
</style>
