<template>
	<view class="studyrecord">
		<scroll-view 
		:scroll-y="true"
		:enable-back-to-top="true"
		:enable-flex="true"
		@scrolltolower="lower"
		:style="{ height: '100%' }">
			<view
			  class="headStatus"
			  :style="[
			    headStyle,
			  ]"
			>
			  <view class="arrow" @click="goback">
			    <u-icon name="arrow-left" size="48" color="#FFF"></u-icon>
			  </view>
			 <view class="title" style="color: #FFF;" >我的学习记录</view>
			  <view class="arrow"></view>
			</view>
			
			<view  class="studyBox">
				<view class="plot"></view>
				<view class="studyB-b">
					<view class="s-b-time">
						<view class="s-b-time-i" style="border-right: 1px solid #D8D8D8;">
							<text>今日学习</text>
							<view style="display: flex;flex-direction: row;align-items: flex-end;">
								<text class="time">{{studyTime.ToDayTime.Time?studyTime.ToDayTime.Time:'0'}}</text>
								<text class="unit">{{studyTime.ToDayTime.Unit?studyTime.ToDayTime.Unit:'分钟'}}</text>
							</view>
						</view>
						<view class="s-b-time-i" style="border-right: 1px solid #D8D8D8;">
							<text>连续学习</text>
							<view style="display: flex;flex-direction: row;align-items: flex-end;">
								<text class="time">{{studyTime.StydyDay?studyTime.StydyDay:'0'}}</text>
								<text class="unit">天</text>
							</view>
						</view>
						<view class="s-b-time-i">
							<text>累计学习</text>
							<view style="display: flex;flex-direction: row;align-items: flex-end;">
								<text class="time">{{studyTime.TotalTime.Time?studyTime.TotalTime.Time:'0'}}</text>
								<text class="unit">{{studyTime.TotalTime.Unit?studyTime.TotalTime.Unit:'分钟'}}</text>
							</view>
						</view>
					</view>
					<view v-if="g.length==0">
						<u-empty text="暂无学习记录" mode="list"></u-empty>
					</view>
					<view v-if="g.length>0">
						<view style="width: 100%;margin-top: 30px;" v-for="(item, index) in g" :key="index" >
							<view style="width: 100%;height: 30px;line-height: 30px;color: #1C1E1F;font-size: 13px;">{{item.Day}}</view>
							<u-time-line>
							  <u-time-line-item v-for="(x, i) in item.list" :key="i" >
							    <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
								<template v-slot:node>
								  <view
								   class="u-node"
								   :style="{ background: mc, }"
								   ></view
								  >
								</template>
							    <template v-slot:content>
									<view>
										<view style="font-size: 11px;color: #9A9A9A;padding: 5px 0;">{{x.Hour}}</view>
										<view  class="time-l" @click="gocourse(x)">
										  <view class="ticket">
											<image mode="aspectFill" :src="x.CarouselImage" style="width: 100%; height: 100%;" ></image>
										  </view>
										  <view class="detail">
											<view class="coupond">
											  <view class="name">{{x.GoodsName}}</view>
											</view>
											
										  </view>
										</view>
									</view>
							     
							    </template>
								
							  </u-time-line-item>
							</u-time-line>
						</view>
					</view>
					
					
				</view>
			</view>
			<u-loadmore
				v-if="g.length>0"
			  :status="status"
			  :load-text="loadText"
			  :font-size="24"
			  :margin-top="20"
			  :margin-bottom="20"
			  bg-color="#FAF8F9"
			/>
		</scroll-view>
		
		
	</view>
</template>

<script>
	
	
	
	export default {
		data(){
			return{
				mc:'',
				pricecolor:'',
				secondary:'',
				paddingHTop:0,
				windowWidth:0,
				scrollTop:0,
				headStyle:{},
				pageTitle:'学习记录',
				studyTime:{},
				page_count: 1,
				g: [],
				msg:{
					pageIndex: 1,
					pageSize:20,
				},
				loading: false,
				status: "loadmore",
				loadText: {
				  loadmore: "轻轻上拉，加载更多",
				  loading: "努力加载中",
				  nomore: "没有更多了",
				},
			}
		},
		
		onLoad(options) {
			
		},
		created() {
			this.mc = this.$uiConfig.mainColor;
			this.pricecolor = this.$uiConfig.pricecolor;
			this.secondary = this.$uiConfig.secondary;
			this.nav = uni.getMenuButtonBoundingClientRect().top;
			this.paddingHTop = this.nav +'px';
			this.windowWidth = this.$utils.SystemInfo().windowWidth;
			this.headStyle.paddingTop = this.nav +'px';
			this.getMyStudyTime()//我的学习时间
			this.init()//获取最近学习详情列表
			
		},
		methods:{
			
			goback(){
				uni.navigateBack({})
			},
			reloadUserinfo() {
			  this.u = uni.getStorageSync("mall_UserInfo");
			  
			},
			getMyStudyTime(){
				this.request2({
						url: '/api/AppletEducation/GetMyStudyTime',
						data: {Day: 0}
					},
					res => {
						this.studyTime = res.data
					}
				);	
			},
			init(){
				this.request2({
						url: '/api/AppletEducation/GetMyStudyDetailPageList',
						data: this.msg
					},
					res => {
						let data = this.groupArr(res.data.pageData,'Day');
						let data2 = data
						if(this.g.length>0){
							data2.forEach(x=>{
								if(x.Day == this.g[this.g.length-1].Day){//判断当前第一条数据和已有的是否同一天 放在一起
									console.log('进入一次')
									this.g[this.g.length-1].list=this.g[this.g.length-1].list.concat(x.list);
									data.splice(0,1)
								}
							})
						}
						this.g = this.g.concat(data);
						this.page_count = res.data.pageCount;
						if (this.page_count == 1) {
						   this.status = "nomore";
						}
					}
				);	
			},
			groupArr(list,field){
				var fieldList = [],att=[];
					list.map((e)=>{
						fieldList.push(e[field])
					})
					//数组去重
					fieldList = fieldList.filter((e,i,self)=>{
						return self.indexOf(e)==i
					})
					
					for(var j=0;j<fieldList.length;j++){
						//过滤出匹配到的数据
						var arr = list.filter((e)=>{
							return e.Day==fieldList[j];
						})
						att.push({
							Day:arr[0].Day,
							list:arr
						})
					}
					return att;
			},
			lower(e) {
			  if (this.msg.pageIndex < this.page_count) {
				this.msg.pageIndex++;
				this.status = "loading";
				this.init();
			  } else {
				
				this.status = "nomore";
			  }
			},
			gocourse(item){//跳到学习界面
				uni.navigateTo({
					url:'/pages/school/courseContent?id='+item.GoodsId+'&name='+item.GoodsName+'&cover_pic='+item.CarouselImage+'&index=0'
				})
			},
		}
	}
</script>

<style>
	.studyrecord {
		width: 100%;
		height: 100vh;
		background: #FAF8F9;
	}
.studyrecord .headStatus {
	  overflow: hidden;
	  position: relative;
	  width: 140vw;
	  padding-right: 40vw;
	  padding-bottom: 10px;
	  position: fixed;
	  left: 0;
	  right: 0;
	  top: 0;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: space-between;
	  background: #FFF;
	  background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/recordbanner.png');
	  background-repeat: no-repeat;
	  background-size: cover;
	  z-index: 999;
}
.studyrecord .arrow {
	  height: 24px;
	  margin: 5px;
	  width: 24px;
}
.studyrecord .studyBox{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.studyrecord .plot{
	width: 100%;
	height: 223px;
	background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/recordbanner.png');
	background-repeat: no-repeat;
	background-size: cover;
}
.studyrecord .studyB-b{
	width: 100%;
	padding: 15px;
	background: #FFF;
	border-top-left-radius:30px ;
	border-top-right-radius: 30px;
	margin-top: -37px;

}
.studyrecord .s-b-time{
	width: 100%;
	height: 102px;
	border-radius: 10px;
	background: #F5F5F7;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 22px 0;
	
}
.studyrecord .s-b-time-i{
	width: 33.2%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 13px;
	color: #111111;
	padding-left:20px ;
	height: 100%;
	
}
.studyrecord .s-b-time-i .time{
	font-size: 28px;
	color: #111111;
	font-weight: 500;
}
.studyrecord .s-b-time-i .unit{
	font-size: 12px;
	color: #999999;
	margin-bottom: 3px;
	
}
.studyrecord .studyB-lately{
	width: 100%;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.studyrecord .time-l{
		width: 100%;
		height: 80px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.studyrecord .u-node {
	  width: 24rpx;
	  height: 24rpx;
	  border-radius: 100rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  
	}

	.studyrecord .u-time-axis.data-v-bd98783e:before{
		top: 32rpx;

	}
	.studyrecord  .ticket {
		width: 125px;
		height: 70px;
		border-radius: 4px;
		overflow: hidden;
		box-shadow:0 4px 6px 1px rgba(76, 76, 76, 0.1);
	}
	.studyrecord  .detail {
	  width: 1px;
	  height: 70px;
	  flex: 1;
	  background: #fff;
	  padding:5px 10px;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	}
	.studyrecord   .detail .coupond {
	  flex: 1;
	}
	.studyrecord .detail .coupond .name {
	  font-size: 13px;
	  font-weight: 600;
	  color: #000;
	  overflow: hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 3;
	    -webkit-box-orient: vertical;
	}
	.u-empty{
		padding-top: 0 !important;
	}
</style>
