<template>
  <view class="page">
    <u-navbar class="u-navbar" :title="pageTitle" placeholder @leftClick="leftClick" leftIconColor="#fff"  bgColor="#00337A"  :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"/>
	<scroll-view class="scroll-view" scroll-x="true">
		<view class="scroll-view-item" :class="hIndex == 1 ? 'active' : ''" @click="hIndex = 1">
			安全规范
			<view class="activeLine" v-if="hIndex == 1"></view>
		</view>
		<view class="scroll-view-item" :class="hIndex == 2 ? 'active' : ''" @click="hIndex = 2">
			实操培训
			<view class="activeLine" v-if="hIndex == 2"></view>
		</view>
		<view class="scroll-view-item" :class="hIndex == 3 ? 'active' : ''" @click="hIndex = 3">
			理论培训
			<view class="activeLine" v-if="hIndex == 3"></view>
		</view>
		<view class="scroll-view-item" :class="hIndex == 4 ? 'active' : ''" @click="hIndex = 4">
			准军事化
			<view class="activeLine" v-if="hIndex == 4"></view>
		</view>
	</scroll-view>
	 <scroll-view class="content" scroll-y="true">
		<view class="view-box">
			<view class="title-view">
				培训
			</view>
			<view class="exam-view">
				<view class="exam-item" v-for="(item,index) in trainBean" :key="index">
					<view style="width: 70%;display: flex;align-items: center;word-break: break-all;">
						<view style="margin-right: 20rpx;">
							<image src="../../../../static/realName/pdf_icon.png" style="width: 48rpx;height: 48rpx;" mode="" ></image>
						</view>
						<view>
							<view style="font-weight: bold;">{{item.trainFileName}}</view>
							<view style="color: #06E7A3;font-weight: bold;" v-if="!item.isFinish">未开始</view>
							<view style="color: #06E7A3;font-weight: bold;" v-if="item.isFinish==1">完成</view>
							<view style="color: #06E7A3;font-weight: bold;" v-if="item.isFinish==0">进行中</view>
						</view>
					</view>
					<view class="exam-button" v-if="!item.isFinish" @click="goStudy(item)">开始学习</view> 
					<view class="exam-button" v-if="item.isFinish==1" @click="goStudy(item)">学习</view> 
					<view class="exam-button" v-if="item.isFinish==0" @click="goStudy(item)">继续学习</view> 
				</view>
			</view>
		</view>
		<view class="view-box">
			<view class="title-view">
				考试
			</view>
			<view class="exam-view">
				<view class="exam-item">
					<view style="width: 62%;display: flex;align-items: center;word-break: break-all;">
						<view style="margin-right: 20rpx;">
							<image src="../../../../static/realName/exam_icon.png" style="width: 48rpx;height: 48rpx;" mode="" ></image>
						</view>
						<view >
							<view style="font-weight: bold;">{{examBean.name}}</view>
							<view style="color: #06E7A3;font-weight: bold;" v-if="!examBean.examResult">未开始({{examBean.examScore||0}})</view>
							<view style="color: red;font-weight: bold;" v-if="examBean.examResult==0">未通过({{examBean.examScore||0}})</view>
							<view style="color: #06E7A3;font-weight: bold;" v-if="examBean.examResult==1">已通过({{examBean.examScore||0}})</view>
							
						</view>
					</view>
					<view style="width: 38%;display: flex;align-items: center;justify-content: end;">
						<view class="exam-button">详情</view> 
							<view class="exam-button" v-if="!examBean.examResult" @click="goExam(examBean)">开始考试</view> 
							<view class="exam-button" v-if="examBean.examResult==0" @click="goExam(examBean)">重新考试</view> 
							<view class="exam-button" v-if="examBean.examResult==1" @click="goExam(examBean)">再次考试</view> 
					</view>
					
				</view>
			</view>
		</view>
	</scroll-view>
 
	
	
  </view>
</template>

<script>
import config from '@/config'
export default {
  data() {
    return {
		idNumber:uni.getStorageSync('realNameUser').idNumber,
		pageTitle:'安全教育培训',
		trainInfo:{},
		hIndex:1,
		types:"安全考试",
		foreignId:"",
		trainBean:[],
		examBean:{}
    }
  },
  watch: {
	hIndex: function(newVal, oldVal) {
		if(newVal == 1) {
			this.types="安全考试";
			this.foreignId=this.trainInfo.examWorkTypeId;
			this.getTrainList()
		}else if(newVal == 2) {
			this.types="保命教育-实操";
			this.foreignId=this.trainInfo.examProTypeId;
			this.getTrainList()
		}else if(newVal == 3) {
			this.types="保命教育";
			this.foreignId=this.trainInfo.examProTypeId;
			this.getTrainList()
		}else if(newVal == 4) {
			this.types="准军事化(专业)";
			this.foreignId=this.trainInfo.examProTypeId;
			this.getTrainList() 
		}
	}
  },
  onLoad(option) {
	this.trainInfo=JSON.parse(option.trainInfo);
	this.foreignId=this.trainInfo.examWorkTypeId;
	this.types="安全考试";
    console.log('?? ~ realNameUser:',this.trainInfo)  
	this.getTrainList()
  },
  onShow() {
    this.getTrainList()
  },
  methods: {
	getTrainList(){
		let param={
			idNumber:this.idNumber,
			foreignId:this.foreignId,
			type:this.types,
			proId:this.trainInfo.proId,
			einTime:this.trainInfo.einTime
		}
		console.log(param)
		uni.request({
		  url: config.realExamUrl+'/mergeTrainExam/selectTrainExamList',
		  method: 'post',
		  data: param,
		  header: {
			'Content-Type': 'application/json',
			Authorization: uni.getStorageSync('realNameToken')
		  },
		  success: res => {
			console.log(res)
			res = res.data;
			if(res.code==200){
				this.trainBean=res.data.trainBean;
				this.examBean=res.data.examBean;
			}
		  },
		  fail: err => {
			console.log(err)
		  }
		})
	},
	goStudy(item){
		console.log(item)
		let index=item.trainFileName.lastIndexOf(".");
		let ext=item.trainFileName.substr(index+1);
		console.log(ext)
		if(ext=='mp4'){
			uni.navigateTo({
				url: `/pages/realName/workbench/exam/trainVideo?pdfInfo=${JSON.stringify(item)}&trainInfo=${JSON.stringify(this.trainInfo)}&types=${this.types}&foreignId=${this.foreignId}` 
			})
		}else{
			uni.navigateTo({
				url: `/pages/realName/workbench/exam/trainPdf?pdfInfo=${JSON.stringify(item)}&trainInfo=${JSON.stringify(this.trainInfo)}&types=${this.types}&foreignId=${this.foreignId}` 
			})
		}
		
	},
	goExam(item){
		console.log(item) 
		uni.navigateTo({ 
			url: `/pages/realName/workbench/exam/examInfo?examInfo=${JSON.stringify(item)}&trainInfo=${JSON.stringify(this.trainInfo)}&types=${this.types}&foreignId=${this.foreignId}` 
		})
	},
	// 返回
    leftClick() {
      console.log('返回')
      uni.navigateBack({
      	delta: 1 // 返回
      });
    }
  },

}
</script>

<style lang="scss">

/deep/ .uni-stat__select {
			width:420rpx !important;
				.uni-select__input-text {
					width: 420rpx !important;
				}
		}
.scroll-view {
	white-space: nowrap;
	width: 100%;
	background: #FFF;
}
 
.scroll-view-item {
	display: inline-block;
	width: 160rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	
	.activeLine{
		background:  #00337A;
		border-radius: 10upx;
		width: 160rpx;
		height: 6upx;
	}
}
.active {
	color: #333;
	font-weight: bolder;
	font-size: 32rpx;
}
.page {
	width: 100vw;
	height: 100vh;
	background-color: #EFEFEF;
	box-sizing: border-box;
	.content{
		width: 100%;
		height: 86vh;
		margin-top: 20rpx;
		padding-bottom: 80rpx;
		background: #EFEFEF;
 
		.view-box{
			width: 94%;
			height: auto;
			margin: 20rpx auto;
			background-color: #FFF;
			border-radius: 10rpx;
			padding-top: 20rpx;
			.title-view{
				font-size: 32rpx;
				font-weight: 600;
				margin-left: 20rpx;
			}
			.exam-view{
				width: 94%;
				margin: 10rpx auto;
				height: auto;
				padding-bottom: 20rpx;
				.exam-item{
					width: 96%;
					margin: 10rpx auto;
					height: auto;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 0;
				}
			}
		}
		
	}
	.exam-button{
		background-color:#0078FB;
		color: #FFF;
		height: 36rpx;
		line-height: 36rpx;
		padding:10rpx 10rpx;
		border-radius: 10rpx;
		margin-left: 10rpx;
	}
}
</style>
