<template>
  <div>
	  
	<el-row>
		<el-col :lg="12" class="p10">
			<el-card style="min-width: 550px; height: 620px;">
				<div slot="header" align="center">
				    <span style="color: #1890FF;">基本信息</span>
				</div>
				<div>
					<el-form :inline="true" class="grid-table" label-width="90px" label-position="center">
						<el-row>
							<el-col :span="12" class="ml-1">
								<el-form-item label="姓名"  >
								  <span class="pl10 nowrap" >{{ info.nickname||'--' }}</span>
								</el-form-item>
							</el-col>
							
							<el-col :span="12" class="ml-1">
								<el-form-item label="性别"  >
								  <span class="pl10 nowrap" >{{ info.gender||'--' }}</span>
								</el-form-item>
							</el-col>
							
							<el-col :span="12" class="ml-1">
								<el-form-item label="身份证"  >
								  <span class="pl10 nowrap" >{{ info.cardId||'--' }}</span>
								</el-form-item>
							</el-col>
							
							<el-col :span="12" class="ml-1">
								<el-form-item label="出生年月"  >
								  <span class="pl10 nowrap" >{{ info.birthday||'--' }}</span>
								</el-form-item>
							</el-col>
							
							<el-col :span="12" class="ml-1">
								<el-form-item label="学历"  >
								  <span class="pl10 nowrap" >{{ info.education||'--' }}</span>
								</el-form-item>
							</el-col>
							
							<el-col :span="12" class="ml-1">
								<el-form-item label="专业"  >
								  <span class="pl10 nowrap" >{{ info.major||'--' }}</span>
								</el-form-item>
							</el-col>
							
							<el-col :span="24" class="ml-1">
								<el-form-item label="毕业院校">
								  <span class="pl10 nowrap" >{{ info.school||'--' }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="24" class="ml-1">
								<el-form-item label="毕业证书号">
								  <span class="pl10 nowrap" >{{ info.degreeId||'--' }}</span>
								</el-form-item>
							</el-col>
							
							<el-col :span="12" class="ml-1">
								<el-form-item label="学位"  >
								  <span class="pl10 nowrap" >{{ info.degree||'--' }}</span>
								</el-form-item>
							</el-col>
							
							<el-col :span="12" class="ml-1">
								<el-form-item label="手机(本人)"  >
								  <span class="pl10 nowrap" >{{ info.phone||'--' }}</span>
								</el-form-item>
							</el-col>
							
							<el-col :span="24" class="ml-1">
								<el-form-item label="现场施工 (年限)"  >
								  <span class="pl10 nowrap" style="line-height: 80px;">
								  {{ info.years||'--' }}
								  年</span>
								</el-form-item>
							</el-col>
							
							<el-col :span="24" class="ml-1">
								<el-form-item label="工作单位"  >
								  <span class="pl10 nowrap" >{{ info.company||'--' }}</span>
								</el-form-item>
							</el-col>
							
							<el-col :span="24" class="ml-1">
								<el-form-item label="联系地址"  >
								  <span class="pl10 nowrap" >{{ info.address||'--' }}</span>
								</el-form-item>
							</el-col>
							
							<el-col :span="24" class="ml-1">
								<el-form-item label="报考岗位"  >
								  <span class="pl10" >{{ info.courseName||'--' }}</span>
								  <span class="ml20">
									<el-button class="ml20" type="text" v-if="info.confirm">审核通过</el-button> 
									<el-button class="ml20" v-else type="primary" @click="confirmUserApply">审核通过</el-button> 
								  </span>
								  
								</el-form-item>
								
							</el-col>
						</el-row>
						
					</el-form>
				</div>
			</el-card>
		</el-col>
		
		<el-col :lg="12" class="p10">
			<el-card style="min-width: 550px;height: 620px;">

				<div slot="header" align="center">
					<el-button class="fr" type="warning" @click="confirmUserApply">校验审核结果</el-button>
				    <span style="color: #1890FF;" @click="$viewer.show()">{{types[imgType]}}</span>
				</div>
				
				<div class="confirm-img">
				  <div class="confirm-img-nav">
					  <el-button type="text"> 选择附件</el-button>
					  
					  <el-button  v-for="(name, type) in types" 
						:class="{'confirm-select':imgType==type}"  type="primary" 
						@click="imgType=type" 
						class="confirm-img-nav-btn">{{name}}</el-button>
				  </div>
				  
				  <div class ="confirm-img-body">
				  	<vue-viewer class="preview"
				  		width="300"
				  		height="370"
				  		 :thumb="imgUrl"
				  		 :full="imgUrl">
				  	</vue-viewer>
				  </div>
				</div>
				
				<el-form v-if="imgType!='proveImg' && imgType!='yearsImg'&& content!='通过'">
					<el-form-item label="审核信息">
						<el-input v-model="content" type="textarea" placeholder="审核信息"></el-input>
					</el-form-item>
					
					<div class="bottom clearfix mt20" align="center">
					  <el-button type="success" class="button"  @click="passConfirm">审核通过</el-button>
					  <el-button type="danger" class="button" @click="unPassConfirm">拒绝通过</el-button>
					</div>
				</el-form>
				
				
			</el-card>
		</el-col>
		
	</el-row>
	
	<el-table :data="logs" class="mt10">
		<el-table-column label="序号" >
		  <template slot-scope="{ $index}">
		    <span>{{$index+1}}</span>
		  </template>
		</el-table-column>
		<el-table-column label="审核环节" >
		  <template slot-scope="{row}">
		    <span>{{types[row.type]}}</span>
		  </template>
		</el-table-column>
		
		<el-table-column label="审核人" prop="adminName" ></el-table-column>
		<el-table-column label="审核意见" prop="content" ></el-table-column>
		<el-table-column label="审核时间" prop="createAt" ></el-table-column>
	
	</el-table>
	
  </div>
</template>

<script>
import { postData } from "@/api/study.js";
import PreviewImg from "@/components/customPic/previewImg.vue";
export default {
  name: "Api",
  data() {
	
    return {
		dialogFormVisible: false,
		imgUrl:'',
		imgType:'',
		content:'',
		errorImg:'this.src="' + require('@/assets/null.jpg') + '"',
		types:{
			'headImg':'个人形象照',
			'cardImg':'身份证正面',
			'cardBackImg':'身份证背面',
			'proveImg':'学信网证明',
			'graduateImg':'毕业证图片',
			'yearsImg':'工作年限证明',
		},
		info:{},
		logs:[]
    }
  },
  watch:{
	imgType(){
		this.imgUrl = this.info[ this.imgType];
		this.content = this.info[ this.imgType+'Confirm']||''
	}
  },
  components:{PreviewImg},
  methods: {
	  inited (viewer) {
		this.$viewer = viewer
	  },
	  unPassConfirm(  ){
		  let {content, imgType} = this
		  let imgTypeConfirm = imgType+"Confirm"
		 if( content.length < 3 ){
			this.$message.errorMsg("拒绝需要理由")
			return
		 }
		 let {applyId,userId} = this.info
		let param = {content, applyId,userId, type:imgType }
		postData("ConfirmUserApplyImg", param ).then( res=>{
			if( res.code == 200 ){
				this.$message.successMsg("拒绝通过成功", 2)
				this.info[imgTypeConfirm]= content;
				this.content = content
				this.reloadLogs()
			}
		})
	  },
	  confirmUserApply(){
		let {applyId,userId} = this.info
		let param = { applyId, userId}
		postData("ConfirmUserApply", param ).then( res=>{
		  	if( res.code == 200 ){
		  		this.$message.successMsg("通过成功", 2)
		  	}
		})
	  },
	  passConfirm(  ){
	  		let {imgType} = this
			let content = "通过"
	  		let imgTypeConfirm = imgType+"Confirm"
			let {applyId,userId} = this.info
	  		let param = {content, applyId,userId,  type:imgType }
	  		postData("ConfirmUserApplyImg", param ).then( res=>{
	  			if( res.code == 200 ){
					this.$message.successMsg("审核通过", 2)
	  				this.info[imgTypeConfirm]= content;
					this.content = content
					this.reloadLogs()
	  			}
	  		})
	  },
	  reloadLogs(){
		let {applyId} = this.info
		let param = {applyId }
		  postData("GetUserApplyConfirmLogs", param ).then( res=>{
		  	if( res.code == 200 ){
		  		this.logs = res.data||[]
		  	}
		  })
	  }
  },
  beforeMount() {
	let applyId  = + this.$route.query.applyId;
	this.applyId= applyId
	postData("getUserApplyInfo", {applyId}).then( res=>{
		if( res.code == 200){
			this.info = res.data.info;
			this.logs = res.data.logs;
			this.imgType = 'headImg'
			
		}
	})
	
	
	
  }
};
</script>
<style scoped lang="scss">
	.grid-table{
		min-width: 550px;
	}
	.ml-1 .el-form-item__label{
		border-right: 1px solid #e8e8e8;
		background-color: #f0f2f5;
		padding-top:10px;
		height: 55px;
		float: left;
		text-align: left;
		white-space:pre-line;
		padding-left: 16px;
	}
	.br-line{
		border-right: 1px solid #e8e8e8;
	}
	.ml-1{
		border: 0.1px solid #e8e8e8;
		margin-top:-1px;
		margin-left: -1px;
	}

	.grid-img{
		height: auto;
	}
	.preview img{
		width: 400px;
	}
	
	.confirm-img{
		min-width: 500px;
	}
	.confirm-img-nav {
		position: relative;
		float: right;
		width: 120px;
	}
	.confirm-img-nav button{
		display: block;
		border: #1890FF;
		width: 100px;
		text-align: left;
	}
	.confirm-img-body{
		width: 420px;
		margin-right: 120px;
	}
	.confirm-select{
		background-color: #42B983;
	}
	.confirm-img-nav-btn{
		margin-top: 10px;
	}
</style>
