<template>
	<view class="homeLayout pageBg">
		
		<custom-nav-bar title="推荐"></custom-nav-bar>
		
		<view class="banner">
			<swiper :indicator-dots="true" :circular="true"
			indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff"
			:autoplay="true">
				<swiper-item v-for="item in bannerList" :key="item._id">
					<!-- 这是跳转到小程序时的情况 -->
					 <!-- 
					  需要添加  target  和  app-id 
					  小程序的url时这样的：   url: "/pages/index/index"
					  是其他小程序的主页
					 -->
					<navigator v-if="item.target == 'miniProgram'"
					class="like"
					:url="item.url" 
					target="miniProgram"
					:app-id="item.appid"
					>
						<image :src="item.picurl" mode="aspectFill"></image>
					</navigator>
					
<!-- 这里的url是这种形式的：  url: "id=6524adaffe975f09c72ce896&name=色彩艺术"-->
					<!-- 这是跳转到“分类”页面的情况 -->
					<navigator v-else
					:url="`/pages/classlist/classlist?${item.url}`" 
					class="like">
						<image :src="item.picurl" mode="aspectFill"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		
		
		<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper :vertical="true" :autoplay="true" interval="1500"duration="300":circular="true">
					<swiper-item v-for="item in noticeList" :key="item._id">
						<!-- 这里需要传入id，表明是哪个具体的公告 -->
						<navigator :url="'/pages/notice/detail?id='+item._id">
							{{item.title}}
						</navigator>
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="forward" size="20" color="#28b389"></uni-icons>
			</view>
		</view>
		
		
		
		<view class="select">
			<common-title>
				<template #name>每日推荐</template>
				<template #custom>
					<view class="date">
						<uni-icons type="calendar" size="20" color="#28b389"></uni-icons>
						<view class="text">
							<uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
						</view>
						
					</view>
				</template>
			</common-title>
			<view class="content">
				<scroll-view :scroll-x="true" >
					<view class="box" v-for="item in randomList" :key="item._id" 
					@click="goPreview(item._id)">
						<!-- mode = aspectFill 显示最短边 -->
						<image :src="item.smallPicurl" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="theme">
			<common-title>
				<template #name>专题精选</template>
				<template #custom>
					<!-- 
						注意，这里跳转的是tabBar页面。
						因此需要搭配open-type = “switchbar/relaunch”
					-->
					<navigator 
					url="/pages/classify/classify" 
					class="more"
					open-type="reLaunch"
					>More+</navigator>  
				</template>
			</common-title>
			
			<view class="content">
				<theme-item :isMore="false" v-for="item in classifyList" 
				:key="item._id"
				:item="item"></theme-item>
				<theme-item :isMore="true"></theme-item>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import {ref} from "vue"
import {onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"
import {apiGetBanner,apiGetDayRandom,apiGetNotice,apiGetClassify} from "@/api/apis.js"
const bannerList = ref([])
const randomList = ref([])
const noticeList = ref([])
const classifyList = ref([])
// 获取Banner的图片
const getBanner = async ()=>{
	//apiGetBanner()返回的结果是一个Promise对象,需要用await接收
	let res = await apiGetBanner();
	// console.log(res);
	bannerList.value = res.data
}

// const getBanner = async () => {
//     try {
//         let res = await apiGetBanner();
// 		console.log(res);
//         if (res.data.errCode === 0) {
//             bannerList.value = res.data.data;
//         } else {
//             handleApiError(res.data.errMsg, '获取 Banner 失败');
//         }
//     } catch (error) {
//         handleApiError(error, '获取 Banner 出现异常');
//     }
// };


// 获取每日推荐的内容
const getDayRandom = async ()=>{
	let res = await apiGetDayRandom();
	// console.log(res);
	randomList.value = res.data
}


// const getDayRandom = async () => {
//     try {
//         let res = await apiGetDayRandom();
// 		console.log(res);
//         if (res.data.errCode === 0) {
//             randomList.value = res.data.data;
//         } else {
//             console.error('获取每日推荐失败:', res.data.errMsg);
//         }
//     } catch (error) {
//         console.error('获取每日推荐出现异常:', error);
//     }
// };


//获取公告的内容
const getNotice = async ()=>{
	let res = await apiGetNotice({select:true});
	// console.log(res);
	noticeList.value = res.data
}

// const getNotice = async () => {
//     try {
//         let res = await apiGetNotice();
// 		console.log(res);
//         if (res.data.errCode === 0) {
//             noticeList.value = res.data;
//         } else {
//             console.error('获取公告失败:', res.data.errMsg);
//         }
//     } catch (error) {
//         console.error('获取公告出现异常:', error);
//     }
// };
	
	
//预览大图
const goPreview = (id)=>{
	//如果没有加下面这个东西，就会导致“每日推荐”的图片是看不了的。因为没有缓存.要缓存的数据randomList列表
	uni.setStorageSync("storgClassList",randomList.value)
	uni.navigateTo({
		url:"/pages/preview/preview?id="+id
	})

}

//分类列表内容
const getClassify = async ()=>{
	let res = await apiGetClassify({
		select:true
	});
	// console.log(res);
	classifyList.value = res.data
}

//分享给好友
onShareAppMessage((e)=>{
	//分享这里是需要有一个  “return” 的
	return{
		title:"hzb壁纸",
		path:"/pages/index/index"
	}
})

//分享到朋友圈
onShareTimeline(()=>{
	return{
		// 标题
		title:"hzb壁纸~~~",
		// 分享时候的图片地址。可以本地也可以网络图
		imageUrl:"/static/images/logo2.jpg"
	}
})

getBanner();
getDayRandom();
getNotice();
getClassify();
</script>

<style lang="scss" scoped>
.homeLayout{
	.banner{
		width: 750rpx;
		padding: 30rpx 0;
		
		swiper{
			width: 750rpx;
			height:340rpx;
			swiper-item{
				width:100%;
				height: 100%;
				padding: 0 30rpx;
				.like{
					width: 100%;
					height: 100%;
					image{
						width: 100%;
						height: 100%;
						border-radius:10rpx;
					}
				}

			}
		}
	}
	
	.notice{
		//使整体居中的方式
		// 这个宽度使提前算好的，因为你左右两边都是30rpx的间距
		//整个大小是750，750 —— 60 = 690
		width: 690rpx;
		margin: 0 auto;
		
		height: 80rpx;
		background: #f9f9f9;

		//让文字显示一行
		line-height: 80rpx;
		//边框的弧度与高度一样就好看
		border-radius: 80rpx;
		//使内容位于同一行
		display: flex;
		.left{
			//140rpx宽度的居中样式好看，100rpx的居中样式不行
			width: 140rpx;
			//  细节处理  使这部分内容居中处理
			display: flex;
			align-items: center;
			justify-content: center;
			//细节处理  控制一下文字的样式
			.text{
				color: $text-font-color-1;
				// 控制文字大小
				font-size: 28rpx;
				//控制文字的加粗程度
				font-weight: 600;
			}
		}
		.center{
			// “flex：1”   的意思是自动填充完剩下的内容
			flex: 1;
			swiper{
				//继承父级的百分百，这样这个swiper只会在框框的高度里面跳，不会跃出高度
				height: 100%;
				swiper-item{
					//继承父级的高度
					height: 100%;
					//细节处理  控制文字的大小
					font-size: 30rpx;
					color: #666;
					//细节处理    文字太多了怎么办？  -->  不能换行、还要有省略号
					overflow: hidden;
					white-space: nowrap;
					//细节处理  文字超出部分用省略号
					text-overflow: ellipsis;
				}
			}
		}
		.right{
			width: 70rpx;
			//细节处理  让内容居中
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.select{
		padding-top: 50rpx;
		.date{
			color: $brand-theme-color;
			display: flex;
			align-items: center;
		}
		.content{
			//750-30==720
			width: 720rpx;
			margin-left: 30rpx;
			margin-top:30rpx;
			scroll-view{
				white-space: nowrap;
				.box{
					display: inline-block;
					//宽高比大约是1：2.2左右
					width: 200rpx;
					height: 430rpx;
					//如果你不给图片添加下面的宽度和高度，你这个margin-right是没用用的
					margin-right: 15rpx;
					image{
						//继承父级宽度和高度的100%
						width: 100%;
						height: 100%;
					}
				}
				.box:last-child{
					margin-right: 30rpx;
				}
			}
		}
	}
	.theme{
		padding: 50rpx 0;
		.more{
			font-size: 32rpx;
			color: #888;
		}
		.content{
			margin-top:30rpx;
			padding: 0 30rpx;
			display: grid;
			grid-template-columns: repeat(3,1fr);
			gap: 15rpx;
		}
	}

	
	
}
</style>
