<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" @click="item['state']=!item['state'];userCoursePackBar(item['state'],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">
				  <qiun-data-charts 
				      type="column"
				      :opts="opts"
				      :chartData="chartData"
				    />
			</view>
			<view class="calendarBox">
				
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api";
	export default {
		data() {
			return {
				chartData: {},
				userId:'1',
				userStudyCountList:{},
				userCoursePackBarList:{},
				userStudyTimeList:{},
				month:'',
				state:{
					package:false
				},
			  opts: {
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: [15,15,0,5],
				legend: {},
				xAxis: {
				  disableGrid: true
				},
				yAxis: {
				  data: [
					{
					  min: 0
					}
				  ]
				},
				extra: {
				  column: {
					type: "group",
					width: 30,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08
				  }
				}
			  }
			};
		},
		methods:{
			userStudyCount(){
				api.userStudyCount({userId:this.userId}).then(res=>{
					if(res['success']){
						this.userStudyCountList = res['data'];
					}
				})
			},
			userCoursePackBar(state,packFileId,orderId){
				if(!packFileId || !state){
					return false;
				}
				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'];
					}
				})
			},
			 getServerData() {
			      //模拟从服务器获取数据时的延时
			      setTimeout(() => {
			        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			        let res = {
			            categories: ["2016","2017","2018","2019","2020","2021"],
			            series: [
			              {
			                name: "目标值",
			                data: [35,36,31,33,13,34]
			              },
			              {
			                name: "完成量",
			                data: [18,27,21,24,6,28]
			              }
			            ]
			          };
			        this.chartData = JSON.parse(JSON.stringify(res));
			      }, 500);
			    }
		},
		mounted() {
			this.userStudyCount()
		},
		  onReady() {
			this.getServerData();
		  },
	}
</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: 0 20rpx;
				box-shadow: 0px 0px 22px 0px rgba(0,0,0,0.1);
				border-radius: 10rpx;
			}
			.lineCharBox{
				width: 100%;
				height: 600rpx;
			}
		}
	}
</style>
