<template>
	<view class="container">
		<view class="zhibotopbox">
			<view class="zhibotaltop flexone">
				<view class="zhibohead">
					<image :src="info.avatar" mode=""></image>
				</view>
				<view class="zhiboright">
					<view class="zhubotail flextwo">
						<view class="tailrighttop flexone">
							<view class="tailname">{{info.name}}</view>
							<view class="taillabel">{{info.platform}}</view>
						</view>
						<view class="shareimg">
							<image src="../../static/share.png" mode="" class="sharebtn"></image>
							<button open-type="share" class="shartype"></button>
						</view>
					</view>

					<view class='tailrightbot flexone'>
						<view class="tailzhibo" v-if="info.user_anchor==0" @click="dingyuezhi">订阅直播</view>
						<view class="tailzhibo" v-if="info.user_anchor==1" @click="dingyuezhi">取消订阅</view>
						<view class='taildate' v-if="info.anchor_time!=null">{{info.anchor_time.time}}开播</view>
					</view>
					<view class="dongtai flexone" v-if="info.user_anchor==0&&guanzhu==0" @click="hidegaunzhu">
						<veiw>订阅主播,随时获取主播动态</veiw>
						<view class="chahaoimg"> 
						<img src="../../static/chahao.png" alt="" >
						</view>
						
					</view>

				</view>
			</view>
			<view class="zhibonametext" v-if="info.anchor_time!=null">{{info.anchor_time.title}}</view>
		</view>
		<view class="zhibotailtab flextwo">
			<view class="zhibotailtableft" :class="begin==1?'zhibotailactive':''" @click="beginstart(1)">即将开始</view>
			<view class="zhibotailtableft" :class="begin==2?'zhibotailactive':''" @click="beginstart(2)">历史场次</view>
			<img src="../../static/search.png" alt="" class="souimg" @click='searchenter'>
		</view>
		<!-- 即将开始 -->
		<view class='beginlist' v-if="begin==1">
			<!-- v-if="info.button==true" -->
			<view class='beginlisttop flexone' v-if="button">
				<view class="begintopitem" :class="sel==''?'selactive':''" @click="select('')">所有商品</view>
				<view class="begintopitem" :class="sel==1?'selactive':''" @click="select('1')">今天</view>
				<view class="begintopitem" :class="sel==2?'selactive':''" @click="select('2')">明天</view>
			</view>
			<view>
				
			</view>
			<view v-if="beginlist.length!=0">
				<view v-for="(item,index) in beginlist" :key="index">
					<view class="want flextwo">
						<view class="wantleft flexone">
							<image src="../../static/meizhuanglei.png" mode="" class="likeimg"></image>
							{{item.name}}
						</view>
						<!-- <view class="more flexone">
							更多
							<img src="../../static/yourow.png" alt="" class="yourow">
						</view> -->
					</view>
					<view class="goodlist">
						<view class="goodlistitem flex" v-for="(itemk,indexk) in item.child" :key="indexk" @click="entergood(itemk)">
							<view class="goodlistimg">
								<image :src="itemk.image" mode=""></image>
							</view>
							<view class="goodlistright">
								<view class="goodrighttop flextwo">
									<view class="goodname">{{itemk.name}}</view>
									<view class="shareimg">
										<image src="../../static/share.png" mode="" class="sharebtn"></image>
										<button open-type="share" class="shartype"></button>
									</view>
								</view>
								<view class="zhibo flextwo">
									<view class="zhiboleft">{{itemk.anchor.name}}{{itemk.anchor.platform}}</view>
									<view class="kaibo">{{itemk.anchor_time.time}}开播</view>
								</view>
								<view class="zhiboprice">
									直播价 ￥<text class="pricege">{{itemk.live_price}}</text>
								</view>
								<view class="cankao flextwo">
									<view class="cankaoleft">参考价（京东￥{{itemk.r_price}}元）</view>
									<view v-if="itemk.status_data==1">
										<view v-if="itemk.user_goods==0">
											<view class="canlaoright flexone" v-if="itemk.share==true" >
												<image src="../../static/naoling.png" mode="" class="naoling"></image>
												提醒我
												<button open-type="share" class="sharebtnk" v-if="notixing==1" @click.stop="sharefriend(index,indexk,itemk.id,item.share)"></button>
											</view>
											<view class="canlaoright flexone" v-else @click.stop="tixing(index,indexk,itemk.id)">
												<image src="../../static/naoling.png" mode="" class="naoling"></image>
												提醒我
											</view>
										
										</view>
										<view class="canceltixing" v-else @click.stop="canceltixing(index,indexk,itemk.id)">
											取消提醒
										</view>
									</view>
									<view v-if="itemk.status_data==2">
										<view class="canlaoright flexone" >
											已上架
										</view>									
									</view>
									
								</view>
							</view>
						</view>
						
					</view>
					
				</view>
			</view>
			
			<!-- 这里也有你想要的 -->
			<view class="want flextwo" >
				<view class="wantleft flexone">
					<image src="../../static/like.png" mode="" class="likeimg"></image>
					也许这里也又你想要的
				</view>
				<!-- <view class="more flexone" @click="seemore">
					更多
					<img src="../../static/yourow.png" alt="" class="yourow">
				</view> -->
			</view>
			<goodkind :wantlist="wantlist"></goodkind>
			<!-- 没有直播时显示 -->
			<view class="nodatabox" v-if="beginlist.length==0">
				<view class="nodataimg">
					<image src="../../static/nodataimg.png" mode=""></image>
				</view>
				<view class="nodataword">当前主播还未发布预告，点击订阅TA的预告提醒</view>
				<view class="nodatabtn" @click="dingyuezhi"  v-if="info.user_anchor==0">订阅TA的预告提醒</view>
				<view class="nodatabtn" @click="dingyuezhi"  v-if="info.user_anchor==1">取消订阅TA的预告提醒</view>
			</view>
		</view>
		<!-- 历史场次 -->
		<view class="zhibotaillist" v-else>
			<view class="nodata" v-if="hislist.length==0">暂无数据</view>
			<view v-else>
				<view class="zhibotialitem flextwo" v-for="(item,index) in hislist" :key="index" @click="zhidetail(item.id)">
					<view class='zhibotialleft'>
						<view class='zhibotailleftname'>{{item.title}}</view>
						<view class="zhibotaildate">{{item.time}}</view>
					</view>
					<view class="yourowk">
						<image src="../../static/yourow.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出层 -->
		<view class="register" v-if="noshow" @click="hideding">
			<view class="registerwrap">
				<view class="title">何时提醒我？</view>
				<view class="titletext">在主播开始介绍商品时就提醒您</view>
				<view class="title">如何提醒我</view>
				<view class="titletext">在你允许消息通知后，届时会给您发送微信消息提醒</view>
				<view class='noti flexone' @click="notibtn">
					<image src="../static/selectzhong.png" mode="" class="selectxuan" v-if="noti"></image>
					<image src="../static/select.png" mode="" class="selectxuan" v-else></image>
		
					不再提示
				</view>
				<button class="buzai" @click.stop="know" v-if="share==true" open-type="share">我知道了</button>
				<view class="buzai" @click.stop="know" v-else>我知道了</view>
			</view>
		</view>


	</view>
</template>

<script>
	import app from "../../App.vue";
	import goodkind from "../../compontent/goodkind.vue"
	import {Toast} from "../../utils/toast.js"
	var that
	export default {
		components: {
			goodkind
		},
		data() {
			return {
				begin: 1,
				hasgood: false,
				zhiboid: "",
				info: '',
				sel: '',
				beginlist:[],
				page:1,
				wantlist:[],
				hislist:[],
				showpull:true,
				notixing:'',
				goods_id: '',
				noti: false, //提示和不提示按钮
				noshow: false, //提示我弹出层
				goodindex: '',
				goodparindex:'',
				share:'',
				button:false,//是否显示所有商品 今天 明天
				guanzhu:0,//是否显示主播动态
				dingyuenum:[],
				
			}
		},
		onLoad(options) {
			if(uni.getStorageSync("guanzhu")){
				this.guanzhu=uni.getStorageSync("guanzhu")
			}
			this.zhiboid = options.id;
			// 获取主播详情
			this.getzhibodetail();
			this.getbeginlist();
			// 获取想要的
			this.getwant()


		},
		onShow() {
			let notixing = uni.getStorageSync("notixing");
			this.notixing = notixing;
		},
		onShareAppMessage(res) {
			let that = this;
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '早直播',
				path:'/pages/xinyuan/zhibodetail?id='+this.zhiboid
			}
		},
		onReachBottom() {
			that=this
			let newpage=that.page;
			newpage++
			that.page=newpage;
			if(that.showpull==true){
				console.log(38493409)
			  Toast('没有更多了~')
			}else{
				if(this.begin==1){
					 that.getbeginlist()
				}else{
					this.gethislist()
				}
			 
			}
		},
		methods: {
			// 关注关注
			hidegaunzhu(){
				uni.setStorageSync("guanzhu",1)
				this.guanzhu=1
			},
			// 查看更多
			seemore() {
				uni.navigateTo({
					url: "/pages/xinyuan/zhiboknow"
				})
			},
			beginstart(id) {
				this.begin = id;
				this.page=1;
				this.beginlist=[];
				this.hislist=[]
				if(id==1){
					this.getbeginlist()
				}else{
					this.gethislist()
				}
			},
			// 全部 今天 明天
			select(id) {
				this.sel = id;
				this.page=1;
				this.beginlist=[];
				this.getbeginlist()
			},
			// 直播详情
			getzhibodetail() {
				let that = this;
				var url = "anchor/getAnchorInfo"
				let param = {
					anchor_id: that.zhiboid
				}
				app.post(url, param, "post").then(res => {
					console.log('主播详情', res)
					that.info=res;
					that.button=res.button;
					that.$forceUpdate();

				}).catch(err => {
					console.log(err)
				})
			},
			// 订阅直播
			dingyuezhi(){
				console.log(9999)
				let that = this;
				var url = "anchor/addUserAnchor"
				let param = {
					anchor_id: that.zhiboid
				}
				app.post(url, param, "post").then(res => {
					console.log('主播订阅', res)
					if(that.info.user_anchor==0){
						that.info.user_anchor=1;
						uni.showToast({
							title:'订阅成功',
							icon:'none'
							
						})
					}else{
						that.info.user_anchor=0;
						uni.showToast({
							title:'取消订阅成功',
							icon:'none'
							
						})
					}
					that.info=that.info;
					that.$forceUpdate()
				
				
				}).catch(err => {
					console.log(err)
				})
			},
			
			// 获取即将开播
			getbeginlist() {
				let that = this;
				var url = "anchor/getAnchorGoods"
				let param = {
					anchor_id: that.zhiboid,
					type: that.sel,
					page: that.page,
					per_page: 20
				}
				app.post(url, param, "post").then(res => {
					console.log('即将开播', res)
					that.beginlist=that.beginlist.concat(res)
					if(that.page>1){
						if(res.data.length==0){
							that.showpull=false
						}
					}
					that.beginlist.forEach(function(value,index,array){
						value.child.forEach(function(valuek,indexk,arrayk){
							if(valuek.user_goods==1){
									if(that.dingyuenum.indexOf(valuek.id)==-1){
										that.dingyuenum.push(valuek.id);
										that.dingyuenum=that.dingyuenum
								}
							}
						})
						
					})
					console.log('订阅数量',that.dingyuenum)
					
				}).catch(err => {
					console.log(err)
				})
			},
			gethislist(){
				let that = this;
				var url = "anchor/getAnchorTime"
				let param = {
					anchor_id: that.zhiboid,
					page: that.page,
					per_page: 20
				}
				app.post(url, param, "post").then(res => {
					console.log('历史列表', res)
					that.hislist=that.hislist.concat(res.data);
					if(that.page>1){
						if(res.data.length==0){
							that.showpull=false
						}
					}
				
				}).catch(err => {
					console.log(err)
				})
			},
			// 你想要的
			getwant(){
				let that = this;
				var url = "category/getRandCategory"
				let param={
					limit:8
				}
				app.post(url, param, "post").then(res => {
					console.log('我想要的', res)
					that.wantlist=res
					
				
				}).catch(err => {
					console.log(err)
				})
			},
			
			// 订阅消息
			tixing(index,indexk,id) {
				console.log(99)
				let that = this;
				if (uni.getStorageSync("token")) {
					if (that.notixing == '') {
						that.noshow = true
					} else {
						that.noshow = false
					}
					that.goodindex = indexk;
					that.goodparindex=index;
					this.goods_id = id;
					// that.dingyue()
					
					wx.getSetting({
						// withSubscriptions: true,//是否获取用户订阅消息的订阅状态，默认false不返回
						success(res) {
							if (res.authSetting['scope.subscribeMessage']) {
								uni.openSetting({ // 打开设置页
									success(res) {
										console.log(res.authSetting, 88888)
									}
								});
							} else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
								uni.requestSubscribeMessage({
									tmplIds: ["XrIccvxDK3IfW3DrnLtKAtKS-pL63BrG3W0Du9l7BrU"], // 
									success(res) {
										// 去订阅
										that.dingyue()
			
									}
								})
							}
						}
					})
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/mine/mine'
						})
					}, 1500)
				}
			
			},
			// 取消订阅
			canceltixing(index,indexk, id) {
				this.goods_id = id;
				this.goodparindex = index;
				this.goodindex=indexk;
				this.dingyue()
			},
			// 订阅
			dingyue() {
				let that = this;
				let url = "goods/addUserGoods";
				let param = {
					goods_id: that.goods_id
				}
				console.log('参数', param)
				app.post(url, param, "post").then(r => {
					console.log(r,that.goodparindex, that.goodindex, '订阅')
					let newdingyuenum=that.dingyuenum;
					if (that.beginlist[that.goodparindex].child[that.goodindex].user_goods == 0) {
						that.beginlist[that.goodparindex].child[that.goodindex].user_goods= 1;
						if(newdingyuenum.indexOf(that.beginlist[that.goodparindex].child[that.goodindex].id)==-1){
							newdingyuenum.push(that.beginlist[that.goodparindex].child[that.goodindex].id)
						}
					
						uni.showToast({
							title: '订阅成功',
							icon: "none"
						})
			
					} else {
						that.beginlist[that.goodparindex].child[that.goodindex].user_goods= 0;
						newdingyuenum.forEach(function(value,index,array){
							if(value==that.beginlist[that.goodparindex].child[that.goodindex].id){
								newdingyuenum.splice(index,1)
							}
						})
						uni.showToast({
							title: '取消订阅成功',
							icon: "none"
						})
					}
			// 直播个数超过10个 显示false
			  that.beginlist.forEach(function(value,index,array){
				  value.child.forEach(function(valuek,indexk,arrayk){
					  if(newdingyuenum.length>=10){
					  	if(valuek.user_goods ==0){
					  		valuek.share=true
					  	}
					  }else{
					  	if(valuek.user_goods ==0){
					  		valuek.share=false
					  	}
					  }
				  })
			})
					that.beginlist = that.beginlist;
					that.$forceUpdate();
					
				}).catch(err => {
					console.log(err)
				})
			},
			
			
			// 不再提醒
			notibtn() {
				this.noti = !this.noti;
				if (this.noti == true) {
					uni.setStorageSync("notixing", 1);
					this.notixing=1
				} else {
					uni.setStorageSync("notixing", '');
					this.notixing=''
				}
			},
			// 我知道了
			know() {
				this.noshow = false
			},
			// 取消订阅
			hideding() {
				this.noshow = false
			},
			// 分享给好友
			sharefriend(index,indexk,id,share) {
				console.log(4398489)
				let that = this;
				if (uni.getStorageSync("token")) {
					let notixing = uni.getStorageSync("notixing");
					this.notixing = notixing;
					if (that.notixing == '') {
						that.noshow = true
					} else {
						that.noshow = false
					}
					that.goodindex = index;
					that.goods_id = id;
					that.share=share;
					// that.dingyue()
					wx.getSetting({
						// withSubscriptions: true,//是否获取用户订阅消息的订阅状态，默认false不返回
						success(res) {
							if (res.authSetting['scope.subscribeMessage']) {
								uni.openSetting({ // 打开设置页
									success(res) {
										console.log(res.authSetting, 88888)
									}
								});
							} else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
								uni.requestSubscribeMessage({
									tmplIds: ["XrIccvxDK3IfW3DrnLtKAtKS-pL63BrG3W0Du9l7BrU"], // 
									success(res) {
										// 去订阅
										that.dingyue()
			
									}
								})
							}
						}
					})
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/mine/mine'
						})
					}, 1500)
				}
			},
			// 进入直播详情
			zhidetail(id){
				uni.navigateTo({
					url:"/pages/xinyuan/zhidetail?id="+id+'&zhiboid='+this.zhiboid
				})
			},
			// 进入链接页面
			entergood(item){
				uni.navigateTo({
					url:"/pages/xinyuan/goodlianjie?code="+item.code
				})
			},
			searchenter(){
				uni.navigateTo({
					url:"/pages/xinyuan/search"
				})
			}
			
			

		}

	}
</script>

<style>
	@import url("../../style/xinyuan");
	@import url("../../style/goodlist");

	page {
		background: #f5f5f5;
	}
	.shareimg{
		position: relative;
	}

	.tailzhibo {
		font-size: 28rpx
	}

	.want {
		margin-top: 0;
		padding-top: 20rpx
	}
	.zhibotailtab{
		position: relative;
	}
	.souimg{
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		right: 86rpx;
		bottom: 33rpx;

	}
	.chahaoimg{
		width:36rpx;
		height: 36rpx;
		margin-left:10rpx;
		font-size: 0;
		
	}
	.dongtai{
		width:414rpx;
		padding: 10rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		border:1rpx solid #FF5D8E;
		color:#FF5D8E;
		font-size:28rpx;
		
		margin-top:20rpx;
		display:flex;
		align-items: center;
	}
</style>