<template>
	<view class="container">
		<view class="minetop flexone">
			<view class="minetopleft">
				<image src="../../static/zhuboimg.png" mode="" v-if="userinfo==''"></image>
				<image :src="userinfo.avatar" mode="" v-else></image>
			</view>
			<button class="minename" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" v-if="userinfo==''">请先登录</button>
			<view class="minename" v-else>{{userinfo.nickname}}</view>
		</view>
		<view class="tixinglist flextwo">
			<view class="tixinglistitem" @click="tabclick(1)">
				<image src="../../static/kaishou.png" mode="" class="kaiimg"></image>
				<view class='kainame'>即将开售</view>
			</view>
			<view class="tixinglistitem" @click="tabclick(2)">
				<image src="../../static/jitixing.png" mode="" class="kaiimg"></image>
				<view class='kainame'>累计提醒</view>
			</view>
			<view class="tixinglistitem" @click="tabclick(3)">
				<image src="../../static/guanzhu.png" mode="" class="kaiimg"></image>
				<view class='kainame'>关注主播</view>
			</view>
			<view class="tixinglistitem" @click="tabclick(4)">
				<image src="../../static/xinyuandan.png" mode="" class="kaiimg"></image>
				<view class='kainame'>心愿商品</view>
			</view>
		</view>
		<view class="nodata" v-if="listshilist.length==0">暂无数据</view>
		<view v-else>
			<!-- 即将开售 -->
			<view class="kaishoulist" v-if="showclick==1">
				<view class="want flextwo">
					<view class="wantleft flexone">
						<image src="../../static/jikaishou.png" mode="" class="likeimg"></image>
						即将开售
					</view>
				</view>
				<goodlistone :listshilist="listshilist" :mine="1" @litixing="litixing" ></goodlistone>
			</view>
			<!-- 累计提醒 -->
			<view class="kaishoulist" v-if="showclick==2">
				<view class="want flextwo">
					<view class="wantleft flexone">
						<image src="../../static/jikaishou.png" mode="" class="likeimg"></image>
						累计提醒
					</view>
				</view>
				<leiji :listshilist="listshilist" @tixing="tixing"></leiji>
			</view>
			<!-- 关注主播 -->
			<view class="leiji" v-if="showclick==3">
				<view class="want flextwo">
					<view class="wantleft flexone">
						<image src="../../static/guaznhuzhu.png" mode="" class="likeimg"></image>
						关注主播
					</view>
				</view>
				<view class='leijiitem flextwo' v-for="(item,index) in listshilist" :key="index">
					<view class="leijiitemleft flexone">
						<image :src="item.avatar" mode="" class="leijiimg"></image>
						<view class="lejibox">
							<view class="lejiname">{{item.name}}</view>
							<view class='lejiatten' v-if="item.anchor_time!=null">{{item.anchor_time.title}}</view>
						</view>
					</view>
					<view class="canceldingyuebtn" @click="cancelzhu(index,item.id)">取消订阅</view>
				</view>
			</view>
			<!-- 心愿品类 -->
			<view class="leiji" v-if="showclick==4">
				<view class="want flextwo">
					<view class="wantleft flexone">
						<image src="../../static/xinyuangood.png" mode="" class="likeimg"></image>
						心愿品类
					</view>
				</view>
				<view class='leijiitem flextwo' v-for="(item,index) in listshilist" :key="index">
					<view class="leijiitemleft flexone">
						<image :src="item.image" mode="" class="leijiimg"></image>
						<view class="lejibox">
							<view class="lejiname">{{item.name}}</view>
						</view>
					</view>
					<view class="canceldingyuebtn" @click="cancelxin(index,item.id)">取消订阅</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	import goodlistone from "../../compontent/goodlistone.vue"
	import leiji from "../../compontent/leiji.vue"
	export default {
		components: {
			goodlistone,
			leiji
		},
		data() {
			return {
				showclick: 1,
				openid: "",
				session_key: '',
				encrypted_data: '',
				iv: "",
				userinfo: '', //用户信息
				page: 1,
				listshilist: [],
				showpull: true,
				dingyuenumk:[]
			}
		},
		onLoad() {},
		onShow() {
			this.get_sessionkey();
			if (uni.getStorageSync("token")) {
				this.getuserinfo()
			}
			this.listshilist = [];
			this.dingyuenumk=[]
			this.page = 1;
			this.getkaishou()
		},
		onReachBottom() {
			that = this
			let newpage = that.page;
			newpage++
			that.page = newpage;
			if (that.showpull == true) {
				console.log(38493409)
				Toast('没有更多了~')
			} else {
				if (that.showclick == 1 || that.showclick == 2) {
					that.getkaishou()
				}

			}
		},
		methods: {
			//子元素传来的值
			tixing(e) {
				this.listshilist = e
			},
			litixing(e){
				console.log(e)
				this.listshilist = e
			},
			// 获取即将开售和累计提醒
			getkaishou() {
				let that = this;
				let url = "user/getUserGoods";
				let param = {
					type: that.showclick,
					page: that.page,
					per_page: 20
				}
				console.log('参数', param)
				app.post(url, param, "post").then(r => {
					console.log('即将开售', r)
					that.listshilist = that.listshilist.concat(r.data);
					if (that.page > 1) {
						if (r.data.length == 0) {
							that.showpull = false
						}
					}
					that.listshilist.forEach(function(value,index,array){
						if(value.user_goods==1){
								if(that.dingyuenumk.indexOf(value.id)==-1){
									that.dingyuenumk.push(value.id);
									that.dingyuenumk=that.dingyuenumk
							}
						}
					})
					that.listshilist = that.listshilist;
					that.$forceUpdate();
					console.log(that.listshilist)

				}).catch(err => {
					console.log(err)
				})
			},
			// 获取主播列表
			getzhubolist() {
				let that = this;
				let url = "user/getAnchor";
				let param = {

					page: that.page,
					per_page: 20
				}
				console.log('参数', param)
				app.post(url, param, "post").then(r => {
					console.log('主播列表', r)
					that.listshilist = that.listshilist.concat(r.data);
					if (that.page > 1) {
						if (r.data.length == 0) {
							that.showpull = false
						}
					}
					

				}).catch(err => {
					console.log(err)
				})
			},
			// 心愿商品
			getxinyuan() {
				let that = this;
				let url = "user/getCategory";
				let param = {

					page: that.page,
					per_page: 20
				}
				console.log('参数', param)
				app.post(url, param, "post").then(r => {
					console.log('心愿商品', r)
					that.listshilist = that.listshilist.concat(r.data);
					if (that.page > 1) {
						if (r.data.length == 0) {
							that.showpull = false
						}
					}

				}).catch(err => {
					console.log(err)
				})
			},
			// 取消订阅主播
			cancelzhu(index, id) {
				let that = this;
				var url = "anchor/addUserAnchor"
				var param = {
					anchor_id: id
				}
				app.post(url, param, "post").then(res => {
					console.log('取消订阅', res)
					uni.showToast({
						title: "取消订阅成功",
						icon: "none"
					})
					console.log(index)
					let newlishsilist = that.listshilist;
					newlishsilist.splice(index, 1)
					that.listshilist = newlishsilist;
					that.$forceUpdate()
					

				}).catch(err => {
					console.log(err)
				})
			},
			// 取消心愿商品
			cancelxin(index,id){
				let that = this;
				var url = "category/addUserCate"
				var param = {
					cate_id: id
				}
				app.post(url, param, "post").then(res => {
					console.log('取消订阅', res)
					uni.showToast({
						title: "取消订阅成功",
						icon: "none"
					})
					console.log(index)
					let newlishsilist = that.listshilist;
					newlishsilist.splice(index, 1)
					that.listshilist = newlishsilist;
					that.$forceUpdate()
					
				
				}).catch(err => {
					console.log(err)
				})
			},
			tabclick(id) {
				this.showclick = id;
				this.page = 1;
				this.listshilist = [];
				this.dingyuenumk=[]
				if (this.showclick == 1 || this.showclick == 2) {
					this.getkaishou()
				} else if (this.showclick == 3) {
					if (uni.getStorageSync("token")) {
						this.getzhubolist()
					}
				} else if (this.showclick == 4) {
					this.getxinyuan()
				}


			},

			get_sessionkey() {
				let that = this;
				uni.login({
					provider: "weixin",
					success(r) {
						console.log(r)
						let url = "wechat/getSessionKey";
						app.post(url, {
							code: r.code
						}, "post").then(r => {
							console.log(r)
							that.session_key = r.session_key;
							that.openid = r.openid;

						}).catch(err => {})

					}
				})


			},
			// 微信登录
			wxGetUserInfo(e) {
				console.log(e)
				this.encrypted_data = e.detail.encryptedData
				this.iv = e.detail.iv
				this.login()
			},
			login() {
				let that = this;
				console.log('34898498')
				uni.login({
					provider: "weixin",
					success(r) {
						console.log(r, 6666)
						let url = "wechat/login";
						let param = {
							openid: that.openid,
							session_key: that.session_key,
							encrypted_data: that.encrypted_data,
							iv: that.iv,

						}
						console.log('参数', param)
						app.post(url, param, "post").then(r => {
							console.log('登陆成功', r);

							uni.setStorageSync("token", r.token)
							that.getuserinfo()

							// that.getuserinfo()

							// uni.setStorageSync('openid', r.openid);
							// uni.setStorageSync('session_key', r.session_key);
						}).catch(err => {
							console.log(err)
						})

					}
				})
			},
			// 获取用户信息
			getuserinfo() {
				let that = this;
				let url = "user/getUserInfo";
				let param = {

				}
				console.log('参数', param)
				app.post(url, param, "post").then(r => {
					console.log('用户信息', r)
					that.userinfo = r


					// that.getuserinfo()

					// uni.setStorageSync('openid', r.openid);
					// uni.setStorageSync('session_key', r.session_key);
				}).catch(err => {
					console.log(err)
				})
			}

		}

	}
</script>

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

	page {
		background: #f5f5f5;
	}

	.want {
		margin-top: 0
	}

	button {
		margin: 0px;
		padding: 0px;
		/*自定义边框*/
		border: none;
		/*消除默认点击蓝色边框效果*/
		outline: none;
		background: transparent;

	}

	button::after {
		border: none;
		outline: none;
		background: transparent;

	}

	button:focus {
		border: 0 none;
		outline: none;
		background: transparent;
		box-shadow: none;
	}

	button:active {
		border: 0 none;
		outline: none;
		background: transparent;
		box-shadow: none;
	}

	.register {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 5;
	}
</style>