<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>
			</view>
			<view class="zhibonametext" v-if="info.anchor_time!=null">{{info.anchor_time.title}}</view>
		</view>
		<!-- 主播种类 -->
		<view class="zhubokind flextwo">
			<view class="zhubokinditem">
				<view class="zhuboimg">
					<image src="../../static/yulan.png" mode=""></image>
					<view class='yuanquan'></view>
				</view>
				
				<view class="zhubokindname">浏览预告</view>
				<view class="setname">设置商品提醒</view>
				
			</view>
			<view class="zhubokinditem">
				<view class="zhuboimg">
					<image src="../../static/intro.png" mode=""></image>
					<view class='yuanquan'></view>
				</view>
				<view class="zhubokindname">主播介绍</view>
				<view class="setname">立刻推送提醒</view>
			</view>
			<view class="zhubokinditem">
				<view class="zhuboimg">
					<image src="../../static/tixing.png" mode=""></image>
					<view class='yuanquan'></view>
				</view>
				
				<view class="zhubokindname">收到提醒</view>
				<view class="setname">打开软件购买</view>
				
			</view>
		</view>
		<!-- 即将开始 -->
			<!-- v-if="info.button==true" -->
			<view v-if="beginlist.length!=0">
				<view v-for="(item,index) in beginlist" :key="index" style="padding: 0 32rpx;box-sizing: border-box;">
					<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(item)">
							<view class="goodlistimg">
								<image src="../static/goodlistimg.png" 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 style="padding: 32rpx;box-sizing: border-box;">
				<!-- 这里也有你想要的 -->
				<view class="want flextwo">
					<view class="wantleft flexone">
						<image src="../../static/like.png" mode="" class="likeimg"></image>
						也许这里也又你想要的
					</view>
				</view>
				<goodkind :wantlist="wantlist"></goodkind>
			</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 goodlist from "../../compontent/goodlist.vue"
	import goodkind from "../../compontent/goodkind.vue"
	import {Toast} from "../../utils/toast.js"
	var that
	export default {
		components: {
			goodlist,
			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:'',
				anchor_time_id:"",
				dingyuenum:[]
			}
		},
		onLoad(options) {
			this.zhiboid = options.zhiboid;
			this.anchor_time_id=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: {
			// 直播详情
			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
			
				}).catch(err => {
					console.log(err)
				})
			},
			// 查看更多
			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()
			},
			
			// 订阅直播
			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/getAnchorTimeGoods"
				let param = {
					anchor_time_id: that.anchor_time_id,
					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
								}
							}
						})
						
					})
				}).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;
					// this.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.goodindex = index;
				this.goodparindex=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.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;
					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)
				}
			},
			// 进入链接页面
			entergood(item){
				uni.navigateTo({
					url:"/pages/xinyuan/goodlianjie?code="+item.code
				})
			}
		}

	}
</script>

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

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

	.tailzhibo {
		font-size: 28rpx
	}

	.want {
		margin-top: 0;
		padding-top: 20rpx
	}
	.zhubokind {
		background: #fff;
	}
</style>