<template>
  <view class="page">
    <u-navbar class="u-navbar" title="安全教育培训" placeholder @leftClick="leftClick" leftIconColor="#fff"  bgColor="#00337A"  :titleStyle="{ color: '#FFF', fontSize: '32rpx' }"/>
	<scroll-view class="content" scroll-y="true">
		<view class="header-view">
			<view class="face-view">
				<image :src="faceImgUrl" mode="" style="width: 120rpx;height: 120rpx;border-radius: 60rpx"></image>
			</view>
			<view class="info-view">
				<view>
					<text style="font-weight: bold;">{{userName}}</text>
					<text style="color: #666;font-size: 22rpx;margin-left: 20rpx;">{{postName}}</text>
				</view>
				<view>
					{{proName}}
				</view>
			</view>
		</view>
		<view class="view-box">
			<view class="title-view">
				培训结果
			</view>
			<view class="train-view">
				<view class="train-item" @click="goTrain">
					<image v-if="trainInfo.safetyTraining==0" class="img" src="../../../../static/realName/safety_training_index_incomplete_img.png" mode=""></image>
					<image v-else class="img" src="../../../../static/realName/safety_training_index_complete_img.png" mode="" ></image>
				</view>
				<view class="train-item" @click="goTrain">
					<image v-if="trainInfo.practical==0" class="img" src="../../../../static/realName/practical_operation_index_incomplete_img.png" mode=""></image>
					<image v-else class="img" src="../../../../static/realName/practical_operation_index_complete_img.png" mode="" ></image>
				</view>
				<view class="train-item" @click="goTrain">
					<image v-if="trainInfo.theory==0" class="img" src="../../../../static/realName/theory_index_incomplete_img.png" mode=""></image>
					<image v-else class="img" src="../../../../static/realName/theory_index_complete_img.png" mode="" ></image>
				</view>
				<view class="train-item" @click="goTrain">
					<image v-if="trainInfo.militarize==0" class="img" src="../../../../static/realName/militarization_index_incomplete_img.png" mode=""></image>
					<image v-else class="img" src="../../../../static/realName/militarization_index_complete_img.png" mode="" ></image>
				</view>
			</view>
		</view>
		
		<view class="view-box">
			<view class="title-view">
				考试结果
			</view>
			<view class="exam-view" @click="goTrain">
				<view class="exam-item">
					<view style="width: 50%;font-weight: bold;">安规考试</view>
					<view style="color: #06E7A3;font-weight: bold;">{{trainInfo.safetyScore}}</view>
					<view class="stats1" v-if="Number(trainInfo.safetyScore)>=90">通过</view>
					<view class="stats0" v-else>未通过</view>
					
				</view>
				<view class="exam-item">
					<view style="width: 50%;font-weight: bold;">保命教育-实操培训</view>
					<view style="color: #06E7A3;font-weight: bold;">{{trainInfo.practicalScore}}</view>
					<view class="stats1" v-if="Number(trainInfo.practicalScore)>=80">通过</view>
					<view class="stats0" v-else>未通过</view>
				</view>
				<view class="exam-item">
					<view style="width: 50%;font-weight: bold;">保命教育-理论培训</view>
					<view style="color: #06E7A3;font-weight: bold;">{{trainInfo.theoryScore}}</view>
					<view class="stats1" v-if="Number(trainInfo.theoryScore)>=80">通过</view>
					<view class="stats0" v-else>未通过</view>
				</view>
				<view class="exam-item">
					<view style="width: 50%;font-weight: bold;">准军事化培训</view>
					<view style="color: #06E7A3;font-weight: bold;">{{trainInfo.militarizeScore}}</view>
					<view class="stats1" v-if="Number(trainInfo.militarizeScore)>=80">通过</view>
					<view class="stats0" v-else>未通过</view>
				</view>
			</view>
		</view>
		<view class="view-box">
			<view class="title-view">
				更多服务
			</view>
			<view class="more-view"> 
				<view class="more-item">
					<image class="img" src="../../../../static/realName/other_face.png" mode=""></image>
				</view>
				<view class="more-item">
					<image class="img" src="../../../../static/realName/other_train.png" mode=""></image>
				</view>
			</view>
		</view>
	</scroll-view>
  </view>
</template>

<script>
import { pathToBase64, base64ToPath } from 'image-tools';
import chooseFile from '../../util/chooseFile.js';
import config from '@/config'
export default {
	data() {
		return {
			idNumber:uni.getStorageSync('realNameUser').idNumber,
			faceImgUrl:"",
			userName:"",
			postName:"",
			proName:"", 
			trainInfo:{}
 
		}
	},
	onLoad() {
		console.log('🚀 ~ mounted ~ mounted-index:');
		this.getTrainInfo()
		
	},
	onShow() {
		
	},
	methods: {
		getTrainInfo(){
			let param={
				idNumber:this.idNumber
			}
			uni.request({
			  url: config.realExamUrl+'/mergeTrainExam/selectPersonInfo',
			  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.faceImgUrl = config.realFileUrl+res.data.facePhoto;
					 this.userName = res.data.name;
					 this.postName = res.data.postName;
					 this.proName = res.data.proName;
					 this.trainInfo=res.data;
				}
			  },
			  fail: err => {
				console.log(err)
			  }
			})
		},
		
		goTrain(){
			uni.navigateTo({
				url: `/pages/realName/workbench/exam/train?trainInfo=${JSON.stringify(this.trainInfo)}` 
			})
		},
		// 返回
		leftClick() {
		  console.log('返回')
		  uni.navigateBack({
			delta: 1 // 返回
		  });
		},
	  
	},

}
</script>

<style lang="scss">
.page {
	width: 100vw;
	height: 100vh;
	background-color: #f8f8f8;
	box-sizing: border-box;
	font: 24rpx;
	.content{
		width: 100%;
		height: 90vh;
		margin-top: 20rpx;
		background-color: #f8f8f8;
		padding-bottom: 40rpx;
	}
	.header-view{
		width: 94%;
		height: auto;
		margin: 20rpx auto;
		display: flex;
		.face-view{
			width: 20%;
			height: auto;
		}
		.info-view{
			width: 70%;
			margin-left: 40rpx;
			height: auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}
	.view-box{
		width: 94%;
		height: auto;
		margin: 20rpx auto;
		background-color: #FFF;
		border-radius: 10rpx;
		padding-top: 20rpx;
		.title-view{
			font-weight: 600;
			margin-left: 20rpx;
		}
		.train-view{
			width: 94%;
			margin: 20rpx auto;
			height: auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.train-item{
				width: 48%;
				height: 160rpx;
				margin-bottom: 20rpx;
				.img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.more-view{
			width: 94%;
			margin: 20rpx auto;
			height: auto;
			display: flex;
			justify-content: space-between;
			.more-item{
				width: 48%;
				height: 120rpx;
				margin-bottom: 20rpx;
				.img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.exam-view{
			width: 94%;
			margin: 20rpx auto;
			height: auto;
			.exam-item{
				width: 94%;
				margin: 10rpx auto;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.stats0{
					width: 100rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					font-size: 20rpx;
					color: #FFF;
					border-radius: 20rpx;
					background: #FF736E;
				}
				.stats1{
					width: 100rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					font-size: 20rpx;
					color: #FFF;
					border-radius: 20rpx;
					background: #47A1FB;
				}
			}
		}
	}
}
</style>
