<template>
	<view class="classlist">
		<!-- 
		有图片的情况：图片加载出来之后，我们就要取消这个动画
		没有图片的话：我们也不能要这个加载动画，然后还要显示“没有更多了
		刚进入页面时，noData是false
		classList.length也是0（转换传给你false）
		然后请求完之后，根据请求的内容当中有没有数据，才改变noData的值
		
		重点是页面执行的顺序问题。有疑惑就思考这个
		
		noData原本是false，有数据之后就变成了true'”
		
		
		 -->
		<view class="loadingLayout" v-if="!classList.length && !noData">
			<uni-load-more  status="loading"></uni-load-more>
		</view>

		<view class="content">
			
			<navigator :url="'/pages/preview/preview?id=' + item._id" class="item" 
				v-for="item in classList"
				:key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		
		
		<!-- 避免出现两个加载框的情况，需要考虑这个v-if的条件
 classList有值  或者  没有更多数据了（noData变成true） 之后，这个框   才可以出现
		 所以是或者关系  用  ||(或)  -->
		
		 
		 <!--
		 刚进入页面时，noData是false
		 classList.length也是0（转换传给你false）
		 然后请求完之后，根据请求的内容当中有没有数据，才改变noData的值
		 
		 重点是页面执行的顺序问题。有疑惑就思考这个
		 
		 没有数据noData就变成了true显示“noMore”，
		 有数据noDatashi false显示“loading” -->
<!-- 		<view class="loadingLayout" v-if="classList.length || noData">
			<uni-load-more :status="noData?'noMore':'loading'"> </uni-load-more>
		</view> -->
		
		<!-- 或  表示  现在的页面有数据，但是点击的另一个标签没有数据 -->
		<view class="loadingLayout bottom" v-if="classList.length || noData">
			<uni-load-more :status="noData?'noMore':'loading'"> </uni-load-more>
			<!-- <zero-loading type="sword" position="absolute"></zero-loading> -->
			
		</view>
		 
		 
		 <!-- 程序使用时增加安全高度，防止被home键挡住，提高用户使用 -->
		<view class="safe-area-inset-bottom"></view>
		
		
	</view>
</template>

<script setup>
import {ref} from "vue"
import {apiGetClassList,apiGetHistoryList} from "@/api/apis.js"
import {onLoad,onUnload,onReachBottom,onPullDownRefresh} from "@dcloudio/uni-app"
// import {zero-loading} from "@/uni_modeules"

import {onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"
import { gotoHome } from "../../utils/common"

const classList = ref([])
const noData = ref(false)
//为了方便后期传入参数，将queryParams方面外面，要加属性的话直接一个  点方法（.） 就可以了

//定义data参数
const queryParams = {
	pageNum:1,
	pageSize:12
}

let pageName;

//onLoad可以接收上个页面传入的参数
onLoad((e)=>{
	// console.log(e);
	//这里的type联系的是user页面的"我的下载""我的评分"这两个页面 
	let {id=null,name=null,type=null} =e;
	// id是必定有的,但是这里的type是只有user页面的"我的下载""我的评分"传进来的
	
	//如果页面没有传入id的话，让让其返回主页面去
	// if(!id){
	// 	return gotoHome();
	// }
	
	// 如果上个页面传入的东西包含id的话,就给queryParams加一个id属性,另其等于上个页面传入的id
	// 除了这两个判断外,其他东西都是不需要改变的
	
	if(id){
		//给queryParams加一个id属性
		queryParams.id = id
	}
	if(type){
		// 给查询参数queryParams添加一个type属性,令其等于这个其他页面传入的type(就是  download  或者  score )
		queryParams.type = type
	}
	
	
	pageName = name

	// console.log(id,name);
	
	// 传入名字是为了动态改变导航栏标题
	uni.setNavigationBarTitle({
		title:name
	})
	getClassList();
})

//onUnload表示的是撤销页面时需要做的事情。撤销当前看的页面，就remove掉缓存。提高性能
onUnload(() =>{
	uni.removeStorageSync("storgClassList")
})


//下拉刷新
// onPullDownRefresh(()=>{
// 	queryParams.pageNum++;
// 	// getClassList();
// 	apiGetClassList({
// 		classid:queryParams.id,
// 		pageNum:queryParams.pageNum,
// 		pageSize:queryParams.pageSize
// 		// classid:"6524ace7213929cbcee72e4d"
// 	}).then(res =>{
// 		if (res.data.errCode === 0) {
// 		  // 将新数据放在原有数据的前面（最新的内容在顶部）
// 		  //这里res就是res，图片是存在res.data.data里面，与下面的用res接收Promise对象是不一样的
// 		  classList.value = [...res.data.data, ...classList.value]
		  
// 		  // 显示成功提示
// 		  uni.showToast({
// 			title: "刷新成功",
// 			icon: "success"
// 		  })
// 		} else {
// 		  uni.showToast({
// 			title: res.data.errMsg,
// 			icon: "none"
// 		  })
// 		}
// 	  }).catch(err => {
// 		uni.showToast({
// 		  title: "刷新失败",
// 		  icon: "none"
// 		})
// 	  }).finally(() => {
// 		// 停止下拉刷新动画
// 		uni.stopPullDownRefresh()
// 	  })
// })

//触底刷新的时候需要加载新的图片出来，因此需要传入一个新的参数pageNum
onReachBottom(()=>{
	//如果后面没有数据了，再触底就不发送网络请求了
	if(noData.value){
		return
	}
	queryParams.pageNum++;
	getClassList();
	// console.log(res);
	// <uni-load-more :status="more"/>
	
})

const getClassList = async ()=>{
	//需要先在外面声明一个res
	let res;
	//id参数由上面的queryParams.id提供,如果有id就进行有id的操作
	if(queryParams.id){
		res = await apiGetClassList({
			// queryParams
			classid:queryParams.id,
			pageNum:queryParams.pageNum,
			pageSize:queryParams.pageSize
			// classid:"6524ace7213929cbcee72e4d"
		});
	}

	
	
	//type参数由上面的queryParams.type提供,如果有type,就进行有type的操作
	if(queryParams.type){
		res = await apiGetHistoryList({
			// queryParams
			type:queryParams.type,
			pageNum:queryParams.pageNum,
			pageSize:queryParams.pageSize
		});
	}
	
	classList.value = [...classList.value,...res.data]
	
	//比较发送的长度  和  返回数据的长度。如果原来的大于发送来的，说明后面没数据了，所以将
	if(queryParams.pageSize > res.data.length){
		noData.value = true
	}

	//将数据保存到缓存里面
	uni.setStorageSync("storgClassList",classList.value)

	// console.log(res);
	
}


//分享给好友
onShareAppMessage((e)=>{
	//分享这里是需要有一个  “return” 的
	
	//在上面的onLoad中，已经将列表的id赋给了queryParams的id属性
	return{
		title:"hzb壁纸-"+pageName,
		// 必须传递id进去，否则进不去内部页面
		path:"/pages/classlist/classlist?id="+queryParams.id+"&name="+pageName
	}
})

//分享到朋友圈
onShareTimeline(()=>{
	return{
		// 标题
		title:"hzb壁纸~~~",
		// 分享时候的图片地址。可以本地也可以网络图
		// imageUrl:"/static/images/logo2.jpg"
		//要想看朋友圈这个，需要带的query参数
		query:"id="+queryParams.id+"&name="+pageName
	}
})





</script>

<style lang="scss" scoped>
.classlist{
	.content{
		display: grid;
		// position: relative;
		grid-template-columns: repeat(3,1fr);
		gap: 5rpx;
		padding: 5rpx;
		.item{
			// 没有加高度的话没有效果
			height:440rpx ;
			image{
				width: 100%;
				height: 100%;
				//保证图片之间的空格是一致的。不然你行级块元素有空格
				display: block;
			}
		}


	}
}
</style>
