<template>
	<view>
		<view class="learn" v-if="Object.keys(detailData).length">
			<view class="learn_header">
				<view class="learn_left">
					<text class="text">我的专业力必修</text>
					<image @click="contentOn" src="../../static/images/learnpath/why.png" class="image"></image>
					<view class="up_content" v-show="upContent">
						<view class="text">根据您的归属组织、您所在岗位、职级，已为您自动匹配“{{detailData.growName || ''}}”，抓紧时间学习吧～</view>
						<image @click="contentOut" class="down" src="../../static/images/learnpath/down.png" mode=""></image>
					</view>
				</view>
				<view class="learn_right">
					<text class="text">什么是专业力必修</text>
					<image @click="onLearnModal" class="image" src="../../static/images/learnpath/whyWhite.png" mode=""></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="learn_body">
				<view class="body_job">
					<view class="name">{{detailData.growName || ''}}</view>
					<view class="job">
						<view class="text_name">{{detailData.organizationName || ''}}</view>
						<text> 学习状态：<text :style="{color: ['#FFD500','#9FFF84','#FFFFFF '][detailData.studyStatus]}">{{detailData.studyStatus==0?'未开始':detailData.studyStatus==1?'已完成':'进行中'}}</text></text>
					</view>
					<!-- <view class="plan_item">
						<image class="image" src="../../static/images/learnpath/file.png" mode=""></image>
						<text class="text" @click="planDown = true">共享文档</text>
						<view class="plan_down" v-show="planDown">
							<image @click="planDown = false" class="down" src="../../static/images/learnpath/down.png" mode=""></image>
							<view class="header">
								共享文档
							</view>
							<view class="body">
								<view class="left">
									<image class="img" src="" mode=""></image>
									<text class="text">人工智能启蒙讲解讲义.pptx</text>
								</view>
								<view class="right">
									下载
								</view>
							</view>
						</view>
					</view> -->
				</view>
				<view class="body_item" v-if="detailData.remark">
					<view class="body_top">
						<image class="img" src="../../static/images/learnpath/explain.png" mode=""></image>
						<text class="text">说明</text>
					</view>
					<view class="body_down">
						<view class="text_ele">
						{{detailData.remark || ''}}
						</view>
					</view>
				</view>
				<view class="body_item">
					<view class="body_top">
						<image class="img" src="../../static/images/learnpath/plan.png" mode=""></image>
						<text class="text">学习进度</text>
					</view>
					<view class="body_plan">
						<view class="plan_left">
							<view class="left">
								<view style="margin-bottom: 24rpx;">总任务：</view>
								<view>当前任务：</view>
							</view>
							<view class="right">
								<view class="text" style="margin-bottom: 24rpx;">{{detailData.taskNum}}门</view>
								<view class="text">{{detailData.currentTaskName}}</view>
							</view>
						</view>
						<view class="plan_right">
							<!-- <view>总进度</view>
							<view>{{Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))}}%</view>
							<view class="line">
								<u-line-progress :percentage="Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))" activeColor="#387DF7"></u-line-progress>
							</view> -->
							<view class="semi-circle-progress">
							  <view class="progress-bar">
								  <view class="item">
								  	<view class="pro">{{Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))}}%</view>
									<view class="text">总进度</view>
								  </view>
							  </view>
							  <view class="pro_line" :style="{ '--progress': (100-Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))) + '%' }"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="go_learn" @click="goLearn(detailData)">
					{{detailData.overallCompletionRate==0?'开始学习':detailData.overallCompletionRate==1?'回顾':'继续学习'}}
				</view>
			</view>
		</view>
		<view class="learn" v-else>
			<u-empty
			        mode="data"
			        icon="http://cdn.uviewui.com/uview/empty/data.png"
					style="height: 75vh;"
			>
			</u-empty>
		</view>
		<u-modal :show="learnModal" :showConfirmButton="false" width="200px">
			<view class="item_modal">
				<view class="item_title">
					专业力必修说明
				</view>
				<view class="item_text">
					本功能针对学员所在组织、岗位、职级自动匹配专业力必修任务，完成专业力必修任务方可晋升
				</view>
				<view class="item_btn" @click="learnModal = false">
					我已阅读
				</view>
				<view class="item_check">
					<u-checkbox-group>
						<u-checkbox v-model="checked" :checked="isChecked" shape="square" label="下次进入不在弹窗" @change="checkedBox"></u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { getList } from "@/api/modules/growth.js"
	export default {
		computed: {
			...mapGetters(['userInfo'])
		},
		data() {
			return {
				detailData: {},
				planDown: false,
				upContent: false,
				checked: null,
				isChecked: false,
				learnModal: false,
			}
		},
		watch: {
			checked(){
				this.outLearnModal()
			}
		},
		onShow() {
			getList(this.userInfo.aid).then(res=>{
				if(res.code == 200 ){
					this.detailData = res.data
					if(Object.keys(this.detailData).length&&localStorage.getItem("checkedTrue")!=null){
						this.learnModal = localStorage.getItem("checkedTrue") === "true"
						this.isChecked = localStorage.getItem("checkedTrue") === "false"
						console.log(this.learnModal,this.isChecked)
					}else{
						this.learnModal = true
					}
				}
			})
		},
		methods: {
			goLearn() {
				uni.navigateTo({
					url: '/pages/learnPath/learnPath?growId='+this.detailData.growId+'&name='+this.detailData.growName + '&isAllPath=' + true
					
				});
			},
			contentOn() {
				this.upContent = true
			},
			contentOut() {
				this.upContent = false
			},
			onLearnModal() {
				this.learnModal = true
				this.isChecked = localStorage.getItem("checkedTrue") === "false"
			},
			checkedBox(value){
				this.checked = value
			},
			outLearnModal() {
				// this.learnModal = false
				localStorage.setItem("checkedTrue",!this.checked)
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-modal{
		width: 288px !important;
		border-radius: 28upx;
	}
	/deep/ .u-modal__content{
		text-align: center;
		font-size: 36upx;
		font-weight: 600;
		color: #333333;
		padding: 33px 25px 33px 25px;
		background: linear-gradient( 180deg, #E8ECFF 0%, #FFFFFF 100%);
	}
	.item_modal{
		
		.item_title{
			margin: 0 auto;
			margin-top: -22rpx;
			height: 50rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
			margin-bottom: 38rpx;
		}
		.item_text{
			height: 124rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			line-height: 48rpx;
			margin-bottom: 40rpx;
			text-align: left;
		}
		.item_btn{
			width: 220rpx;
			height: 68rpx;
			background: linear-gradient( 90deg, #5390FD 0%, #3162FA 100%);
			border-radius: 8rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 68rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-bottom: 56rpx;
		}
		.item_check{
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 28rpx;
			margin-bottom: -14rpx;
		}
	}
	.learn{
		height: 80vh;
		.line{
			width: 100%;
			height: 20rpx;
			background: #F9F9F9;
		}
		.learn_header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			margin-bottom: 30rpx;
			.learn_left{
				position: relative;
				margin-left: 36rpx;
				.text{
					width: 192rpx;
					height: 44rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					text-align: left;
					margin-right: 14rpx;
					vertical-align: middle;
				}
				.image{
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
				}
				.up_content{
					width: 712rpx;
					height: 264rpx;
					background: url("../../static/images/learnpath/downImg.png") no-repeat;
					background-size: 100%;
					position: absolute;
					top: 20rpx;
					left: -50rpx;
					z-index: 600;
					.text{
						width: 488rpx;
						height: 120rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						line-height: 40rpx;
						margin: 74rpx 152rpx 70rpx 72rpx;
						overflow: hidden;
						word-break:break-all;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical; 
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 3;
					}
					.down{
						width: 42rpx;
						height: 42rpx;
						position: absolute;
						right: 52rpx;
						top: 64rpx;
					}
				}
			}
			.learn_right{
				width: 300rpx;
				height: 54rpx;
				background: #387DF7;
				box-shadow: 2rpx 4rpx 16rpx 0rpx rgba(56,125,247,0.34);
				border-radius: 40rpx;
				margin-right: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.text{
					height: 40rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					margin-right: 14rpx;
					vertical-align: middle;
				}
				.image{
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}
			}
		}
		.learn_body{
			.body_job{
				background: linear-gradient( 180deg, #3161FA 0%, #5195FF 100%);
				border-radius: 8rpx;
				border: 2rpx solid #E4EDFE;
				margin: 24rpx 28rpx 40rpx 30rpx;
				padding: 40rpx 28rpx 32rpx 40rpx;
				position: relative;
				.name{
					// height: 44rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
					margin-bottom: 20rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.job{
					// height: 40rpx;
					flex-wrap: wrap;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					display: flex;
					justify-content: space-between;
					.text_name{
						width: 360rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.plan_item{
					position: absolute;
					top: 216rpx;
					right: 0;
					.image{
						width: 42rpx;
						height: 36rpx;
						margin-right: 20rpx;
						vertical-align: middle;
					}
					.text{
						height: 44rpx;
						font-weight: 600;
						font-size: 32rpx;
						color: #409EFF;
						line-height: 44rpx;
						vertical-align: middle;
					}
					.plan_down{
						position: absolute;
						z-index: 900;
						right: -44rpx;
						top: 26rpx;
						width: 780rpx;
						max-height: 756rpx;
						background: url("../../static/images/learnpath/downppt.png") no-repeat;
						background-size: 100%;
						margin-bottom: 36rpx;
						padding-bottom: 36rpx;
						.down{
							width: 52rpx;
							height: 52rpx;
							position: absolute;
							top: 60rpx;
							right: 66rpx;
						}
						.header{
							margin: 0 auto;
							margin-top: 80rpx;
							width: 144rpx;
							height: 56rpx;
							font-weight: 600;
							font-size: 36rpx;
							color: #202020;
							line-height: 56rpx;
							margin-bottom: 22rpx;
						}
						.body{
							display: flex;
							justify-content: space-between;
							.left{
								margin-left: 80rpx;
								.img{
									width: 40rpx;
									height: 40rpx;
									margin-right: 24rpx;
								}
								.text{
									height: 40rpx;
									font-weight: 400;
									font-size: 28rpx;
									color: #666666;
									line-height: 40rpx;
								}
							}
							.right{
								text-align: center;
								width: 140rpx;
								height: 56rpx;
								line-height: 56rpx;
								border-radius: 8rpx;
								border: 2rpx solid #387DF7;
								font-weight: 400;
								font-size: 28rpx;
								color: #387DF7;
								margin-right: 80rpx;
							}
						}
					}
				}
			}
		}
		.body_item{
			margin-bottom: 30rpx;
			margin-left: 34rpx;
			.body_top{
				.img{
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
					margin-right: 20rpx;
				}
				.text{
					height: 44rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					vertical-align: middle;
				}
			}
			.body_down{
				margin: 24rpx 30rpx 30rpx 28rpx;
				padding: 22rpx 38rpx 26rpx 40rpx;
				max-height: 328rpx;
				background: #F7F7F7;
				border-radius: 8rpx;
				font-weight: 400;
				font-size: 28rpx;
				text-align: left;
				.text_ele{
					overflow: hidden;
					word-break:break-all;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical; 
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 6;
				}
			}
			.body_plan{
				margin: 32rpx 30rpx 30rpx 28rpx;
				height: 228rpx;
				background: linear-gradient( 186deg, #E5EDFB 0%, #F7F9FC 100%);
				border-radius: 8rpx;
				display: flex;
				.plan_left{
					margin: 62rpx 70rpx 60rpx 48rpx;
					display: flex;
					.left{
						height: 40rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #848593;
						line-height: 40rpx;
						margin-right: 12rpx;
					}
					.right{
						height: 42rpx;
						font-weight: 600;
						font-size: 30rpx;
						color: #3B3C4A;
						line-height: 42rpx;
						.text{
							width: 122rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							
						}
					}
				}
				.plan_right{
					margin-right: -50px;
					.semi-circle-progress {
					    width: 340rpx;
					    height: 120rpx;
						position: relative;
					    overflow: hidden;
					}
					.progress-bar{
						width: 50%;
						height: 150%;
						border-radius: 50%;
						border: 24rpx solid #DFDFE4 ;
						display: flex;
						justify-content: center;
						.item{
							margin-top: 16rpx;
							text-align: center;
							.pro{
								font-weight: 600;
								font-size: 36rpx;
								color: #2E72F2;
							}
							.text{
								font-weight: 400;
								font-size: 28rpx;
								color: #A7ACBA;
							}
						}
					}
					.pro_line{
						width: 50%;
						height: 150%;
						border-radius: 50%;
						border: 24rpx solid #2E72F2;
						position: absolute;
						top: 0;
						clip-path: inset(0 0 0 var(--progress));
						// clip-path: inset(0 0 0 50%);
						transform: rotate(180deg);
					}
					// display: flex;
					// justify-content: center;
					// align-items: center;
					    margin-top: 46rpx;
					.line{
						width: 184rpx;
						height: 1rpx;
					}
				}
			}
		}
		.go_learn{
			width: 472rpx;
			height: 96rpx;
			background: linear-gradient( 112deg, #5491FD 0%, #2A58FA 100%);
			border-radius: 48rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			margin: 0 auto;
			line-height: 96rpx;
			text-align: center;
			margin-bottom: 22rpx;
		}
	}
</style>
