<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
	<div>
		<el-dialog :title="title" :close-on-click-modal="false" draggable width="1200px" height="500px" @close="close"
			append-to-body v-model="visible">
			<el-form :model="inputForm" ref="inputForm" v-loading="loading" :rules="rules"
				:class="method === 'view' ? 'readonly' : ''"
				:disabled="status === 'audit' || status === 'taskFormDetail' || method === 'view'" label-width="100px"
				@submit.native.prevent>
				<el-row :gutter="26">
					<el-col :span="12">
						<el-form-item label="证书类型" prop="type">
							<el-select @change="changeType" size="default" v-model="inputForm.type" placeholder="请选择证书"
								style="width: 100%;">
								<el-option v-for="item in $dictUtils.getDictList('sys_cert_type')" :key="item.value"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="证书编号" prop="no">
							<el-input v-model="inputForm.no" placeholder="请输入证书编号"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="发证机关" prop="authorities">
							<el-input v-model="inputForm.authorities" placeholder="请输入发证机关"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="发证日期" prop="issuedDate">
							<el-date-picker v-model="inputForm.issuedDate" type="date" placeholder="请选择发证日期"
								style="width: 100%;">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="注册日期" prop="enrollDate">
							<el-date-picker v-model="inputForm.enrollDate" type="date" placeholder="请选择注册日期"
								style="width: 100%;">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="到期日期" prop="expireDate">
							<el-date-picker v-model="inputForm.expireDate" type="date" placeholder="请选择到期日期"
								style="width: 100%;">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="注册证书编号" prop="enrollCertNo">
							<el-input v-model="inputForm.enrollCertNo" placeholder="请输入注册证书编号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="专业" prop="profession">
							<el-select size="default" v-model="inputForm.profession" placeholder="请选择专业"
								style="width: 100%;">
								<el-option v-for="item in inputForm.professionList" :key="item.value"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="附件" prop="certificateAttachment">
							<UpLoadComponent ref="upLoadComponent"></UpLoadComponent>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
					<el-button v-if="method === 'edit' || method == 'add'" type="primary" icon="el-icon-circle-check"
						@click="doSubmit()">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import UpLoadComponent from '@/views/common/UpLoadComponentCardStyle'
import enrollmentRegistrationService from '@/api/human/enrollment/EnrollmentRegistrationService'
export default {
	props: {
		businessId: {
			type: String,
			default: ''
		},
		formReadOnly: {
			type: Boolean,
			default: false
		},
		status: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			disabled: false,
			title: '',
			method: '',
			visible: false,
			loading: false,
			inputForm: {
				id: "",
				enrollmentRegistrationId: '',
				type: '',          // 证书类型
				no: '',        // 证书编号
				authorities: '',         // 发证机构
				issuedDate: '',                // 获得日期
				enrollDate: "",//注册日期
				expireDate: "",//到期日期
				enrollCertNo: '',               // 注册证书编号
				profession: "",
				certificateAttachment: []     // 证书附件
			},
			keyWatch: '',
			rules: {
				type: [
					{ required: true, message: '请输入证书名称', trigger: 'blur' },
				],
				no: [
					{ required: true, message: '请输入证书编号', trigger: 'blur' },
				],

				issuedDate: [
					{ type: 'date', required: true, message: '请选择获得日期', trigger: 'change' }
				],

			},
			fileType: ['jpg', 'jpeg', 'png', 'webp'],

		}
	},
	created() {

	},
	components: {
		UpLoadComponent
	},
	computed: {
		bus: {
			get() {
				return this.businessId
			},
			set(val) {
				this.businessId = val
			}
		},
		name() {
			return this.$store.state.user.name
		},
		userId() {
			return this.$store.state.user.id
		}
	},
	watch: {
		'keyWatch': {
			handler(newVal) {
				if (this.commonJS.isNotEmpty(this.bus)) {
					this.init('', this.bus)
				} else {
					this.$nextTick(() => {
						this.$refs.inputForm.resetFields()
					})
				}
			}
		},
		'loading': {
			handler(newVal) {
				this.$emit('changeLoading', newVal)
			}
		}
	},
	methods: {
		getKeyWatch(keyWatch) {
			this.keyWatch = keyWatch
		},
		init(method, id, reId) {
			this.method = method
			this.inputForm = {
				id: "",
				enrollmentRegistrationId: '',
				type: '',          // 证书类型
				no: '',        // 证书编号
				authorities: '',         // 发证机构
				issuedDate: '',                // 获得日期
				enrollDate: "",//注册日期
				expireDate: "",//到期日期
				enrollCertNo: '',               // 注册证书编号
				profession: "",
				certificateAttachment: []     // 证书附件
			}
			if (method === 'add') {
				this.title = `新增执业资格证书`
			} else if (method === 'edit') {
				this.title = '修改执业资格证书'
			} else if (method === 'view') {
				this.title = '查看执业资格证书'
			}
			this.inputForm.id = id
			this.inputForm.userId = reId
			this.visible = true
			this.loading = true
			this.$nextTick(() => {
				if (id) {
					enrollmentRegistrationService.findCertificateInfoById({
						id: this.inputForm.id
					}).then(res => {
						this.inputForm = this.recover(this.inputForm, res)
						this.inputForm = JSON.parse(JSON.stringify(this.inputForm))
						if (!this.inputForm.certificateAttachment) {
							this.inputForm.certificateAttachment = []
						}
						this.changeType(this.inputForm.type)
						this.$refs.upLoadComponent.newUpload(method, this.inputForm.certificateAttachment, 'certificate', 50, null, null, null, null)
						this.loading = false
					})
				} else {
					this.inputForm.id = id
					this.$refs.upLoadComponent.newUpload(method, this.inputForm.certificateAttachment, 'certificate', 50, null, null, null, null)
					this.loading = false
				}
			})
		},
		// 表单提交
		doSubmit() {
			if (this.$refs.upLoadComponent.checkProgress()) {
				return
			}
			this.$refs['inputForm'].validate((valid) => {
				if (valid) {
					this.inputForm.status = "5"
					enrollmentRegistrationService.saveCertificateInfo(this.inputForm).then(res => {
						this.close()
						this.$message.success(res)
						this.$emit("addCertificateInfo", this.inputForm.enrollmentRegistrationId)
						this.loading = false
					})
				}
			})
		},
		close() {
			this.$refs.upLoadComponent.clearUpload()
			this.$refs.inputForm.resetFields()
			this.visible = false
		},
		changeType(value) {
			if (value === '1' || value === '2') {
				this.inputForm.professionList = this.$dictUtils.getDictList('sys_cert_profession_build')
			} else if (value === '3' || value === '4') {
				this.inputForm.professionList = this.$dictUtils.getDictList('sys_cert_profession_cost')
			} else if (value === '5') {
				this.inputForm.professionList = this.$dictUtils.getDictList('sys_cert_profession_supervision')
			} else if (value === '6') {
				this.inputForm.professionList = this.$dictUtils.getDictList('sys_cert_profession_accounting')
			}
		},
	}
}
</script>


<style lang="less">
.fileUpload {
	.el-form-item__content {
		width: 100%;
	}
}
</style>
