<template>
	<view class="mystudy">
		<view >
			<!-- <view
			  class="headStatus"
			  :style="[
			    headStyle,
			  ]"
			>
			  <view class="arrow" @click="goback">
			    <u-icon name="arrow-left" size="48" color="#000"></u-icon>
			  </view>
			  <view style="width: 400rpx;">
				  <u-tabs :list="list" :is-scroll="false" :current="current"  @change="change" :active-color='mc'></u-tabs>
			  </view>
			  <view class="arrow"></view>
			</view> -->
			
			<view v-if="current==0" class="studyBox">
				<view class="plot">
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
				</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 class="studyB-lately" @click="gorecord()">
						<text style="font-size: 16px;color: #1B1D1E;">最近学习</text>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text style="font-size: 12px;color: #999999;">更多</text>
							<u-icon name="arrow" size='20' color='#A5A3AB'></u-icon>
						</view>
					</view>
				</view>
				<view style="display: flex;width:100%;flex-direction: row;overflow-x: auto;padding-bottom: 15px;background: #FFF;" v-if="RecentStudy.length>0">
					<view v-for="(item,index) in RecentStudy" :key="index">
						<view class="latelybox-item" :style="{'margin-right':RecentStudy.length==index+1?'15px':'0'}" @click="gocourse(item)">
							<image style="width: 134px; height: 75px;border-radius: 4px;" mode="aspectFill" :src="item.CarouselImage" />
							<view style="height: 30px;line-height: 30px;width: 134px;padding: 0 5px;">
								<text class="name">{{item.GoodsName}}</text>
							</view>
						</view>
					</view>
				</view>
				<view style="width: 100%;background: #FFF;" v-if='RecentStudy.length==0'>
					<u-empty text="暂无学习内容" mode="list"></u-empty>
				</view>
				<view style="padding:0 15px;background: #FFF;width: 100%;">
					<view class="studyB-lately" @click="gosignup()">
						<text style="font-size: 16px;color: #1B1D1E;">报名记录</text>
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text style="font-size: 12px;color: #999999;">更多</text>
							<u-icon name="arrow" size='20' color='#A5A3AB'></u-icon>
						</view>
					</view>
					<view style="width: 100%;" v-if="StudyRecord.length>0">
						<view class="good" v-for="(cx, ci) in StudyRecord" :key="ci" @click="gocourse(cx)">
							  <view class="good-img">
								<image mode="aspectFill" :src="cx.CarouselImage" style="width: 100%; height: 100%;border-radius: 4px;" ></image>
							  </view>
							  <view class="good-r" :style="{'width': (windowWidth -15 - 125 -26)+'px'}">
								  <view class="good-name">
									{{ cx.GoodsName }}
								  </view>
								  <view class="good-r-b">
									  <text v-if="cx.SurplusNum==-1">未开始</text>
									  <text v-if="cx.SurplusNum==0">已看完</text>
									  <text v-if="cx.SurplusNum>0">剩余{{cx.SurplusNum}}章未学习</text>
								  </view>
							  </view>
						</view>
					</view>
					
				</view>
				<view style="width: 100%;background: #FFF;"  v-if="StudyRecord.length==0">
					<u-empty text="暂无报名记录" mode="list"></u-empty>
				</view>
			</view>
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'goback'></auth>
	</view>
</template>

<script>
	
	import hParse from "@/components/u-parse/parse.vue";
	import auth from "@/components/auth/index.vue";
	import uCharts from '../components/u-charts/u-charts.js';
	var _self;
	var canvaLineA=null;
	export default {
		
		data(){
			return{
				pageTitle:'学习概况',
				mc:'',
				pricecolor:'',
				secondary:'',
				paddingHTop:0,
				list: [{
						name: '学习概况'
					}, {
						name: '课程缓存'
					}],
				windowWidth:0,
				scrollTop:0,
				headStyle:{},
				UserId:0,
				u:{},
				showAuth:false,
				current:0,
				studyTime:{},
				RecentStudy:[],
				StudyRecord:[],
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				textarea:''
			}
		},
		components: {
		  hParse,
		  auth
		},
		onLoad(options) {
			_self = this;
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(400);
			
		},
		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';
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync("basedata") ?
				wx.getStorageSync("basedata").bar_title : [];
			pages.forEach((x) => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
			  this.u = {
				nickName: "未登录",
				avatarUrl: ""
			  };
			  this.showAuth = true;
			}	else{
				// this.init();
				this.getMyStudyTime()//我的学习时间
				this.getMyRecentStudyPageList()//最近学习
				this.getMyOrderStudyRecordPageList()//我的报名记录列表
			}
		},
		methods:{
			
			goback(){
				uni.navigateBack({})
			},
			reloadUserinfo() {
			  this.u = uni.getStorageSync("mall_UserInfo");
			  
			},
			getMyStudyTime(){
				this.request2({
						url: '/api/AppletEducation/GetMyStudyTime',
						data: {Day: 6}
					},
					res => {
						this.studyTime = res.data
						let LineA={categories:[],series:[{data:[],name:'学习时间'}]};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						res.data.MyStudyTimeList.forEach(x=>{
							let obj = x.Date.split('-')[1]+'.'+x.Date.split('-')[2]
							LineA.categories.push(obj)
							LineA.series[0].data.push(x.TimeFormat.Time)
						})
						_self.showLineA("canvasLineA",LineA);
					}
				);	
			},
			getMyRecentStudyPageList(){
				this.request2({
						url: '/api/AppletEducation/GetMyRecentStudyPageList',
						data: {pageIndex:1,pageSize:10}
					},
					res => {
						this.RecentStudy = res.data.pageData
					}
				);	
			},
			getMyOrderStudyRecordPageList(){
				this.request2({
						url: '/api/AppletEducation/GetMyOrderStudyRecordPageList',
						data: {pageIndex:1,pageSize:5}
					},
					res => {
						this.StudyRecord = res.data.pageData;
						
					}
				);
			},
			change(val){
				this.current = val
			},
			gocourse(item){//跳到学习界面
				uni.navigateTo({
					url:'/pages/school/courseContent?id='+item.GoodsId+'&name='+item.GoodsName+'&cover_pic='+item.CarouselImage+'&index=0'
				})
			},
			gorecord(){//跳到学习记录
				uni.navigateTo({
					url:'/pages/school/mystudy/studyrecord'
				})
			},
			gosignup(){//跳到报名记录
				uni.navigateTo({
					url:'/pages/school/mystudy/orderStudy'
				})
			},
		
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					padding:[15,20,0,15],
					legend:{show:false},
					dataLabel:true,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						// disabled:true,
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8,
						splitNumber:1,
						axisLine:true,
						boundaryGap:'justify',
						disableGrid:true,
					},
					yAxis: {
						disabled:true,
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'curve',//curve曲线，straight直线
						}
					}
				});
				// //下面是默认选中索引
				// let cindex=5;
				// //下面是自定义文案
				// let textList=[{text:'我是一个标题',color:null},{text:'自定义1：值1',color:'#2fc25b'},{text:'自定义2：值2',color:'#facc14'},{text:'自定义3：值3',color:'#f04864'}];
				// //下面是event的模拟,tooltip的Y坐标值通过这个mp.changedTouches[0].y控制
				// let tmpevent={mp:{changedTouches:[{x: 0, y: 120}]}};
				// setTimeout(()=>{
				// 	canvaLineA.showToolTip( tmpevent , {
				// 		index:cindex,
				// 		// textList:textList
				// 	});
				// },200)
			},
			touchLineA(e) {
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						console.log(item,category,e)
						return category + ' ' + item.name + ':' + item.data+'分钟' 
					}
				});
			},

		}
	}
</script>

<style>
	.mystudy {
		width: 100%;
		height: 100vh;
		background: #FAF8F9;
	}
.mystudy .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;
}
.mystudy .arrow {
	  height: 24px;
	  margin: 5px;
	  width: 24px;
}
.mystudy .studyBox{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.mystudy .plot{
	width: 750upx;
	height: 400upx;
	
}
.plot .charts {
	width: 750upx;
	height: 400upx;
	background-color: #FFFFFF;
}
.mystudy .studyB-b{
	width: 100%;
	padding: 15px;
	background: #FFF;
	border-top-left-radius:30px ;
	border-top-right-radius: 30px;
}
.mystudy .s-b-time{
	width: 100%;
	height: 102px;
	border-radius: 10px;
	background: #F5F5F7;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 22px 0;
	
}
.mystudy .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%;
	
}
.mystudy .s-b-time-i .time{
	font-size: 28px;
	color: #111111;
	font-weight: 500;
}
.mystudy .s-b-time-i .unit{
	font-size: 12px;
	color: #999999;
	margin-bottom: 3px;
	
}
.mystudy .studyB-lately{
	width: 100%;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.mystudy .latelybox{
	
	overflow-x: auto !important;
	display: flex;
	padding: 10px 0;
}
.mystudy .latelybox-item{
	
	height: 106px;
	position: relative;
	box-shadow:0 4px 10px 1px #D2D2D2;
	margin-left: 15px;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink:0
}
.mystudy .latelybox-item .name{
	font-size: 12px;
	color: #1B1D1E;
	overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 1;
	  -webkit-box-orient: vertical;
}
	.mystudy  .good{
		background: #fff;
		padding: 10px 0;
		display: flex;
		flex-direction: row;
		font-family: aa;
		
	}
	.mystudy .good-r-b{
		font-size: 11px;
		color: #9A9A9A;
	}
	.mystudy .good-img{
	width: 125px;
	height: 70px;
	border-radius: 4px;
	box-shadow:0 4px 10px 1px #D2D2D2;
}
.mystudy .good-r{
	margin-left: 15px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 3px;
}
.mystudy .good .good-name {
  /* height: 37px; */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 3px;
  font-size: 14px;
  color: #1B1D1E;
  
}
.u-empty{
	padding-top: 0 !important;
}
</style>
