<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="view-box">
			<view class="title-view">
				基本信息
			</view>
			<view style="display: flex;width: 94%;margin: 20rpx auto;height: auto;justify-content: space-between;">
				<view class="img-item">
					<image class="img" :src="faceImgUrl" mode=""></image>
					<view style="margin-top: 20rpx;">{{detailData.workerType}}</view>
				</view>
				<view class="base-info"> 
						<view style="margin-bottom: 20rpx;display: flex;align-items: center;">
							<text style="font-weight: bold;margin-right: 20rpx;">{{detailData.name}}</text>
							<text style="color:#06E7A3;margin-right: 20rpx;" v-if="detailData.lightStatus=='绿灯'">{{detailData.lightStatus}}</text>
							<text style="color:#e8717f;margin-right: 20rpx;" v-if="detailData.lightStatus=='红灯'">{{detailData.lightStatus}}</text>
							<text style="color:#e89c2d;margin-right: 20rpx;" v-if="detailData.lightStatus=='黄灯'">{{detailData.lightStatus}}</text>
							<image class="iconImg" src="../../../../static/realName/tips.png" mode="" @click="openInfo"></image>
						</view> 
						<image class="lightImg" v-if="detailData.lightStatus=='绿灯'" src="../../../../static/realName/green_light.png" mode=""></image>
						<image class="lightImg" v-if="detailData.lightStatus=='黄灯'" src="../../../../static/realName/yellow_light.png" mode=""></image>
						<image class="lightImg" v-if="detailData.lightStatus=='红灯'" src="../../../../static/realName/red_light.png" mode=""></image>
						<view style="font-weight: bold;">{{detailData.postName}}</view>
						<view style="font-weight: bold;">{{detailData.phone}}</view>
						<view style="font-weight: bold;">{{detailData.einStatus}}</view>
						<view style="margin-top: 20rpx;color: #999;">{{detailData.subName}}</view>
						<view style="margin-top: 20rpx;color: #999;">{{detailData.proName}}</view>
				</view>
			</view>
		</view>
		<view class="view-box">
			<view class="title-view">
				安全培训考试
			</view>
			<view style="width: 94%;margin: 20rpx auto;height: auto;" @click="openTrain">
				<view class="list-item" v-for="(item,index) in detailData.listExam" :key="index">
					<view style="display: flex;align-items: center;">
							<image v-if="item.status==0" class="iconImg" src="../../../../static/realName/incomplete.png" mode=""></image>
							<image v-if="item.status==1" class="iconImg" src="../../../../static/realName/complete.png" mode=""></image>
							<view  v-if="item.status==0" style="margin-left: 40rpx;color: #FF2F2F;font-weight: bold;">{{item.name}}</view>
							<view  v-if="item.status==1" style="margin-left: 40rpx;color: #10BF95;font-weight: bold;">{{item.name}}</view>
					</view> 
					<view v-if="item.status==0" class="status-btn" style="background: #FF2F2F;">未完成</view>
					<view v-if="item.status==1" class="status-btn" style="background: #10BF95;">完成</view>
				</view>
			</view>
		</view>
		<view class="view-box"> 
			<view class="title-view">
				今日考勤
			</view>
			<view style="width: 94%;margin: 20rpx auto;height: auto;display: flex;align-items: center;justify-content: space-between;">
				<view>上班：{{detailData.isToWork}}</view>
				<view>下班：{{detailData.isOffWork}}</view>
				<view v-if="detailData.isToWork=='未打卡'" class="status-btn" style="background: #FF2F2F;">未打卡</view>
				<view v-if="detailData.isToWork!='未打卡'" class="status-btn" style="background: #10BF95;">已打卡</view>
			</view>
		</view>
		<view class="view-box">
			<view class="title-view">
				今日作业计划
			</view>
			<view class="title-view">
				作业内容
			</view>
			<view style="width: 94%;margin: 20rpx auto;height: auto;">
				{{detailData.zynr}}
			</view>
		</view>
		<view class="view-box">
			<view class="title-view">
				合同信息
			</view>
			<view style="width: 94%;margin: 20rpx auto;height: auto;">
				<view class="list-item" v-for="(item,index) in detailData.listContract" :key="index" @click="openContract">
					<view style="display: flex;align-items: center;">
							<image v-if="item.contractStatus==0" class="iconImg" src="../../../../static/realName/incomplete.png" mode=""></image>
							<image v-if="item.contractStatus==1" class="iconImg" src="../../../../static/realName/complete.png" mode=""></image>
							<view  v-if="item.contractStatus==0" style="margin-left: 40rpx;color: #FF2F2F;font-weight: bold;">{{item.contractType}}</view>
							<view  v-if="item.contractStatus==1" style="margin-left: 40rpx;color: #10BF95;font-weight: bold;">{{item.contractType}}</view>
					</view> 
					<view v-if="item.contractStatus==0" class="status-btn" style="background: #FF2F2F;">未签订</view>
					<view v-if="item.contractStatus==1" class="status-btn" style="background: #10BF95;">已签订</view>
				</view>
			</view>
		</view>
		<view class="view-box">
			<view class="title-view">
				持证信息
			</view>
			<view style="width: 94%;margin: 20rpx auto;height: auto;">
				<view class="list-item" v-for="(item,index) in detailData.listCertificate" :key="index" @click="openListCertificate">
					<view style="display: flex;align-items: center;">
							<image v-if="item.isActive==0" class="iconImg" src="../../../../static/realName/incomplete.png" mode=""></image>
							<image v-if="item.isActive==1" class="iconImg" src="../../../../static/realName/complete.png" mode=""></image>
							<view  v-if="item.isActive==0" style="margin-left: 40rpx;color: #FF2F2F;font-weight: bold;">{{item.certificateName}}</view>
							<view  v-if="item.isActive==1" style="margin-left: 40rpx;color: #10BF95;font-weight: bold;">{{item.certificateName}}</view>
					</view> 
					<view v-if="item.isActive==0" class="status-btn" style="background: #FF2F2F;">无效</view>
					<view v-if="item.isActive==1" class="status-btn" style="background: #10BF95;">有效</view>
				</view>
			</view>
		</view>
	</scroll-view>
	
	<!-- 信息弹窗 -->
	<u-popup :show="showPopup1" mode="center" @close="closePopup1">
		<view style="width:600rpx;height: auto;position: relative;background-color: #fff;">
			<view style="width: 100%;height: 80rpx;margin: 0 auto;display: flex;justify-content: center;align-items: center;background-color: #fff;"> 
				<view style="font-size: 32rpx;: bold;">红绿灯</view>
			</view>
			<view style="width: 100%;height: 22vh;background-color: #fff;">
				<view style="width: 90%;height: auto;margin: 20rpx auto;display: flex;align-items: center;">
					<view style="width: 120rpx;height: 50rpx;color: #FFF;background: #DE3C23;text-align: center;line-height: 50rpx;">红灯</view>
					<view style="margin-left: 40rpx;width: 75%;">
						<view style="color: #CD4F3C;font-weight: bold;">安全教育培训考试未完成</view>
					</view>
				
				</view>
				<view style="width: 90%;height: auto;margin: 20rpx auto;display: flex;align-items: center;">
					<view style="width: 120rpx;height: 50rpx;color: #FFF;background: #FF7F26;text-align: center;line-height: 50rpx;">黄灯</view>
					<view style="margin-left: 40rpx;width: 75%;">
						<view style="color: #2DBB9D;font-weight: bold;">安全教育培训考试已完成</view>
						<view style="color: #CD4F3C;font-weight: bold;">合同/工资卡未上传，分包班组未绑定</view>
					</view>
				</view>
				<view style="width: 90%;height: auto;margin: 20rpx auto;display: flex;align-items: center;">
					<view style="width: 120rpx;height: 50rpx;color: #FFF;background: #10BF96;text-align: center;line-height: 50rpx;">绿灯</view>
					<view style="margin-left: 40rpx;width: 75%;">
						<view style="color: #2DBB9D;font-weight: bold;">安全教育培训考试已完成</view>
						<view style="color: #2DBB9D;font-weight: bold;">合同/工资卡已上传，分包班组已绑定</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
	
	<!-- 考试弹窗 -->
	<u-popup :show="showPopup2" mode="center" @close="closePopup2">
		<view style="width:600rpx;height: auto;position: relative;background-color: #fff;"> 
			<view style="width: 100%;height: 20vh;background-color: #fff;">
				<view class="list-item" style="margin: 30rpx 10rpx;" v-for="(item,index) in detailData.listExam" :key="index">
					<view style="display: flex;align-items: center;width: 50%;">
							<view  v-if="item.status==0" style="margin-left: 10rpx;color: #FF2F2F;font-weight: bold;">{{item.name}}</view>
							<view  v-if="item.status==1" style="margin-left: 10rpx;color: #10BF95;font-weight: bold;">{{item.name}}</view>
					</view> 
					<view v-if="item.status==0"  style="font-weight: bold;">未完成</view>
					<view v-if="item.status==1" style="font-weight: bold;">完成</view>
					<view style="font-weight: bold;">{{item.score}}</view>
				</view>
			</view>
		</view>
	</u-popup>
	
	<!-- 合同弹窗 -->
	<u-popup :show="showPopup3" mode="center" @close="closePopup3">
		<view style="width:600rpx;height: auto;position: relative;background-color: #fff;"> 
			<view style="width: 100%;height: auto;background-color: #fff;">
				<u--form class="addForm" :model="contractData" >
					<view class="form-input-box">
						<view style="width:30%;height: 100%;">合同照片</view>
						<view style="width:70%;height: 100%;" v-if="contractWitnessType=='img'">
							<image style="width:200rpx;height: 200rpx;margin: 10rpx;" :src="contractImgUrl" mode=""></image>
						</view> 
						<view style="width:70%;height: 100%;" v-if="contractWitnessType=='file'" @click="openPdf2">
							<image style="width:200rpx;height: 200rpx;margin: 10rpx;" src="../../../../static/realName/pdf.png" mode=""></image>
						</view> 
					</view>
					<view class="form-input-box">
						<view style="width:30%;height: 100%;">合同编号</view>
						<u-form-item prop='contractCode' style="width:70%;height: 100%;" >
							<u--input v-model="contractData.contractCode" type="text"   border="surround" readonly></u--input>
						</u-form-item> 
					</view>
					<view class="form-input-box">
						<view style="width:30%;height: 100%;">合同期限类型</view>
						<u-form-item prop='laborContractType' style="width:70%;height: 100%;" >
							<u--input v-model="contractData.laborContractType" type="text"   border="surround" readonly></u--input>
						</u-form-item> 
					</view>
					<view class="form-input-box">
						<view style="width:30%;height: 100%;">合同签订日期</view>
						<u-form-item prop='contractValidDate' style="width:70%;height: 100%;" >
							<u--input v-model="contractData.contractValidDate" type="text"   border="surround" readonly></u--input>
						</u-form-item> 
					</view>
					<view class="form-input-box">
						<view style="width:30%;height: 100%;">合同终止日期</view>
						<u-form-item prop='contractInvalidDate' style="width:70%;height: 100%;" >
							<u--input v-model="contractData.contractInvalidDate" type="text"   border="surround" readonly></u--input>
						</u-form-item> 
					</view>
					<view class="form-input-box">
						<view style="width:30%;height: 100%;">合同类型</view>
						<u-form-item prop='contractType' style="width:70%;height: 100%;" >
							<u--input v-model="contractData.contractType" type="text"   border="surround" readonly></u--input>
						</u-form-item> 
					</view>	
					<view class="form-input-box">
						<view style="width:30%;height: 100%;">工资核定方式</view>
						<u-form-item prop='wageApprovedWay' style="width:70%;height: 100%;" >
							<u--input v-model="contractData.wageApprovedWay" type="text"   border="surround" readonly></u--input>
						</u-form-item> 
					</view>
					<view class="form-input-box">
						<view style="width:30%;height: 100%;">工资核定标准</view>
						<u-form-item prop='wageCriterion' style="width:70%;height: 100%;" >
							<u--input v-model="contractData.wageCriterion" type="text"   border="surround" readonly></u--input>
						</u-form-item> 
					</view>
				</u--form>
			</view>
		</view>
	</u-popup>
	
	<!-- 持证弹窗 -->
	<u-popup :show="showPopup4" mode="center" @close="closePopup4">
		<view style="width:600rpx;height: auto;position: relative;background-color: #fff;"> 
			<view style="width: 100%;height: auto;background-color: #fff;">
				<u--form class="addForm" :model="listCertificate" >
					<view class="form-input-box" style="flex-direction: column;align-items: flex-start;">
						<view style="font-size: 24rpx;margin-top: 20rpx;">证件名称</view>
						<u-form-item prop='certificateName'>
							<u--input v-model="listCertificate.certificateName" type="text" border="surround" readonly></u--input>
						</u-form-item> 
					</view>
					<view class="form-input-box" style="flex-direction: column;align-items: flex-start;">
						<view style="font-size: 24rpx;margin-top: 20rpx;">证件有效期</view>
						<u-form-item prop='certificateName'>
							<u--input :value="listCertificate.startDate+'至'+listCertificate.stopDate" type="text" border="surround" readonly></u--input>
						</u-form-item> 
					</view>
					<view class="form-input-box" style="flex-direction: column;align-items: flex-start;">
						<view style="font-size: 24rpx;margin-top: 20rpx;">是否有效</view>
						<u-form-item prop='certificateName'>
							<u--input v-if="listCertificate.isActive==0" value="无效" type="text" border="surround" readonly></u--input>
							<u--input v-if="listCertificate.isActive==1" value="有效" color="#10BF95" type="text" border="surround" readonly></u--input>
						</u-form-item> 
					</view>
					<view class="form-input-box" style="flex-direction: column;align-items: flex-start;">
						<view style="font-size: 24rpx;margin-top: 20rpx;">证件附件</view> 
						<view v-if="listCertificate.certificateTypeFile!=''" @click="openPdf" style="font-size: 28rpx;margin: 20rpx;color: #00337A;">附件查看</view>
						<view v-if="!listCertificate.certificateTypeFile" style="font-size: 28rpx;margin: 20rpx;color: #FF2F2F;">无附件</view>
					</view>
				</u--form>
			</view>
		</view>
	</u-popup>
	
	
	
  </view>
</template>

<script>
import config from '@/config'
export default {
  data() {
    return {
		idNumber:'',
		detailData:{},
		faceImgUrl:'',
	    showPopup1:false,//信息
	    showPopup2:false,//培训考试
		contractData:{},//合同
		contractImgUrl:"",
		contractWitnessType:"",
	    showPopup3:false,//合同
		listCertificate:{},//持证 
		showPopup4:false,//持证
    }
  },
  onLoad(option) {
	console.log(option)
	this.idNumber=option.idNumber||"";
	if(this.idNumber!=""){
		this.selectPersonQualificationsContent()
	}
  },
  onShow() {
  },
  methods: {
	// 获取详情
	selectPersonQualificationsContent(){
		let param={
			idNumber:this.idNumber,
		}
		uni.request({
		  url: config.realAppUrl+'/BasePerson/selectPersonQualificationsContent',
		  method: 'post',
		  data: param,
		  header: {
			'Content-Type': 'application/json;charset=UTF-8;',
			Authorization: uni.getStorageSync('realNameToken')
		  },
		  success: res => {
			console.log(res)
			res = res.data;
			if(res.code==200){
				this.detailData=res.data;
				this.faceImgUrl=config.realBaseUrl+res.data.facePhoto;
			}else{
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		  },
		  fail: err => {
			console.log(err)
		  }
		})
	},
    openInfo(){
		this.showPopup1=true;
	},
	closePopup1(){
		this.showPopup1=false;
	},
	openTrain(){
		this.showPopup2=true;
	},
	closePopup2(){
		this.showPopup2=false;
	},
	openContract(){
		this.contractData = this.detailData.listContract[0]
		if(this.contractData.witnessPath&&this.contractData.witnessPath.split(".")[1]=="pdf"){
			this.contractWitnessType="file"
		}else{
			this.contractWitnessType="img"
		}
		this.contractImgUrl=config.realFileUrl+this.contractData.witnessPath;
		this.showPopup3=true;
	},
	closePopup3(){
		this.showPopup3=false;
	},
	openListCertificate(){
		this.listCertificate = this.detailData.listCertificate[0]
		this.showPopup4=true;
	},
	closePopup4(){
		this.showPopup4=false;
	},
	openPdf(){
		console.log("附件打开",this.listCertificate.certificateTypeFile)
		uni.navigateTo({
			url: `/pages/realName/workbench/qualifications/listCertificatePdf?pdfUrl=${this.listCertificate.certificateTypeFile}`
		})
	},
	openPdf2(){
		console.log("附件打开",this.contractImgUrl)
		// let url = config.realFileUrl+this.contractData.witnessPath
		uni.navigateTo({
			url: `/pages/realName/workbench/qualifications/listCertificatePdf?pdfUrl=${this.contractImgUrl}`
		})
	},
	leftClick() {
      console.log('返回')
      uni.navigateBack({
      	delta: 1 // 返回
      });
    }
  },

}
</script>

<style lang="scss">
.page {
	width: 100vw;
	height: 100vh;
	background-color: #EFEFEF;
	box-sizing: border-box;
	// padding: 0 20px; 
	.content{
		width: 100%;
		height: 90vh;
		margin-top: 20rpx;
		padding-bottom: 80rpx;
		background-color: #EFEFEF;
	}
	.view-box{
		width: 90%;
		margin: 20rpx auto;
		background-color: #FFF;
		border-radius: 10rpx;
		padding: 30rpx 10rpx;
		.title-view{
			font-weight: 600;
			margin-left: 20rpx;
		}
	}
	.base-info{
		width: 68%;
		height: auto;
		position: relative;
	}
	.iconImg{
		width: 40rpx;
		height: 40rpx;
	}
	.lightImg{
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		right:40rpx;
		top: 0rpx;
	}
	.img-item {
		width: 180upx;
		height: 240upx; 
		margin: 0 20rpx;   
		text-align: center;
		.img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.list-item{
		width: 96%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx auto;
		font-size: 32rpx;
	}
	.status-btn{
		width: 120rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #FFF;
		font-size:24rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	.addForm{
		width: 100%;
		height: auto;
		font-size: 24rpx;
		.form-input-box{
			padding: 0 10rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #eee;
		}
	}
}
</style>
