<template>
	<div>
		<a-modal v-model:visible="visible" width="80%" :closable="false" :maskClosable="false" :title="titleText"
			:footer="null">
			<a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
				<a-row>
					<a-col :span="8"><a-form-item label="证书补发企业名称" name="unitInfoId"
							:rules="[{ required: true, message: '请选择证书补发企业名称' }]">
							<a-select @change="enterpriseData" label-in-value :disabled="showLock" class="select-box"
								v-model:value="formState.unitInfoId" :size="size" placeholder="请选择">
								<a-select-option v-for="item in unitTypeList" :key="item.id" :value="item.unitInfoId">
									{{ item.dwmc }}
								</a-select-option>
							</a-select>
						</a-form-item></a-col>
					<a-col :span="8">
						<a-form-item label="企业代码">
							<a-input autocomplete="off" :disabled="true" v-model:value="formState.dwdm" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="企业地址">
							<a-input autocomplete="off" :disabled="true" v-model:value="formState.zcdz" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="8"><a-form-item label="法定代表人">
							<a-input autocomplete="off" :disabled="true" v-model:value="formState.fddbr" />
						</a-form-item></a-col>
					<a-col :span="8"><a-form-item label="企业性质">
							<a-input autocomplete="off" :disabled="true" v-model:value="formState.dictLabel" />
						</a-form-item></a-col>
					<a-col :span="8">
						<a-form-item label="补发时间" name="reissueTime">
							<a-date-picker :disabled="showLock" v-model:value="formState['reissueTime']"
								value-format="YYYY-MM-DD 00:00:00" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="12">
						<a-form-item label="附件" name="attachment" ref="uploadDataList">
							<UPLoadData :beforeUpload="beforeUpload" :disabled="showLock" listType="picture-card" multiple
								v-model:urls="formState.attachment" :change="changeUpload" />
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
			<div class="btn-box">
				<a-button v-if="dataObj.isType !== '3'" style="margin-right: 16px" type="primary" @click="handleOk">保存</a-button>
				<a-button v-if="dataObj.isType !== '3'" style="margin-right: 16px" class="btn-type" @click="submit">提交</a-button>
				<a-button @click="handleCancel">关闭</a-button>
			</div>
		</a-modal>
	</div>
</template>
<script setup>
import { message } from 'ant-design-vue'
import storageEnterpriseApi from '@/api/policy.info/storageEnterpriseApi' //接口
import global from '@/api/basic.info/global'
const props = defineProps({
	dataObj: {
		type: Object,
		default: () => { }
	}
})
const uploadDataList = ref(null)
const formState = ref({})
const rules = ref({
	reissueTime: [{ required: true, message: '请选择补发时间', trigger: 'change' }],
	attachment: [{ required: true, message: '请上传附件', trigger: 'blur' }]
})
const fileDataId = ref('')
const unitTypeList = ref([])
const isTypeData = ref('')
const showLock = ref(false)
const visible = ref(false)
const titleText = ref('')
const formRef = ref(null)
const emit = defineEmits(['isVisible'])
// 取消按钮
const handleCancel = () => {
	visible.value = false
	emit('isVisible', false)
	formRef.value.resetFields() //resetFields()函数是组件库提供的
	formState.value = {}
	fileDataId.value = ''
}

// 确定按钮
const handleOk = () => {
	console.log(formState.value, 'formState.value')
	formRef.value
		.validate()
		.then(() => {
			if (Array.isArray(formState.value.attachment)) {
				if (formState.value.attachment[0].url) {
					let arrList = formState.value.attachment
					formState.value.attachment = []
					arrList.forEach(item => {
						formState.value.attachment.push(item.url)
					})
					formState.value.attachment = formState.value.attachment.join(',')
				} else {
					formState.value.attachment = formState.value.attachment.join(',')
				}
			}
			// isTypeData === '1' 新增  2是编辑 3是查看
			if (isTypeData.value === '1') return addData()
			if (isTypeData.value === '2') return editData()
		})
		.catch((error) => {
			message.warning('请填写完善')
			console.log('error', error)
		})
}
// 新增
const addData = () => {
	const objList = {
		applyStatus: 0,
		applyType: 3,
		unitInfoId: formState.value.unitInfoId,
		reissueTime: formState.value.reissueTime,
		attachment: formState.value.attachment,
		// sqrEnterpriseId: formState.value.sqrEnterpriseId
		sqrEnterpriseId: fileDataId.value
	}
	storageEnterpriseApi.sqrEnterpriseEdit(objList).then((res) => {
		visible.value = false
		emit('isVisible', false)
		formRef.value.resetFields() //resetFields()函数是组件库提供的
		formState.value = {}
	})
}
// 编辑
const editData = () => {
	const objList = {
		id: props.dataObj.id,
		applyStatus: 0,
		applyType: 3,
		unitInfoId: formState.value.unitInfoId,
		reissueTime: formState.value.reissueTime,
		attachment: formState.value.attachment,
		// sqrEnterpriseId: formState.value.sqrEnterpriseId,
		sqrEnterpriseId: fileDataId.value
	}
	storageEnterpriseApi.sqrEnterpriseEdit(objList).then((res) => {
		visible.value = false
		emit('isVisible', false)
		formRef.value.resetFields() //resetFields()函数是组件库提供的
		formState.value = {}
	})
}

// 文件预览方式
function changeUpload(ev) {
	return global.uploadFile(ev).then((reg) => {
		return reg
	})
}
function beforeUpload() {
	uploadDataList.value.clearValidate()
}
// 提交事件
const submit = () => {
	formRef.value
		.validate()
		.then(() => {
			if (Array.isArray(formState.value.attachment)) {
				if (formState.value.attachment[0].url) {
					let arrList = formState.value.attachment
					formState.value.attachment = []
					arrList.forEach(item => {
						formState.value.attachment.push(item.url)
					})
					formState.value.attachment = formState.value.attachment.join(',')
				} else {
					formState.value.attachment = formState.value.attachment.join(',')
				}
			}
			// isTypeData === '1' 新增  2是编辑 3是查看
			if (isTypeData.value === '1') return submitAdd()
			if (isTypeData.value === '2') return submitEdit()
		})
		.catch((error) => {
			message.warning('请填写完善')
			console.log('error', error)
		})
}
// 提交的新增
const submitAdd = () => {
	const objList = {
		applyStatus: 1,
		applyType: 3,
		unitInfoId: formState.value.unitInfoId,
		reissueTime: formState.value.reissueTime,
		attachment: formState.value.attachment,
		// sqrEnterpriseId: formState.value.sqrEnterpriseId,
		sqrEnterpriseId: fileDataId.value
	}
	storageEnterpriseApi.sqrEnterpriseEdit(objList).then((res) => {
		visible.value = false
		emit('isVisible', false)
		formRef.value.resetFields() //resetFields()函数是组件库提供的
		formState.value = {}
	})
}
//提交的修改
const submitEdit = () => {
	const objList = {
		id: props.dataObj.id,
		applyStatus: 1,
		applyType: 3,
		unitInfoId: formState.value.unitInfoId,
		reissueTime: formState.value.reissueTime,
		attachment: formState.value.attachment,
		sqrEnterpriseId: fileDataId.value
		// sqrEnterpriseId: formState.value.sqrEnterpriseId,
	}
	storageEnterpriseApi.sqrEnterpriseEdit(objList).then((res) => {
		visible.value = false
		emit('isVisible', false)
		formRef.value.resetFields() //resetFields()函数是组件库提供的
		formState.value = {}
	})
}
// 用于查看调用 
const detailData = () => {
	storageEnterpriseApi.sqrEnterpriseDetail({ id: props.dataObj.id, unitInfoId: props.dataObj.unitInfoId, applyType: 3 }).then((res) => {
		formState.value = {}
		formState.value = {
			// sqrEnterpriseId: res.sqrEnterpriseId,
			unitInfoId: res.unitInfoId,
			dwdm: res.dwdm, zcdz: res.zcdz, fddbr: res.fddbr,
			dictLabel: res.dictLabel, reissueTime: res.reissueTime,
		}
		fileDataId.value = res.sqrEnterpriseId
		if (res.attachment) {
			formState.value.attachment = []
			formState.value.attachment = res.attachment.split(',') || ''
		}
	})
}
// 获取证书补发企业名称
const getReportData = () => {
	storageEnterpriseApi.enterpriseName({}).then((res) => {
		unitTypeList.value = res
	})
}
//触发证书补发企业名称事件
const enterpriseData = (val) => {
	formState.value = {}
	unitTypeList.value.forEach(item => {
		if (val.value === item.unitInfoId) {
			formState.value = {
				unitInfoId: item.unitInfoId,
				dwdm: item.dwdm,
				zcdz: item.zcdz,
				fddbr: item.fddbr,
				dictLabel: item.dictLabel,
				// sqrEnterpriseId: item.id,
			}
			fileDataId.value = item.id
		}
	})
}
// 监听点击事件更新数据
watch(
	() => props.dataObj,
	async (newValue, oldvalue) => {
		await nextTick()
		titleText.value = newValue.titleText
		visible.value = newValue.visible
		showLock.value = newValue.showLock
		isTypeData.value = newValue.isType
		getReportData()
		// isType字段用于查看接口
		if (newValue.isType == '2' || newValue.isType == '3') {
			formState.value.id = newValue.id
			formState.value.status = newValue.status
			detailData()
		} else {
			// 用于新增时清空表格数据
			formState.value = {}
		}
	},
	{ deep: true, immediate: true }
)
</script>
<style lang="less" scoped>
.ant-input {
	width: 80%;
}

/* 针对 a-form-item 的 label 应用样式 */
::v-deep .ant-form-item-label {
	width: 130px;
	text-align: right;
}

::v-deep .ant-form-item-control-input {
	width: 100%;
}

.title-box {
	width: 91.7%;
}

.ant-picker {
	width: 80%;
}

.ant-select {
	width: 80% !important;
}

.from-input {
	width: 101.4%;
}

::v-deep.ant-modal-footer {
	display: none !important;
}

.text-box {
	width: 94.6%;
}

.btn-box {
	text-align: center;
}

.btn-type {
	background-color: #22ce8d;
	color: #fff;
}
</style>
