<template>
	<div>
		<el-form ref="classForm" label-position="left" label-width="100px" :model="classForm" :rules="classRules">
			<el-row :gutter="40">
				<el-col :span="24">
					<div style="background-color: #eee;font-weight: bold;text-align: center;font-size: 16px;"
						class="pd-10 m-b-10">
						2024年第四期铁路监理工程师网络继续教育（土建专业）
					</div>
				</el-col>
				<el-col :span="24">
					<div class="formTitle m-b-20">
						企业信息
					</div>
				</el-col>
				<el-col :span="16">
					<el-form-item label="企业名称" prop="qyinfo">
						<!-- <el-input v-model="classForm.qyname" type="text" auto-complete="off"
							placeholder="请输入正确的公司全称"></el-input> -->
						<el-select v-model="classForm.qyinfo" filterable remote reserve-keyword clearable
							placeholder="请输入企业名称" :remote-method="remoteMethod" :loading="loading" @change="chooseQy">
							<el-option v-for="(item,index) in options" :key="item.id" :label="item.qyname"
								:value="index">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="联系人姓名" prop="name">
						<el-input v-model="classForm.name" readonly type="text" auto-complete="off"
							placeholder="请输入负责人姓名"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="联系人电话" prop="photo">
						<el-input v-model="classForm.photo" readonly type="text" auto-complete="off"
							placeholder="请输入手机号码"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="邮政编码" prop="yzbm">
						<el-input v-model="classForm.yzbm" type="text" readonly auto-complete="off"
							placeholder="请输入邮政编码"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="考试地点" prop="yzbm">
						<el-input v-model="classForm.yzbm" type="text" readonly auto-complete="off"
							placeholder="请输入邮政编码"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="电子邮箱" prop="lxryx">
						<el-input v-model="classForm.lxryx" type="text" readonly auto-complete="off"
							placeholder="请输入电子邮箱"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<div class="formTitle m-b-20">
						总监报名信息
					</div>
				</el-col>
				<el-col :span="8">
					<el-form-item label="姓名" prop="Name">
						<el-input v-model="classForm.Name" type="text" readonly auto-complete="off"
							placeholder="请输入姓名"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="性别" prop="Sex">
						<!-- <el-input v-model="classForm.qyname" type="text" auto-complete="off"
							placeholder="请选择性别"></el-input> -->
						<el-select v-model="classForm.Sex" clearable readonly placeholder="请输入企业名称">
							<el-option label="男" value="男">
								男
							</el-option>
							<el-option label="女" value="女">
								女
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="民族" prop="Sex">
						<!-- <el-input v-model="classForm.qyname" type="text" auto-complete="off"
							placeholder="请选择性别"></el-input> -->
						<el-select v-model="classForm.Sex" clearable readonly placeholder="请输入企业名称">
							<el-option :label="item" :value="item" :key="index" v-for="(item,index) in minzuList">
								{{item}}
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="身份证号" prop="ShenFenZheng">
						<el-input v-model="classForm.ShenFenZheng" type="text" @blur="searchPerson" auto-complete="off"
							placeholder="请输入身份证号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="联系电话" prop="Tel">
						<el-input v-model="classForm.Tel" type="text" auto-complete="off"
							placeholder="请输入联系电话"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="学历" prop="XueLi">
						<el-input v-model="classForm.XueLi" type="text" auto-complete="off"
							placeholder="请选择学历"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="证书有效期至" prop="JLYxqz">
						<!-- <el-input v-model="classForm.qyname" type="text" auto-complete="off"
							placeholder="请输入证书有效期"></el-input> -->
						<el-date-picker v-model="classForm.JLYxqz" readonly type="date" placeholder="选择日期时间"> </el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="毕业院校" prop="BYschool">
						<el-input v-model="classForm.BYschool" type="text" auto-complete="off"
							placeholder="请输入毕业院校"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="职称" prop="ZhiCheng">
						<el-input v-model="classForm.ZhiCheng" type="text" readonly auto-complete="off"
							placeholder="请输入职称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="职称批准单位" prop="ZCpizhunDept">
						<el-input v-model="classForm.ZCpizhunDept" type="text" auto-complete="off"
							placeholder="请输入职称批准单位"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="监工证书编号" prop="JLZhengHaoNum">
						<el-input v-model="classForm.JLZhengHaoNum" type="text" auto-complete="off"
							placeholder="请输入监工证书编号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="监理工程师业绩/简历" prop="jianli">
						<!-- <el-input v-model="classForm.qyname" type="text" auto-complete="off"
							placeholder="请输入正确的公司全称"></el-input> -->
						<el-table :data="classForm.jianli" style="width: 100%">
							<el-table-column label="序号" type="index">
							</el-table-column>
							<el-table-column prop="Nian" label="添加时间" >
								<template slot-scope="scope">
									{{parseTime(scope.row.Nian,'{y}-{m}-{d}')}}
								</template>
							</el-table-column>
							<el-table-column prop="QYLoginName" label="工作单位">
							</el-table-column>
							<el-table-column prop="address" label="监理工程师业绩/简历">
								<template slot-scope="scope">
									<el-popover placement="top" title="业绩:" width="400" trigger="click" >
										<div v-html="scope.row.zyJianSheYeJi"></div>
										<el-button slot="reference">查看</el-button>
									</el-popover>
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="新增简历工程师业绩" prop="Undef1">
						<el-input v-model="classForm.Undef1" type="textarea" :rows="3" auto-complete="off"
							placeholder="请输入新增简历工程师业绩"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<div class="formTitle m-b-20">
						开票信息
					</div>
				</el-col>
				<el-col :span="24">
					<div style="color:#F56C6C;">
						注意事项：发票均每人单独开出，在网络报名时，选择付款单位，选择付款单位后，发票将不能更换。开票信息为空的，请联系企业完善开票信息。
					</div>
					<div class="m-t-10">
						<el-form-item label="发票抬头" prop="kplxFlg">
							<el-radio-group v-model="classForm.kplxFlg">
								<el-radio :label="0">不需要开发票</el-radio>
								<el-radio :label="1">个人</el-radio>
								<el-radio :label="2">企业</el-radio>
							</el-radio-group>
						</el-form-item>
					</div>
					<el-row :gutter="40" v-if="classForm.kplxFlg == 1">
						<el-col :span="14">
							<el-form-item label="个人姓名" prop="kpGRName">
								<el-input v-model="classForm.kpGRName" readonly type="text" auto-complete="off"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="个人邮箱" prop="kpGRemail">
								<el-input v-model="classForm.kpGRemail" type="text" auto-complete="off"
									placeholder="请输入个人邮箱"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="40" v-if="classForm.kplxFlg == 2">
						<el-col :span="14">
							<el-form-item label="开票类型" prop="kplx">
								<el-input v-model="classForm.kplx" readonly type="text" auto-complete="off"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="开票方式" prop="kpfs">
								<el-input v-model="classForm.kpfs" readonly type="text" auto-complete="off"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="14">
							<el-form-item label="开票单位" prop="kpdw">
								<el-input v-model="classForm.kpdw" readonly type="text" auto-complete="off"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="纳税人识别号" prop="nsrsbh">
								<el-input v-model="classForm.nsrsbh" readonly type="text" auto-complete="off"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="电子发票邮箱" prop="dzfpyx">
								<el-input v-model="classForm.dzfpyx" readonly type="text" auto-complete="off"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="24">
					<div class="formTitle m-b-20">
						邮寄信息
					</div>
				</el-col>
				<el-col :span="16">
					<el-form-item label="收件人姓名" prop="yjSjr">
						<el-input v-model="classForm.sjr" readonly type="text" auto-complete="off"
							placeholder="请输入收件人姓名"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="收件人手机" prop="yjSjphone">
						<el-input v-model="classForm.sjrsj" readonly type="text" auto-complete="off"
							placeholder="请输入收件人手机"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="邮寄地址" prop="yjAddress">
						<el-input v-model="classForm.yjdz" readonly type="text" auto-complete="off"
							placeholder="请输入邮寄地址"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="邮政编码" prop="yjCode">
						<el-input v-model="classForm.yjbm" readonly type="text" auto-complete="off"
							placeholder="请输入邮政编码"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<div style="color: #F56C6C;">
						注意事项:发票统一邮寄到付款单位，不单独邮寄给分公司或者个人。
					</div>
				</el-col>
				<el-col :span="24">
					<div class="formTitle m-b-20">
						证件上传
					</div>
				</el-col>
				<el-col :span="24">
					<el-form-item label="身份证上传" prop="qyname">
						<el-upload class="avatar-uploader" :action="uploadUrl" limit="1" list-type="picture-card" :file-list="fileList0"
							:on-success="function(file){return handleAvatarSuccess(file,0)}" :on-remove="function(file){return handleRemove(file,0)}"
							:class="classForm.fj0 == null?'':'hide'">
							<i class="el-icon-plus"></i>
						</el-upload>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="毕业证上传" prop="qyname">
						<el-upload class="avatar-uploader" :action="uploadUrl" limit="1" list-type="picture-card" :file-list="fileList1"
							:on-success="function(file){return handleAvatarSuccess(file,1)}" :on-remove="function(file){return handleRemove(file,1)}"
							:class="classForm.jf1 == null?'':'hide'">
							<i class="el-icon-plus"></i>
						</el-upload>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="职称证上传" prop="qyname">
						<el-upload class="avatar-uploader" :action="uploadUrl" limit="1" list-type="picture-card" :file-list="fileList2"
							:on-success="function(file){return handleAvatarSuccess(file,2)}" :on-remove="function(file){return handleRemove(file,2)}"
							:class="classForm.jf3 == null?'':'hide'">
							<i class="el-icon-plus"></i>
						</el-upload>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script>
	import { getminzu } from "../../../utils/ruoyi"
import {
		getQy
	} from "@/api/userIndex"
	import {
		getPersonInfo,
		getYeji
	} from "@/api/xiehui/jxjy/Person"
	export default {
		name: "Zj",
		data() {
			return {
				uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", //上传路径
				loading: false, //按钮加载
				classForm: {
					TrainId: null, //培训计划id
					qyinfo: null,
					type: null,
					ShenFenZheng: '430221198101145916',
					kplxFlg: 1, //开票类型
					kpGRName: null, //开票个人姓名
					kpGRemail: null, //开票个人邮箱
					yyzz: null,
					jianli: [], //简历
					fj0:null,//身份证
					fj1:null,//毕业证
					fj3:null,//职称证
				},
				classRules: {
					ShenFenZheng: {
						required: true,
						message: '请输入身份证号',
						trigger: ['blur', 'change']
					},
					kpGRemail:{
						required: true,
						message: '请输入邮箱',
						trigger: ['blur', 'change']
					}
				},
				//企业列表
				options: [],
				fileList0:[],//身份证
				fileList1:[],//毕业证
				fileList2:[],//职称证
				baseUrl: process.env.VUE_APP_BASE_API,
				minzuList:this.getminzu()
			}
		},
		methods: {
			handleRegister() {
				this.$emit('submitSuccess', 1)
				// this.$refs.classForm.validate(valid => {
				// 	if (valid) {

				// 	} else {

				// 	}
				// })

			},
			//查询企业
			remoteMethod(query) {
				if (query !== '') {
					this.loading = true;
					getQy({
						name: query
					}).then(res => {
						this.options = res.data
						this.loading = false;
					})
				} else {
					this.options = [];
				}
			},
			//选择企业
			chooseQy(v) {
				this.classForm = {
					...this.classForm,
					...this.options[v]
				}
				this.classForm.sjr = this.options[v].yjSjr
				this.classForm.sjrsj = this.options[v].yjSjphone
				this.classForm.yjdz = this.options[v].yjAddress
				this.classForm.yjbm = this.options[v].yjCode
				// this.form = 
			},
			//根据身份证号查询人员信息
			searchPerson() {
				if (this.classForm.qyinfo == null) {
					this.$message({
						type: "error",
						message: "请先选择企业"
					})
				} else {
					this.$refs.classForm.validate((valid, results) => {
						if (results.UserCord == undefined) {
							getPersonInfo({
								ShenFenZheng: this.classForm.ShenFenZheng,
								Dept: this.classForm.qyname
							}).then(res => {
								this.classForm = {
									...this.classForm,
									...res.data
								}
								this.classForm.kpGRName = res.data.Name
								for(let i in res.data.personcords){
									if(res.data.personcords[i].ZJLX == '0'){
										this.classForm.fj0 = res.data.personcords[i].ZJImgUrl
										this.fileList0 = [ {url:this.baseUrl+res.data.personcords[i].ZJImgUrl}]
									}else if(res.data.personcords[i].ZJLX == '1'){
										this.classForm.fj1 = res.data.personcords[i].ZJImgUrl
										this.fileList1 = [ {url:this.baseUrl+res.data.personcords[i].ZJImgUrl}]
									}else if(res.data.personcords[i].ZJLX == '3'){
										this.classForm.fj3 = res.data.personcords[i].ZJImgUrl
										this.fileList2 = [ {url:this.baseUrl+res.data.personcords[i].ZJImgUrl}]
									}
								}
								getYeji({
									ShenFenZheng: this.classForm.ShenFenZheng
								}).then(qwe => {
									this.classForm.jianli = qwe.data
								})
							})
						}
					})
				}
			},
			//删除图片
			//上传成功
			handleAvatarSuccess(file,index) {
				if(index == 0){
					this.classForm.fj0 = file.fileName
					this.$refs.registerForm.validateField('fj0')
				}else if(index == 1){
					this.classForm.fj1 = file.fileName
					this.$refs.registerForm.validateField('fj1')
				}else{
					this.classForm.fj3 = file.fileName
					this.$refs.registerForm.validateField('fj3')
				}
			},
			//移除成功
			handleRemove(file,index) {
				// this.classForm.yyzz = null
				if(index == 0){
					this.classForm.fj0 = null
				}else if(index == 1){
					this.classForm.fj1 = null
				}else{
					this.classForm.fj3 = null
				}
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.formTitle {
		color: #409EFF;
		border-bottom: 1px solid #409EFF;
		padding: 10px;
		font-size: 16px;
		font-weight: bold;
	}

	::v-deep .el-form-item__label {
		text-align: justify !important;

		text-align-last: justify !important;
	}

	::v-deep .el-select {
		width: 100% !important;
	}

	::v-deep .select-container {
		width: 100%;
		/* 如果需要，可以设置外部容器的宽度 */
	}

	::v-deep .select-container .el-select {
		width: 100%;
		/* 让 el-select 占满外部容器的宽度 */
	}
	::v-deep .hide .el-upload--picture-card {
		display: none;
	}
</style>