<template>
	<view class="container">
		<!-- tab选项 -->
		<view class="tabTitle">
			<text :class="{'actived': tabType===1}" @click="switchTab(1)">学习记录</text>
			<text :class="{'actived': tabType===2}" @click="switchTab(2)">学习统计</text>
		</view>
		<!-- tab内容 -->
		<view class="tabContent">
			<view class="learningRecordContainer" v-if="tabType===1">
				<h3 class="noListTip" v-if="!userStudyLists">暂无学习记录!</h3>
				<view class="learningRecordItem" v-for="item in userStudyLists">
					<view class="dateBox">{{item.studyTime}}</view>
					<!-- 课程详情 -->
					<view class="courseInfoContent" v-for="subItem in item.userStudyInfos" :key="subItem.fileId" @click="viewDetail(subItem)">
						<view class="thumbnailBox">
							<image :src="subItem.displayImage" alt="" mode="widthFix"></image>
						</view>
						<view class="courseDetailBox">
							<h4>{{subItem.fileTitle}}</h4>
							<view class="summaryBox">
								<text>学习时长：{{subItem.studyDuration}}分钟</text>
							</view>
							<view class="processBox">
								<view class="sliderBox">
									<slider :value="subItem.progressBar " show-value block-size="14" disabled activeColor="#20269B"/>
								</view>
								<view>%</view>
							</view>
							<view class="dataBox">
								<text>可观看截至：{{dateFormat(subItem.effectiveEndDate)}}</text>
							</view>
						</view>
					</view>
				</view>
		
			</view>
			<view class="learningStatisticsContainer" v-if="tabType===2">
				<learning-statistics></learning-statistics>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api";
	import dataHandling from "@/util/dataHandling";
	import learningStatistics from "@/pages/learningStatistics/learningStatistics.vue";
	export default {
		components:{learningStatistics},
		data() {
			return {
				tabType:1,
				userStudyLists:[],
				userId: uni.getStorageSync('cffp_userId')
			}
		},
		methods: {
			userStudyList(){
				api.userStudyList({userId:this.userId}).then(res=>{
					if(res['success']){
						this.userStudyLists = res['data']['userStudyTimeInfos'];
					}
				})
			},
			switchTab(type){
				this.tabType = type;
				if(type===1){
					this.userStudyList()
				}else{
				}
			},
			dateFormat(val){
				return dataHandling.dateFormat(val);
			},
			viewDetail(item){
				uni.navigateTo({
					url:`/pages/courseDetail/courseDetail?fileId=${item.fileId}`
				})
			}
		},
		onLoad() {
			
		},
		mounted() {
			this.switchTab(1)
		}
	}
</script>

<style lang="scss">
	.container{
		position: relative;
		height: 100%;
		.tabTitle{
			color: #666666;
			background-color:#fff;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 30rpx 60rpx 0;
			text{
				&.actived{
					color: #333;
					border-bottom: 4rpx solid #20269B;
				}
			}
		}
		.learningRecordContainer{
			padding: 20rpx 30rpx;
			.dateBox{
				padding-left: 16rpx;
			}
			.courseInfoContent{
				display: flex;
				align-items: center;
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 10rpx;
				padding: 5rpx 10rpx;
				.thumbnailBox{
					width: 200rpx;
					height: 200rpx;
					margin-right: 26rpx;
					image{
						max-width: 100%;
						height: auto;
					}
				}
				.courseDetailBox{
					width: 100%;
					color: #333;
					h4{
						font-size: 32rpx;
					}
					.summaryBox{
						font-size: 24rpx;
						margin: 10rpx 0;
						text{
							margin-right: 20rpx;
						}
					}
					.processBox{
						display: flex;
						justify-content: flex-start;
						font-size: 28rpx;
						color: #888;
						.sliderBox{
							width: 100%;
						}
					}
					.dataBox{
						text{
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>
