<template>
	<view>
		<!-- 状态栏 -->
		<status-nav 
		:ifTitle="true" 
		:ifReturn="true"></status-nav>
		<view :style="{paddingTop: statusBarHeight+110+'rpx'}">
			<view style="position: sticky;z-index: 10;" :style="{top: statusBarHeight+110+'rpx'}">
				<swiper-tab id="tab" :list="type" v-model="active" @input="clickTab" itemColor="#ff0000" lineColor="#ff0000">
					<!-- 自定义tabs样式 -->
					<!-- <view slot="title">其其</view> -->
				</swiper-tab>
			</view>
			<swiper class="swiper-page" :style="{height:swiperHeight-(statusBarHeight+110)+'px'}" :current="current" @change="swiperChange">
				<swiper-item v-for="item in type">
					<view class="swiper-item">{{item.title}}</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 底部tab -->
		<foot-tab :titleList="titleList" :imgList="imgList"></foot-tab> 
	</view>
</template>

<script>
	import swiperTab from '@/components/swiper-tab/swiper-tab.vue'
	import swiperPu from '@/components/swiper-pu.vue';
	import wfallsFlow from '@/components/wfalls-flow'
	import {collectionEV,cancleCollectionEV,checkBanner} from '@/jsFile/publicAPI.js';
	export default {
		components:{
			swiperPu,
			wfallsFlow
		},
		data() {
			return {
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
				statusHNH:uni.getStorageSync('customBar'),
				type: [{
					title: '全部'
				}, {
					title: '待付款'
				}, {
					title: '待发货'
				}, {
					title: '待收货'
				}, {
					title: '已完成'
				}, {
					title: '已取消'
				}],
				active: 0,
				current:0,
				swiperHeight:uni.getSystemInfoSync().windowHeight,
				searchVal:'',//输入框的值
				publicColor:'',//主题颜色
				gonggList:[//九宫格列表
				],
				fwList:[//热搜关键词
				],
				kcurrent:0,//默认选中第一项
				ktList:[//恒美小课堂
				],
				dataList:[//小课堂数据列表
				],
				showTop:false,
				newCurrent:0,
				page:1,
				size:10,
				total:'',//总数
				isZanw:true,
				course_id:0,
				isLoading:false,
				isShowT:true,
				titleList:[],//底部导航文字
				imgList:[],//底部导航图标
				gaoone:{},
				gaotwo:{},
				gaothree:{},
				isNet:true,
				wuNet:'当前无网络连接',
				refTime:'',
				reNum:0,
				bannerList:[],//轮播图
				isAutoPlay:false,
				jieDuan:false,
				isNewRenderDone:false ,//锁的作用
				isQuan:uni.getStorageSync('isQuan'),
				quanImg:uni.getStorageSync('quanImg'),
			}
		},
		onPageScroll(e) {
		    e.scrollTop > 360 ? this.showTop = true : this.showTop = false
		},
		onReachBottom() {//触底事件
			if(this.total!=this.dataList.length){
				this.page++
				this.checkKT()//调用自主预约列表事件
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
				this.isZanw = false
			}
		},
		onHide() {
			this.isAutoPlay = false;
		},
		onUnload() {
			this.isAutoPlay = false;
		},
		onReady() {
			// 获取ID为tab元素的信息
			uni.createSelectorQuery().in(this).select('#tab').boundingClientRect().exec(rect => {
				this.swiperHeight = this.swiperHeight - rect[0].height
			});
		},
		onShow() {
			uni.setStorageSync('firstTime',1);
			this.checkNet()
			this.$toolAll.tools.isLogin()
			let maiOjb = {
				e:6,//进入首页
				t:new Date().getTime()//当前时间戳
			}
			this.$toolAll.tools.maiDian(maiOjb)
			if(uni.getStorageSync('token')!='' && uni.getStorageSync('chu')=='') {
				this.$toolAll.tools.daoTime()
				uni.setStorageSync('chu',1)
			}
			this.checkKT()//恒美课堂列表
			this.isAutoPlay = true;
		},
		onShareAppMessage(res) {
		    var ya = this;
			let maiOjb = {
				e:6,//内容分享
				t:new Date().getTime()//当前时间戳
			}
			this.$toolAll.tools.maiDian(maiOjb)
			var shareObj = {
		　　　　	title: '成都恒美毛发', // 默认是小程序的名称(可以写slogan等)
		　　　　	path: `/pages/tabbar/pagehome/pagehome?invite_code=${uni.getStorageSync('invite_code')}` // 默认是当前页面，必须是以‘/’开头的完整路径
		　	};
		　　return shareObj;
		},
		onLoad(options) {
			if(options.source_code!='' && options.source_code!=undefined){
				this.loginEv(options);
			} else if(options.q!=undefined){
				// 解码一：unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")；
				// 解码二：decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1")
				let str = unescape(options.q);
				// console.log(str);
				let len1 = str.indexOf('invite_code=');
				let len2 = str.indexOf('channel=');
				let len3 = str.indexOf('source_code=');
				let newInvite = '';
				let newChanel = '';
				let newsource_code = '';
				if(len1!=-1) newInvite = str.slice((len1+12),(len1+12+32));
				if(len2!=-1) newChanel = str.slice((len2+8),(len2+8+8));
				if(len3!=-1) newsource_code = str.slice((len3+12),(len3+12+32));
				uni.login({
					provider: 'weixin',
					success: (res)=> {
						var params = {
							code:res.code,
							invite_code:newInvite,//用户邀请码
							channel:newChanel,
							source_code:newsource_code
						}
						// console.log(params);
						this.$requst.post('user/login',params).then(res => {console.log('调用成功');},error => {})
					},
				});
			} else if(options.invite_code!='' && options.invite_code!=undefined){
				this.loginEv(options);
			}
			const query = wx.createSelectorQuery()
			query.select('.statusHNH').boundingClientRect((rect) => {
				// log('状态栏+标题栏：',rect.height);
				uni.setStorageSync('statusHNH',rect.height)
				this.statusHNH = rect.height
			}).exec()
			this.checkBCate();
			this.checkKey();
			this.checkSwi();//查询轮播图
			// this.checkBanner()//调用轮播图查询事件
			this.$toolAll.tools.buriedPointAll();//查询需要埋点的事件id
			// this.checkQ();
			setTimeout(()=>{
				this.quanImg= uni.getStorageSync('quanImg');
				this.quanId = uni.getStorageSync('quanId');
			},3000)
			this.checkUserInfo();
		},
		methods: {
			clickTab(index){
				this.current = index
			},
			swiperChange(e){
				this.active = e.detail.current
			},
			loginEv(option){
				console.log(option,'option');
				uni.login({
					provider: 'weixin',
					success: (res)=> {
						var params = {
							code:res.code,
							invite_code:option.invite_code || '',//用户邀请码
							source_code:option.source_code || '',
							channel:option.channel || ''
						}
						this.$requst.post('user/login',params).then(res => {console.log('调用成功');},error => {})
					},
				});
			},
			checkUserInfo(){
				this.$requst.post('user/info').then(res=>{
					if(res.code==0){
						if(res.data.phone_active!=0){
							uni.setStorageSync('phone_active',res.data.phone_active);
						}
					} else {
						this.$toolAll.tools.isLogin()
					}
				})
			},
			checkQ(){//查询优惠券
				this.$requst.post('user/home-coupon').then(res=>{
					if(res.code==0){
						if(res.data.has_coupon==1){
							this.isQuan = true;
							this.quanImg = this.$http + res.data.home_coupon.cover;
							this.quanId = res.data.home_coupon.id;
						}
					}
				})
			},
			recerveEv(){//领取优惠券
				this.$requst.post('user/get-coupon',{coupon_id:uni.getStorageSync('quanId')}).then(res=>{
					if(res.code==0){
						this.isQuan = false;
						this.$toolAll.tools.showToast('领取成功');
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pagesA/coupon/coupon'
							})
						},1000)
					}
					if(res.code==302){
						this.$toolAll.tools.showToast(res.msg);
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/login/login'
							})
						},1500)
					}
				})
			},
			closeEv(){
				this.isQuan = false;
				uni.setStorageSync('isQuan',false);
			},
			// 顶部轮播查询事件
			checkSwi(){
				checkBanner({position:'home-banner'}).then(res=>{
					if(res.code==0){
						if(res.data.length!=0){
							res.data.forEach(item=>{
								let isVideo = false
								if(item.type!='img') isVideo = true
								let banObj = {
									imgSrc:this.$http + item.src,
									url:item.url,
									isVideo:isVideo,
									poster:this.$http + item.src,
								}
								this.bannerList.push(banObj)
							})
						}
					}
				})
			},
			checkNet(){
				uni.getNetworkType({
					success: (res)=> {
						if(res.networkType=='none'){
							uni.setStorageSync('isNet',false)
							this.isNet = false
							if((this.reNum++)==5){
								clearInterval(this.refTime)
								this.wuNet = '刷新失败'
								this.reNum = 0
							}
							this.publicColor = uni.getStorageSync('publicColor')
						} else {
							uni.setStorageSync('isNet',true)
							this.isNet = true
							clearInterval(this.refTime)
							if(this.wuNet == '正在刷新...') {
								getCurrentPages()[getCurrentPages().length - 1].onLoad()
							}
						}
					}
				});
			},
			refresh(){
				this.wuNet = '正在刷新...'
				this.refTime = setInterval(()=>{
					this.checkNet()
				},1000)
			},
			bangd(){//绑定客服事件
				this.$requst.post('').then(res=>{log('绑定客服：',res);},error=>{})
			},
			tapChoose(index){//宫格下的，三张图点击事件
				if(!this.jieDuan){
					let isAuth = this.$toolAll.tools.returnAuth()
					if(!isAuth){
						let newUrl = ''
						if(index==0) newUrl = this.gaoone.url
						if(index==1) newUrl = this.gaotwo.url
						if(index==2) newUrl = this.gaothree.url
						uni.navigateTo({
							url:newUrl
						})
					} else this.jieDuan = true
				}
			},
			checkKey(){//查询热搜关键词事件
				this.$requst.get('index/hot-keywords').then(res=>{
					// log('关键词列表：',res);
					if(res.code==0){
						if(res.data.length!=0){
							res.data.forEach(item=>{
								let reObj = {title:item.keyword}
								this.fwList.push(reObj)
							})
						}
					}
				},error=>{})
			},
			checkBCate(){//查询底部事件、八宫格、
				this.$requst.post('index/mini-program-setting').then(res=>{
					// log('数据：',res);
					if(res.code==0){
						if(res.data.length!=0){
							if(res.data.recommend.length!=0){//宫格
								res.data.recommend.forEach(item=>{
									let bcObj = {
										src:this.$http + item.icon,
										url:item.link,
										title:item.name
									}
									this.gonggList.push(bcObj)
								})
								this.gonggList.push({src:this.$http + res.data.recommendMore,title:'更多'})
							}
							if(res.data.footBar.length!=0){//底部导航
								res.data.footBar.forEach(item=>{
									let newName = item.name
									let newObj = {
										iconPath:this.$http + item.icon[0],
										selectedIconPath:this.$http + item.icon[1],
									}
									if(item.key=="home"){
										this.imgList[0] = newObj
										this.titleList[0] = newName
									}
									if(item.key=="category"){
										this.imgList[1] = newObj
										this.titleList[1] = newName
									}
									if(item.key=="service"){
										this.imgList[2] = newObj
										this.titleList[2] = newName
									}
									if(item.key=="shop"){
										this.imgList[3] = newObj
										this.titleList[3] = newName
									}
									if(item.key=="my"){
										this.imgList[4] = newObj
										this.titleList[4] = newName
									}
								})
								uni.setStorageSync('footTitle',this.titleList)
								uni.setStorageSync('footimg',this.imgList)
							}
							if(res.data.ad.length!=0){//三张图
								this.gaoone = {
									imgSrc:this.$http + res.data.ad[0].img,
									url:res.data.ad[0].link,
								}
								this.gaotwo = {
									imgSrc:this.$http + res.data.ad[1].img,
									url:res.data.ad[1].link,
								}
								this.gaothree = {
									imgSrc:this.$http + res.data.ad[2].img,
									url:res.data.ad[2].link,
								}
							}
							// this.publicColor = res.data.mainColor
							this.publicColor = uni.getStorageSync('publicColor')
						}
					}
				},error=>{})
			},
			checkKT(){//查询恒美小课堂
				let parmas = {
					course_id:this.course_id,//课堂ID
					page:this.page,
					size:this.size
				}
				this.$requst.post('archives/course',parmas).then(res=>{
					// log('恒美小课堂列表：',res);
					if(res.code==0){
						// 课堂栏目
						if(res.data.course.length!=0){
							this.ktList = []
							res.data.course.forEach(item=>{
								let lObj = {
									id:item.id,
									title:item.title,
									active:item.active
								}
								this.ktList.push(lObj)
							})
						}
						// 课堂列表
						if(this.page==1) this.dataList = []
						if(res.data.list.list.length!=0){
							this.total = res.data.list.total
							res.data.list.list.forEach(item=>{
								let fabImg = '';
								if(item.published_headimgurl!='' && item.published_headimgurl!=null) fabImg = this.$http + item.published_headimgurl;
								let ktObj = {
									category_id:item.category_id,//栏目ID
									id:item.id,
									is_collected:item.is_collected,//是否已收藏
									collects:item.collects,//收藏数量
									views:item.views,//查看量
									main_img:this.$http + item.cover,//封面图
									video:this.$http + item.video,//视频地址
									title:item.title,//内容标题
									content:item.subtitle,//副标题
									head_img: fabImg || '/static/public/logo.png',//发布者头像
									name:item.published_by || '恒美植发',//发布者昵称
									isVideo:item.video.includes(".mp4")//是否是视频
								}
								this.dataList.push(ktObj)
							})
						}
						this.isLoading = true
					}
				},error=>{})
			},
			chooseLike(e){//收藏事件
				// console.log(this.dataList[e].is_collected);
				if(this.dataList[e].is_collected==0){
					this.dataList[e].is_collected = 1
					// 调用收藏事件
					collectionEV({action:'collect',archive_id:this.dataList[e].id})
				}
			},
			comfirmev(e){//确认取消收藏事件
				this.dataList[e].is_collected = 0
				this.$toolAll.tools.showToast('正在取消...','loading')
				// 调用取消收藏事件
				cancleCollectionEV({action:'collect',archive_id:this.dataList[e].id})	
			},
			// chooseLike(e){//收藏事件
			// 	// log(this.dataList[e].is_collected);
			// 	let active = ''
			// 	this.dataList.forEach((item,index)=>{
			// 		if(e==item.id){
			// 			active = index
			// 		}
			// 	})
			// 	if(this.dataList[active].is_collected==0){
			// 		this.dataList[active].is_collected = 1
			// 		// 调用收藏事件
			// 		collectionEV({action:'collect',archive_id:e})
			// 	}
			// },
			// comfirmev(e){//确认取消收藏事件
			// 	let active = ''
			// 	this.dataList.forEach((item,index)=>{
			// 		if(e==item.id){
			// 			active = index
			// 		}
			// 	})
			// 	this.dataList[active].is_collected = 0
			// 	this.$toolAll.tools.showToast('正在取消...','loading')
			// 	// 调用取消收藏事件
			// 	cancleCollectionEV({action:'collect',archive_id:e})	
			// },
			chooseGon(index){//宫格事件
				if(!this.jieDuan){
					let isAuth = this.$toolAll.tools.returnAuth()
					if(!isAuth){
						if(index==(this.gonggList.length-1)){
							uni.navigateTo({
								url:'/pages/tabbar/cate/cate'
							})
						} else {
							uni.navigateTo({url:this.gonggList[index].url})
						}
					} else this.jieDuan = true
				}
			},
			choosecateEv(e){//恒美小课堂选择事件
				// log('恒美小课堂：',e);
				this.newCurrent = e
				this.isZanw = true
				this.page = 1
				this.course_id = this.ktList[e].id
				this.checkKT()
			},
			backTop(){//回到顶部事件
			    uni.pageScrollTo({
			        scrollTop: 0,
			        duration: 300
			    });
			},
			searchEv(){//搜索事件
				// log(this.searchVal);
				if(!this.jieDuan){
					let isAuth = this.$toolAll.tools.returnAuth()
					if(!isAuth){
						uni.navigateTo({
							url:'/pagesB/searchPage/searchPage?keyWorld='+this.searchVal
						})
					} else this.jieDuan = true
				}
			},
			chooseReEv(index){
				if(!this.jieDuan){
					let isAuth = this.$toolAll.tools.returnAuth()
					if(!isAuth){
						uni.navigateTo({
							url:'/pagesB/searchPage/searchPage?keyWorld='+this.fwList[index].title
						})
					} else this.jieDuan = true
				}
			}
		}
	}
</script>

<style>

</style>
