<template>
	<view class="container">
		<view class="dataCountBox">
			<view class="leftBox">
				<view>
					<text class="count">{{userStudyCountList.studyTimeTotal}}</text>
					<text>分钟</text>
				</view>
				<view style="margin-top: 16rpx;">累计学习时长</view>
			</view>
			<view class="rightBox">
				<view>
					<text class="count">{{userStudyCountList.fileTotal}}</text>
					<text>节</text>
				</view>
				<view style="margin-top: 16rpx;">累计完成课程</view>
			</view>
		</view>
		<!-- 总览学习进度 -->
		<view class="studyProgressBox">
			<h4>总览学习进度</h4>
			<view class="progressBox">
				<text>0</text>
				<view class="progressLine">
					<view class="bgLine" :style="{width:userStudyCountList.progressBarTotal+'%'}">
						<text v-if="userStudyCountList.progressBarTotal > 50">{{userStudyCountList.progressBarTotal}}%</text>
					</view>
					<view class="blankBox" :style="{width:(100- userStudyCountList.progressBarTotal)+'%'}" v-if="userStudyCountList.progressBarTotal <= 50">{{userStudyCountList.progressBarTotal}}%</view>
				</view>
				<text>100%</text>
			</view>
		</view>
		<!-- 进度明细 -->
		<view class="progressDetailBox">
			<view class="progressTitleBox">
				<h4><i class="iconfont icon-shalou"></i>进度明细</h4>
				<i class="iconfont icon-youjiantou" @click="state.package=!state.package" :style="{transform: state.package ? 'rotate(90deg)' : 'rotate(-90deg)' }"></i>
			</view>
			<template v-if="state.package">
				<view class="progressItemBox" v-for="(item,index) in userStudyCountList.barInfos" :key="index">
					<!-- 课程大类 -->
					<view class="packageItem">
						<view class="progressTopBox">
							<view class="no">{{index + 1}}.</view>
							<view class="progressBox">
								<text>0</text>
								<view class="progressLine">
									<view class="bgLine" :style="{width:item.progressBar+'%'}">
										<text v-if="parseFloat(item.progressBar) > 50">{{item.progressBar}}%</text>
									</view>
									<view class="blankBox" :style="{width:(100- parseFloat(item.progressBar))+'%'}" v-if="parseFloat(item.progressBar) <= 50">{{parseFloat(item.progressBar)}}%</view>
								</view>
								<text>100%</text>
							</view>
						</view>
						<view class="progressBottomBox">
							<text>{{item.fileTitle}}</text>
							<i class="iconfont icon-youjiantou" v-if="item.packFileId" @click="userCoursePackBar(item.packFileId,item.orderId)" :style="{transform: item['state'] ? 'rotate(90deg)' : 'rotate(-90deg)' }"></i>
						</view>
					</view>
					<!-- 小课 -->
					<view class="fileItemBox" v-if="item['state']">
						<view class="fileItem" v-for="subItem in userCoursePackBarList">
							<view class="topBox progressBox">
								<text class="no">0</text>
								<view class="progressLine">
									<view class="bgLine" :style="{width:subItem.progressBar+'%'}">
										<text v-if="parseFloat(subItem.progressBar) > 50">{{subItem.progressBar}}%</text>
									</view>
									<view class="blankBox" :style="{width:(100- parseFloat(subItem.progressBar))+'%'}" v-if="parseFloat(subItem.progressBar) <= 50">{{subItem.progressBar}}%</view>
								</view>
								<text>100%</text>
							</view>
							<view class="bottomBox">
								{{subItem.fileTitle}}
							</view>
						</view>
					</view>
				</view>	
			</template>

		</view>
		<!-- 学习明细 -->
		<view class="studyDetailBox">
			<h4>学习明细</h4>
			<view class="lineChartBox">
				<view v-if="studyInfos && chartData">
					<charts :chartData="chartData" :reload="false" @getIndex="tap"></charts>
					<view class="chartTips">
						 <view class="imgBox">
							<image src="../../static/point.png" mode="widthFix"></image>
						 </view>
						<text>点击可查看对应数据</text>
					</view>
				</view>
				<view class="noListTip" v-if="!studyInfos">
					暂无学习明细
				</view>
			</view>
			<view class="calendarBox">
				<!-- 以防页面闪烁。日历提示需要刷新dom -->
				<template v-if="showCalendar">
					<view><uni-calendar
					:date="currentDate"
					:insert="true"
					:lunar="true" 
					:start-date="'2022-01-01'"
					:end-date="'2099-12-31'"
					:selected="calendarSelected"
					@monthSwitch="monthSwitch"
					@change="calendarChange"
				 /></view>
				</template>
				<template v-if="!showCalendar">
					<view><uni-calendar
					:date="currentDate"
					:insert="true"
					:lunar="true" 
					:start-date="'2022-01-01'"
					:end-date="'2099-12-31'"
				 /></view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api";
	import charts from "@/components/charts/charts.vue";
	export default {
		components:{charts},
		data() {
			return {
				userId:'1',
				userStudyCountList:{},
				userCoursePackBarList:{},
				userStudyTimeList:{},
				month:'',
				state:{
					package:false
				},
				chartData:{},
				studyInfos:[],
				calendarSelected:[],
				index:0,
				categoriesArr:[],
				currentDate:new Date().toDateString(),
				showCalendar:false
			};
		},
		methods:{
			userStudyCount(){
				api.userStudyCount({userId:this.userId}).then(res=>{
					if(res['success']){
						this.userStudyCountList = res['data'];
						this.studyInfos = res['data']['studyInfos'];
						let categories=[];
						let data = [];
						if(this.studyInfos.length >0){
							for(let j=0;j<this.studyInfos.length;j++){
								categories.push(this.studyInfos[j].month.split('-')[1]);
								data.push({value:this.studyInfos[j]['studyTime'],color:'#9EB4FF'});
							}
						}
						this.currentDate = this.month = this.studyInfos[this.studyInfos.length - 1].month;
						this.chartData.categories = categories;
						this.chartData.series = [{name:'月',data:data}];
						this.userStudyTime()
					}
				})
			},
			userCoursePackBar(packFileId,orderId){
				if(!packFileId || !orderId){
					return false;
				}
				this.userStudyCountList.barInfos.forEach(item=>item.state=false);
				this.userStudyCountList.barInfos.filter(item=>item.orderId==orderId)[0].state = true;
				api.userCoursePackBar({userId:this.userId,packFileId:packFileId,orderId:orderId}).then(res=>{
					if(res['success']){
						this.userCoursePackBarList = res['data']['barInfos'];
					}
				})
			},
			userStudyTime(){
				api.userStudyTime({userId:this.userId,month:this.month}).then(res=>{
					if(res['success']){
						this.userStudyTimeList = res['data']['studyInfos'];
						this.$nextTick(() => {
							this.showCalendar = true
						})
						if(this.userStudyTimeList){
							for(let i=0;i<this.userStudyTimeList.length;i++){
								let arr = {date:'',info:''}
								arr.date = this.userStudyTimeList[i]['day'];
								arr.info = this.userStudyTimeList[i]['studyTime'] + '分';
								this.calendarSelected.push(arr)
							}
						}
					}
				})
			},
			monthSwitch(e){
				// console.log(e)
			},
			calendarChange(e){
				// console.log(e)
			},
			tap(e){
				this.index = e;
				this.chartData.series[0]['data'].forEach(item=>item.color = '#9EB4FF');
				this.chartData.series[0]['data'][this.index].color = '#5F83FF';
				this.month = this.studyInfos[this.index].month;
				this.calendarSelected = [];
				this.currentDate = this.month;
				this.showCalendar = false;
				this.userStudyTime();
			}
		},
		mounted() {
			this.userStudyCount()
		}
	}
</script>

<style lang="scss">
	.container{
		height: 100%;
		.dataCountBox{
			padding: 30rpx 0;
			margin: 10rpx 20rpx;
			display: flex;
			background-color: #fff;
			color: #666666;
			.leftBox,.rightBox{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.count{
					color: #0A2F99;
					font-size: 40rpx;
				}
			}
			.leftBox{
				border-right: 1px solid #F4F4F4;
			}
		}
		.studyProgressBox,.studyDetailBox{
			h4{
				position: relative;
				font-size: 36rpx;
				color: #333;
				padding-left: 50rpx;
				margin-top: 10rpx;
				margin-bottom: 20rpx;
				&:before{
					content: '';
					display: block;
					position: absolute;
					left: 30rpx;
					top: 10%;
					width: 6rpx;
					height: 70%;
					background-color: #FA882F;
					border-radius: 4rpx;
				}
			}
		}
		.progressDetailBox{
			.progressTitleBox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 36rpx;
				font-size: 36rpx;
				background-color: #fff;
				color: #333;
				.iconfont{
					color: #666;
					transform: rotate(90deg);
				}
				h4{
					.iconfont{
						color: #0A2F99;
						margin-right: 16rpx;
					}
				}
			}
			.progressItemBox{
				padding: 18rpx 10rpx;
				box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25);
				border-radius: 10rpx;
				margin: 20rpx 36rpx;
				.packageItem{
					.progressTopBox{
						display: flex;
						align-items: center;
						.no{
							max-width: 3ch;
							margin-right: 10rpx;
							color: #000;
							font-size: 30rpx;
						}
						.progressBox{
							width: calc(100% - 3ch);
							padding: 0;
						}
					}
					.progressBottomBox{
						color: #333;
						text-align: center;
						margin: 10rpx auto;
						.iconfont{
							display: inline-block;;
							color: #666;
							transform: rotate(-90deg);
						}
					}
				}
				.fileItemBox{
					border-radius: 10rpx;
					margin: 10rpx;
					.fileItem{
						padding: 20rpx 0;
						box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25);
						margin-bottom: 20rpx;
						.topBox{
							display: flex;
							justify-content: flex-start;
							.no{
								max-width: 3ch;
							}
							.progressLine{
								height: 40rpx;
							}
						}
						.bottomBox{
							text-align: center;
							color: #666;
							font-size: 24rpx;
							margin-top: 10rpx;
						}
					}
				
				}
			}
		}
		.progressBox{
			display: flex;
			align-items: center;
			padding: 0 40rpx;
			color: #666;
			.progressLine{
				position: relative;
				width: 90%;
				height: 60rpx;
				border-radius: 36rpx;
				border: 4rpx solid #0867F5;
				margin: 0 20rpx;
				display: flex;
				align-items: center;
				overflow: hidden;
				.bgLine{
					height: 100%;
					background-color: #0867F5;
					border-top-left-radius: 36rpx;
					border-bottom-left-radius: 36rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					position: relative;
				}
				.blankBox{
					
				}
			}
		}
		.studyDetailBox{
			background-color: #fff;
			margin-top: 20rpx;
			.calendarBox{
				margin: 20rpx;
				box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.1);
				border-radius: 10rpx;
			}
			.lineChartBox{
				width: 100%;
				.chartTips{
					text-align: center;
					font-size: 20rpx;
					color: #c1c1c1;
					display: flex;
					justify-content: center;
					padding-top: 10rpx;
					background: #fff;
					.imgBox{
						width: 30rpx;
					}
				}
			}
		}
	}
</style>
