<!DOCTYPE html>
<html>
	{include file="head.html"}
	<body>
		<link href="{$skins}zblive/show_taoke.css?v2" rel="stylesheet" />
		<div id="App" class="none" :class="'flex-col'" v-if="pageLoad">
			<div class="header-fixtop">
				<div class="header-back"></div>
			</div> 
			<div class="main-body">
				{include file="zblive/video.html"}
				<div :style="{height:ftBoxHeight+'px'}" class="ftBox-mask"></div>
				<div :style="{height:ftBoxHeight+'px'}" class="ftBox">
					<div class="msgList flex-1">
						<div v-for="(item,index) in msgList" :key="index" class="msgList-item">
							<div class="msgList-nick">{{item.nickname}}</div>
							<div class="msgList-desc">{{item.content}}</div>
						</div>
						 
					</div>
					<div class="flex flex-ai-center">
						<div  id="modal-group-goods-btn" class="iconfont ftBox-goods icon-goodsnewfill"></div>
						<template v-if="zblive.zbstatus==1">
						<div class="flex-1 pd-5">
							<input v-model="cmContent" placeholder="发布你想了解的信息" class="ftBox-text" type="text" />
						</div>
						<div @click="sendMsg" class="btn-send iconfont icon-fasong"></div>
						</template>
						<template v-else>
							<div class="flex-1 pd-5">
								<input disabled v-model="cmContent" placeholder="直播结束，不能发布消息了" class="ftBox-text" type="text" />
							</div>
						</template>
					</div>
					
					
				</div>
				<div id="modal-group-goods" class="modal-group">
					<div class="modal-mask"></div>
					<div class="modal-goods">
						<div class="modal-header">
							<div class="modal-title">推荐商品</div>
							<div class="modal-close icon-close"></div>
						</div>
						<div class="modal-body pdb-5">
							<div class="flexlist">
								<div v-for="(item,index) in proList" :key="index" class="flexlist-item">
									<img class="flexlist-img" :src="item.imgurl" />
									<div class="flex-1">
										<div class="flexlist-title">{{item.title}}</div>
										<div class="flex">
											<div>卷后价</div>
											<div class="cl-money mgr-5">￥{{item.price}}</div>
										
											<div class="flex-1"></div>
											<div @click="showQuan(item)" class="btn-small ">领券立省</div>
										</div>
									</div>
								</div>
								 
							</div>
						</div>
						 
						
					</div>
				</div>
				
				<div id="modal-group-share" v-if="productShow" style="z-index:9999" class="modal-group flex-col">
					<div class="modal-mask"></div>
					<div class="modal-share">
						 
						<div @click="productShow=false" class="modal-share-close modal-close icon-close" ></div>
						 
						
						<div >
							<img class="wmax" :src="product.imgurl" />
						</div>
						<div class="bg-white pd-5">
							<div class="flex flex-ai-end mgb-10">
								<div class="cl-num">券后</div>
								<div class="cl-money f22">￥{{product.price}}</div>
								<div class="flex-1"></div>
								<div class="btn-quan">券{{product.juan_money}}</div>
							</div>
							<div class="f14 mgb-10">{{product.title}}</div>
							<div class="mline"></div>
							<div class="btn-ma">{{product.juan_pwd}}</div>
							<div class="btn btn-copy js-copy" :data-clipboard-text="product.juan_pwd">一键复制优惠券口令</div>
							<div class="cl3 text-center f12">若复制失败，请长按淘口令手动复制</div>
						</div>
						
					</div>
				</div>
				
				
				 
			</div>
			
		</div>
		{include file="footer.html"}
		
		
		<script>
			var room_id="{$zblive.id}";
			var video;
			var iswap="{if ISWAP}1{else}0{/if}";
		</script>
		<script src="plugin/clipboardjs/clipboard.min.js"></script>
		<script src="{$skins}zblive/show_taoke.js?v2"></script>
		<script>
			
			var touchFirst=true;
			var w=$(window).width();
			var h=$(window).innerHeight();
			
			$(document).on("click","#videoPlay",function(){
				video.play();
				$(this).hide();
				
			})
			$(document).on("click","#modal-group-goods-btn",function(){
				$("#modal-group-goods").show();
			})
			 
			$(document).on("click",".js-get-quan",function(){
				$("#modal-group-share").show();
			}) 
		</script>
		<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
		<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
	 
	</body>
</html>
