<template>
	<div>
		<el-form ref="classForm" label-position="left" label-width="120px" :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年第四期铁路监理工程师网络继续教育（土建专业） -->
						{{info.TrainName}}
					</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="qiye.qyinfo">
						<!-- <el-input v-model="classForm.qyname" type="text" auto-complete="off"
							placeholder="请输入正确的公司全称"></el-input> -->
						<el-select v-model="classForm.qiye.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.qiye.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.qiye.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.qiye.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.qiye.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="姓名" >
						<el-input v-model="classForm.renCai.Name" type="text" readonly auto-complete="off"
							placeholder="请输入姓名"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="性别" >
						<!-- <el-input v-model="classForm.qyname" type="text" auto-complete="off"
							placeholder="请选择性别"></el-input> -->
						<el-select v-model="classForm.renCai.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="renCai.ShenFenZheng">
						<el-input v-model="classForm.renCai.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="renCai.Phone">
						<el-input v-model="classForm.renCai.Phone" type="text" auto-complete="off"
							placeholder="请输入联系电话"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="学历" prop="renCai.XueLi">
						<!-- <el-input v-model="classForm.renCai.XueLi" type="text" auto-complete="off"
							placeholder="请选择学历"></el-input> -->
						<el-select v-model="classForm.renCai.XueLi" placeholder="请选择学历" clearable>
							<el-option v-for="dict in dict.type.jxjy_xl" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="证书有效期至">
						<!-- <el-input v-model="classForm.qyname" type="text" auto-complete="off"
							placeholder="请输入证书有效期"></el-input> -->
						<el-date-picker v-model="classForm.renCai.JLYxqz" readonly type="date" placeholder="选择日期时间"> </el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="毕业院校" prop="byyx">
						<el-input v-model="classForm.byyx" 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" auto-complete="off"
							placeholder="请输入职称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="职称批准单位" prop="zcpzdw">
						<el-input v-model="classForm.zcpzdw" type="text" auto-complete="off"
							placeholder="请输入职称批准单位"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="监工证书编号">
						<el-input v-model="classForm.renCai.JLZhengHaoNum" type="text" auto-complete="off"
							placeholder="请输入监工证书编号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="监理工程师业绩/简历">
						<!-- <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="yeji">
						<el-input v-model="classForm.yeji" 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="yjType">
							<el-radio-group v-model="classForm.yjType" @change="$refs.classForm.clearValidate(['renCai.Email','qiye.kplx','qiye.kpfs','qiye.kpdw','qiye.nsrsbh','qiye.dzfpyx'])">
								<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.yjType == 1">
						<el-col :span="14">
							<el-form-item label="个人姓名">
								<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="renCai.Email">
								<el-input v-model="classForm.renCai.Email" type="text" auto-complete="off"
									placeholder="请输入个人邮箱"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="40" v-if="classForm.yjType == 2">
						<el-col :span="14">
							<el-form-item label="开票类型" prop="qiye.kplx" :rules="{required: true,message: '请联系企业负责人先完善发票信息，再进行报名',trigger: ['blur', 'change']}">
								<el-input v-model="classForm.qiye.kplx" readonly type="text" auto-complete="off"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="开票方式" prop="qiye.kpfs" :rules="{required: true,message: '请联系企业负责人先完善发票信息，再进行报名',trigger: ['blur', 'change']}">
								<el-input v-model="classForm.qiye.kpfs" readonly type="text" auto-complete="off"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="14">
							<el-form-item label="开票单位" prop="qiye.kpdw" :rules="{required: true,message: '请联系企业负责人先完善发票信息，再进行报名',trigger: ['blur', 'change']}">
								<el-input v-model="classForm.qiye.kpdw" readonly type="text" auto-complete="off"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="10">
							<el-form-item label="纳税人识别号" prop="qiye.nsrsbh" :rules="{required: true,message: '请联系企业负责人先完善发票信息，再进行报名',trigger: ['blur', 'change']}">
								<el-input v-model="classForm.qiye.nsrsbh" readonly type="text" auto-complete="off"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24" v-if="classForm.qiye.kplx == '增值税专用发票'">
							<el-row :gutter="20">
								<el-col :span="14">
									<el-form-item label="注册地址" prop="qiye.kpzcdz" :rules="{required: true,message: '请联系企业负责人先完善发票信息，再进行报名',trigger: ['blur', 'change']}">
										<el-input v-model="classForm.qiye.kpfs" readonly type="text" auto-complete="off"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="10">
									<el-form-item label="注册电话" prop="qiye.kpzcdh" :rules="{required: true,message: '请联系企业负责人先完善发票信息，再进行报名',trigger: ['blur', 'change']}">
										<el-input v-model="classForm.qiye.kpfs" readonly type="text" auto-complete="off"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="14">
									<el-form-item label="开户银行:" prop="qiye.kpkhyh" :rules="{required: true,message: '请联系企业负责人先完善发票信息，再进行报名',trigger: ['blur', 'change']}">
										<el-input v-model="classForm.qiye.kpfs" readonly type="text" auto-complete="off"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="10">
									<el-form-item label="银行账号:" prop="qiye.kpyhzh" :rules="{required: true,message: '请联系企业负责人先完善发票信息，再进行报名',trigger: ['blur', 'change']}">
										<el-input v-model="classForm.qiye.kpfs" readonly type="text" auto-complete="off"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-col>
						<el-col :span="24">
							<el-form-item label="电子发票邮箱" prop="qiye.dzfpyx" :rules="{required: true,message: '请联系企业负责人先完善发票信息，再进行报名',trigger: ['blur', 'change']}">
								<el-input v-model="classForm.qiye.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="qiye.yjSjr" :rules="{required: true,message: '企业注册时未填写收件人姓名，请联系企业',trigger: ['blur', 'change']}">
						<el-input v-model="classForm.qiye.yjSjr" readonly type="text" auto-complete="off"
							placeholder="请输入收件人姓名"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="收件人手机" prop="qiye.yjSjphone" :rules="{required: true,message: '企业注册时未填写收件人姓名，请联系企业',trigger: ['blur', 'change']}">
						<el-input v-model="classForm.qiye.yjSjphone" readonly type="text" auto-complete="off"
							placeholder="请输入收件人手机"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="16">
					<el-form-item label="邮寄地址" prop="qiye.yjAddress" :rules="{required: true,message: '企业注册时未填写收件人姓名，请联系企业',trigger: ['blur', 'change']}">
						<el-input v-model="classForm.qiye.yjAddress" readonly type="text" auto-complete="off"
							placeholder="请输入邮寄地址"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="邮政编码" prop="qiye.yjCode" :rules="{required: true,message: '企业注册时未填写收件人姓名，请联系企业',trigger: ['blur', 'change']}">
						<el-input v-model="classForm.qiye.yjCode" 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="personcord.0.ZJImgUrl">
						<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.personcord[0].ZJImgUrl == null?'':'hide'">
							<i class="el-icon-plus"></i>
						</el-upload>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="毕业证上传" prop="personcord.1.ZJImgUrl" >
						<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.personcord[1].ZJImgUrl == null?'':'hide'">
							<i class="el-icon-plus"></i>
						</el-upload>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="职称证上传" prop="personcord.2.ZJImgUrl">
						<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.personcord[2].ZJImgUrl == null?'':'hide'">
							<i class="el-icon-plus"></i>
						</el-upload>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</div>
</template>

<script>
	import {
		getQy,jxjyBm
	} from "@/api/userIndex"
	import {
		getPersonInfo,
		getYeji
	} from "@/api/xiehui/jxjy/Person"
	export default {
		name: "kaoshi",
		props:{
			info: { // 传入的继续教育name
				type: Object,
				default: {},
			},
		},
		dicts: ['jxjy_xl'],
		data() {
			return {
				uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", //上传路径
				loading: false, //按钮加载
				classForm: {
					id: this.info.id, //继续教育id
					renCai:{
						ShenFenZheng:'152131196304260314',
					},//人员信息
					yeji:null,//业绩
					personcord:[
						{
							ZJLX:"0",ZJImgUrl:null,
						},{
							ZJLX:"1",ZJImgUrl:null,
						},
						{
							ZJLX:"3",ZJImgUrl:null,
						}
					],//附件
					qiye:{
						qyinfo:null,//所选企业索引
					},//企业信息
					yjType:null,//开票类型 0不开 1个人 2企业
					byyx:null,//毕业院校
					zcpzdw:null,//职称批准单位
					jianli:[],//已有的简历列表
					kpGRName:"个人"
				},
				classRules: {
					'renCai.ShenFenZheng': {
						required: true,
						message: '请输入身份证号',
						trigger: ['blur', 'change']
					},
					'renCai.Email':{
						required: true,
						message: '请输入邮箱',
						trigger: ['blur']
					},
					'renCai.Phone':{
						required: true,
						message: '请输入联系电话',
						trigger: ['blur', 'change']
					},
					'renCai.XueLi':{
						required: true,
						message: '请选择学历',
						trigger: ['blur', 'change']
					},
					'renCai.zhi':{
						required: true,
						message: '请选择学历',
						trigger: ['blur', 'change']
					},
					byyx:{
						required: true,
						message: '请填写毕业院校',
						trigger: ['blur', 'change']
					},
					zcpzdw:{
						required: true,
						message: '请填写职称批准单位',
						trigger: ['blur', 'change']
					},
					'renCai.ZhiCheng':{
						required: true,
						message: '请填写职称',
						trigger: ['blur', 'change']
					},
					yeji:[
						{
							required: true,
							message: '请填写监理工程师业绩/简历',
							trigger: ['blur', 'change']
						},
						{ min: 10, message: '业绩内容需为10字以上', trigger: 'blur' }
					],
					yjType:{
						required: true,
						message: '请选择开票抬头',
						trigger: ['blur', 'change']
					},
					'personcord.0.ZJImgUrl':{required: true,message: '请上传身份证',trigger: ['blur', 'change']},
					'personcord.1.ZJImgUrl':{required: true,message: '请上传毕业证',trigger: ['blur', 'change']},
					'personcord.2.ZJImgUrl':{required: true,message: '请上传职称证',trigger: ['blur', 'change']}
				},
				//企业列表
				options: [],
				fileList0:[],
				fileList1:[],
				fileList2:[],
				baseUrl: process.env.VUE_APP_BASE_API,
			}
		},
		methods: {
			//表单重置
			reset(){
				this.options = []
				this.classForm = {
					id: null, //继续教育id
					renCai:{
						ShenFenZheng:'152131196304260314',
					},//人员信息
					yeji:null,//业绩
					personcord:[
						{
							UserCord:null,ZJLX:"0",ZJImgUrl:null,
						},{
							UserCord:null,ZJLX:"1",ZJImgUrl:null,
						},
						{
							UserCord:null,ZJLX:"3",ZJImgUrl:null,
						}
					],//附件
					qiye:{
						qyinfo:null,//所选企业索引
					},//企业信息
					yjType:null,//开票类型 0不开 1个人 2企业
					byyx:null,//毕业院校
					zcpzdw:null,//职称批准单位
					jianli:[],//已有的简历列表
				}
				this.fileList0 = []
				this.fileList1 = []
				this.fileList2 = []
				this.resetForm("classForm")
			},
			//查询企业
			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.qiye = {
					...this.classForm.qiye,
					...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.qiye.qyinfo == null) {
					this.$message({
						type: "error",
						message: "请先选择企业"
					})
				} else {
					this.$refs.classForm.validate((valid, results) => {
						if (results.UserCord == undefined) {
							getPersonInfo({
								ShenFenZheng: this.classForm.renCai.ShenFenZheng,
								Dept: this.classForm.qiye.qyname
							}).then(res => {
								this.classForm.renCai = {
									...this.classForm.renCai,
									...res.data
								}
								this.classForm.personcord[0].UserCord = res.data.ShenFenZheng
								this.classForm.personcord[1].UserCord = res.data.ShenFenZheng
								this.classForm.personcord[2].UserCord = res.data.ShenFenZheng
								for(let i in res.data.personcords){
									if(res.data.personcords[i].ZJLX == '0' && i<3){
										this.classForm.personcord[0].ZJImgUrl = res.data.personcords[i].ZJImgUrl
										this.classForm.personcord[0] = {...res.data.personcords[i],...this.classForm.personcord[0]}
										this.fileList0 = [ {url:this.baseUrl+res.data.personcords[i].ZJImgUrl}]
										this.$refs.classForm.validateField('personcord.0.ZJImgUrl')
									}else if(res.data.personcords[i].ZJLX == '1' && i<3){
										this.classForm.personcord[1].ZJImgUrl = res.data.personcords[i].ZJImgUrl
										this.classForm.personcord[1] = {...res.data.personcords[i],...this.classForm.personcord[1]}
										this.fileList1 = [ {url:this.baseUrl+res.data.personcords[i].ZJImgUrl}]
										this.$refs.classForm.validateField('personcord.1.ZJImgUrl')
									}else if(res.data.personcords[i].ZJLX == '3' && i<3){
										this.classForm.personcord[2].ZJImgUrl = res.data.personcords[i].ZJImgUrl
										this.classForm.personcord[2] = {...res.data.personcords[i],...this.classForm.personcord[2]}
										this.fileList2 = [ {url:this.baseUrl+res.data.personcords[i].ZJImgUrl}]
										this.$refs.classForm.validateField('personcord.2.ZJImgUrl')
									}
								}
								this.$forceUpdate()
								getYeji({
									ShenFenZheng: this.classForm.renCai.ShenFenZheng
								}).then(qwe => {
									this.classForm.jianli = qwe.data
								})
							})
						}
					})
				}
			},
			//删除图片
			//上传成功
			handleAvatarSuccess(file,index) {
				if(index == 0){
					this.classForm.personcord[0].ZJImgUrl = file.fileName
					this.$refs.classForm.validateField('personcord.0.ZJImgUrl')
					this.$forceUpdate()
				}else if(index == 1){
					this.classForm.personcord[1].ZJImgUrl = file.fileName
					this.$refs.classForm.validateField('personcord.1.ZJImgUrl')
					this.$forceUpdate()
				}else{
					this.classForm.personcord[2].ZJImgUrl = file.fileName
					this.$refs.classForm.validateField('personcord.2.ZJImgUrl')
					this.$forceUpdate()
				}
			},
			//移除成功
			handleRemove(file,index) {
				// this.classForm.yyzz = null
				if(index == 0){
					this.classForm.personcord[0].ZJImgUrl = null
					this.fileList0 = []
				}else if(index == 1){
					this.classForm.personcord[1].ZJImgUrl = null
					this.fileList1 = []
				}else{
					this.classForm.personcord[2].ZJImgUrl = null
					this.fileList2 = []
				}
			},
			submit(){
				this.$refs.classForm.validate(valid => {
					if (valid) {
						jxjyBm(this.classForm).then(res=>{
							this.$message({
								type:"success",
								message:res.msg
							})
							this.reset()
							this.$emit('submitSuccess',false)
						})
					} else {
				
					}
				})
			}
			
		}
	}
</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>