<template>
	<view style="padding-bottom: 100rpx;">
		<!-- <view class="title flex align-center justify-center">
			<view class="title-box">
				<view class="title-box-title flex align-center justify-between">
					<view class="title-box-title-l">
						你已连续签到
						<text style="color: #ff7581;margin: 0 10rpx;">{{day}}</text>
						天
					</view>
					<view v-if="isQd" class="title-box-title-r flex align-center justify-center">
						今日已签到
					</view>
					<view v-else class="title-box-title-r flex align-center justify-center" @click="signIn()">
						立即签到
					</view>
				</view>
				<view class="title-box-tishi">
					签到领积分，新剧抢先看。连续签到7天领惊喜礼包
				</view>
				<view class="title-box-day flex align-center justify-center">
					<view class="title-box-day-item flex" v-for="(item,index) in numList" :key="index">
						<view>
							<view v-if="index == 0 && isErQd"
								class="title-box-day-item-num flex align-center justify-center"
								style="background-color: #ff7581;border: none;">
								<image src="../../static/images/index/qd_.png" mode="">
								</image>
							</view>
							<view v-else-if="index == 1 && isQd" style="background-color: #ff7581;border: none;"
								class="title-box-day-item-num flex align-center justify-center">
								<image src="../../static/images/index/qd_.png" mode="">
								</image>
							</view>
							<view v-else class="title-box-day-item-num flex align-center justify-center">
								<image src="../../static/images/index/qd.png" mode="">
								</image>
							</view>
							<view class="title-box-day-item-day">
								{{index==1?'今日':item}}
							</view>
						</view>
						<view class="title-box-day-item-lin" v-if="index < numList.length-1"></view>

					</view>
				</view>
			</view>
		</view> -->
		<view v-if="list.length>0" class="itemTitle flex align-center justify-center">
			<view class="itemTitle-box flex align-center justify-between">
				<view class="itemTitle-box-l">
					最近观看
				</view>
				<view class="itemTitle-box-r" @click="goNav('/me/jilu/record')">
					更多
				</view>
			</view>
		</view>
		<view v-if="list.length>0" class="zuijin flex align-center justify-center">
			<view class="zuijin-box flex justify-between">
				<view class="zuijin-box-item" @click="goCourse(item.courseId,item.courseDetailsId)"
					v-for="(item,index) in list" :key="index">
					<view class="zuijin-box-item-img">
						<image :src="item.titleImg" mode="aspectFill"></image>
						<view class="zuijin-box-item-img-t" v-if="item.courseDetailsName">
							{{item.courseDetailsName}}
						</view>
					</view>
					<view class="zuijin-box-item-txt flex align-center flex-wrap">
						<view class="zuijin-box-item-txt-t">
							{{item.title}}
						</view>
						<view class="zuijin-box-item-txt-l" v-if="item.courseLabel">
							{{item.courseLabel}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="zhuiju.length>0" class="itemTitle flex align-center justify-center">
			<view class="itemTitle-box flex align-center justify-between">
				<view class="itemTitle-box-l">
					我的追剧
				</view>
				<view class="itemTitle-box-r" @click="goNav('/me/jilu/histor')">
					更多
				</view>
			</view>
		</view>
		<view v-if="zhuiju.length>0" class="zuijin flex align-center justify-center">
			<view class="zuijin-box flex justify-between">
				<view @click="goCourse(item.courseId,item.courseDetailsId)" class="zuijin-box-item"
					v-for="(item,index) in zhuiju" :key="index">
					<view class="zuijin-box-item-img">
						<image :src="item.titleImg" mode="aspectFill"></image>
						<view class="zuijin-box-item-img-t" v-if="item.courseDetailsName">
							{{item.courseDetailsName}}
						</view>
					</view>
					<view class="zuijin-box-item-txt flex align-center flex-wrap">
						<view class="zuijin-box-item-txt-t">
							{{item.title}}
						</view>
						<view class="zuijin-box-item-txt-l" v-if="item.courseLabel">
							{{item.courseLabel}}
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import { isEmpty } from '../../utils/util';
import { $cache_chasingDrama} from '@/store/cashe.js'
	export default {
		data() {
			return {
				isErQd:  $cache_chasingDrama.isErQd|| false, //昨天是否签到
				isQd:  $cache_chasingDrama.isQd||false, //今日是否已签到
				day: $cache_chasingDrama.day|| 0, //签到天数
				numList: this.getThisWeekDates(),
				list:  $cache_chasingDrama.list||[],
				zhuiju: $cache_chasingDrama.zhuiju|| [],
			};
		},
		onLoad() {


		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.newLook()
				this.myVideo()
				this.myQianInfo()
			}
		},
		onPullDownRefresh() {
			$cache_chasingDrama.clear()
			this.newLook()
			this.myVideo()
			this.myQianInfo()
			uni.stopPullDownRefresh()
		},
		methods: {
			// 跳转资源详情
			goCourse(e, courseDetailsId) {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/me/detail/detail?id=' + e + '&courseDetailsId=' + courseDetailsId
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}

			},
			//获取签到信息
			myQianInfo() {
				let data = {
					userId: uni.getStorageSync('userId')
				}
				if(!isEmpty($cache_chasingDrama.day)&&!isEmpty($cache_chasingDrama.isQd)&&!isEmpty($cache_chasingDrama.isErQd)){
					this.day=$cache_chasingDrama.day
					this.isQd=$cache_chasingDrama.isQd
					this.isErQd=$cache_chasingDrama.isErQd
					return 
				}
				// this.$Request.getT('/app/integral/selectIntegralDay', data).then(res => {
				// 	if (res.code == 0) {
				// 		if (res.data.nowIntegral) { //判断今天是否签到
				// 			this.day = res.data.nowIntegral.day
				// 			this.isQd = true
				// 		}
				// 		if (res.data.yesterdayIntegral) { //判断昨天是否签到
				// 			if (!this.day) {
				// 				this.day = res.data.yesterdayIntegral.day
				// 			}
				// 			this.isErQd = true
				// 		}
				// 		if (res.data.nowIntegral == null && res.data.yesterdayIntegral == null) {
				// 			this.day = 0
				// 			this.isQd = false
				// 			this.isErQd = false
				// 		}
				// 		$cache_chasingDrama.set('day',this.day)
				// 		$cache_chasingDrama.set('isQd',this.isQd)
				// 		$cache_chasingDrama.set('isErQd',this.isErQd)
				// 	} else {
				// 		uni.showToast({
				// 			title: res.msg,
				// 			icon: 'none'
				// 		})
				// 	}
				// })
			},
			//跳转
			goNav(url) {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: url
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			//我的追剧
			myVideo() {
				let data = {
					page: 1,
					limit: 6,
					classify: 1, //1收藏 2点赞 3历史记录
				}
				if($cache_chasingDrama.zhuiju){
					this.zhuiju = $cache_chasingDrama.zhuiju
					return 
				}
				this.$Request.getT('/app/courseCollect/selectByUserId', data).then(res => {
					if (res.code == 0) {
						this.zhuiju = res.data.records
						$cache_chasingDrama.set('zhuiju',this.zhuiju)
					}
				})
			},
			//最近观看
			newLook() {
				let data = {
					page: 1,
					limit: 6,
					classify: 3, //1收藏 2点赞 3历史记录
				}
				if($cache_chasingDrama.list){
					this.list=$cache_chasingDrama.list
					return 
				}
				this.$Request.getT('/app/courseCollect/selectByUserId', data).then(res => {
					if (res.code == 0) {
						this.list = res.data.records
						this.$nextTick(() => {
							this.videPage = 1
						})
						$cache_chasingDrama.set('list',this.list)
					}
				})
			},
			//签到
			signIn() {
				if (uni.getStorageSync('token')) {
					this.$Request.getT('/app/integral/signIn').then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '今日已签到'
							})
							this.myQianInfo()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}

			},
			//获取这一周的日期，如果如期相同则替换为今日
			getThisWeekDates() {
				// const result = [];
				// const today = new Date();
				// const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - today.getDay() + 1);

				// for (let i = 0; i < 7; i++) {
				// 	const currentDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + i);
				// 	let dateString = currentDate.toLocaleDateString('en-US', {
				// 		month: '2-digit',
				// 		day: '2-digit'
				// 	});

				// 	if (currentDate.toDateString() === today.toDateString()) {
				// 		dateString = "今日";
				// 	}
				// 	let obj = {
				// 		name: dateString
				// 	}
				// 	result.push(obj);
				// }

				// return result;
				const result = [];
				const today = new Date();
				const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);

				result.push(this.formatDate(yesterday));

				let i = 1;
				while (i < 7) {
					const currentDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + i);
					result.push(this.formatDate(currentDate));
					i++;
				}
				return result;
			},
			formatDate(date) {
				const year = date.getFullYear();
				const month = this.padNumber(date.getMonth() + 1);
				const day = this.padNumber(date.getDate());
				return `${month}/${day}`;
			},
			padNumber(number) {
				return number < 10 ? '0' + number : number;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F7FF;
	}

	.itemTitle {
		width: 100%;
		height: auto;
		margin-top: 46rpx;

		.itemTitle-box {
			width: 686rpx;
			height: 100%;

		}

		.itemTitle-box-l {
			color: #333333;
			font-size: 32rpx;
			font-weight: bold;
		}

		.itemTitle-box-r {
			color: #999999;
			font-size: 28rpx;

		}
	}
	.zuijin-box.justify-between{
		justify-content: flex-start;
	}
	.zuijin {
		width: 100%;
		margin-top: 26rpx;

		.zuijin-box {
			width: 700rpx;
			height: 100%;
			flex-wrap: wrap;
		}

		.zuijin-box-item {
			width: calc((700rpx - 40rpx) / 3);
			height: 100%;
			margin-bottom: 30rpx;
			margin-right: calc(40rpx / 2);
		}
		.zuijin-box-item:nth-of-type(3n){
			margin-right: 0;
		}

		.zuijin-box-item-img {
			width: 100%;
			// height: 204rpx;
			height: 204rpx;
			border-radius: 24rpx 24rpx 0 0;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				border-radius: 24rpx 24rpx 0 0;
			}

			.zuijin-box-item-img-t {
				position: absolute;
				bottom: 10rpx;
				right: 0;
				max-width: 80%;
				border-radius: 10rpx;
				background-color: rgba(51, 51, 51, 0.7);
				color: #FFFFFF;
				font-size: 22rpx;
				padding: 10rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

			}
		}

		.zuijin-box-item-txt {
			width: 100%;
			height: 100rpx;
			background-color: #ffffff;
			border-radius: 0 0 24rpx 24rpx;
			align-content: center;
		}

		.zuijin-box-item-txt-t {
			width: 100%;
			padding: 0 20rpx;
			color: #333333;
			font-size: 30rpx;
			font-weight: bold;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

		}

		.zuijin-box-item-txt-l {
			width: 100%;
			padding: 0 20rpx;
			color: #999999;
			font-size: 22rpx;
		}
	}

	.title {
		width: 100%;
		padding-top: 30rpx;

		.title-box {
			width: 686rpx;
			background-color: rgba(255, 117, 129, 0.1);
			border-radius: 24rpx;
			padding: 20rpx;
		}

		.title-box-title {
			font-size: 36rpx;
			font-weight: 700;
			color: #333;
		}

		.title-box-title-r {
			background-color: #ff7581;
			font-size: 26rpx;
			color: #ffffff;
			font-weight: 500;
			border-radius: 40rpx;
			padding: 20rpx 0;
			width: 166rpx;
		}

		.title-box-tishi {
			font-size: 24rpx;
			margin-top: 20rpx;
			color: #999999;
		}

		.title-box-day {
			width: 100%;
			margin-top: 30rpx;

			.title-box-day-item-lin {
				width: 30rpx;
				height: 4rpx;
				background: #bfbfbf;
				margin: 0 4rpx;
				margin-top: 30rpx;
			}

			.title-box-day-item-num {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				// border: 1px solid #999999;
				color: #999999;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.title-box-day-item-day {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				margin-top: 20rpx;
			}

		}

		.title-box-btn {
			margin-top: 30rpx;
			width: 100%;
			border-radius: 44rpx;
			background-color: #ff7581;
			color: #ffffff;
			text-align: center;
			padding: 22rpx 0;
			font-size: 32rpx;
		}
	}
</style>