<template>
	<xn-form-container :title="'人才培训管理'" :width="800" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-form :model="formState" name="basic" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
			<a-form-item
				class="form-item"
				label=" 主题"
				name="theme"
				:label-col="{ span: 4 }"
				:rules="[{ required: true, message: '请输入!', trigger: 'blur' }]"
			>
				<a-input placeholder="请输入主题" style="width: 300px" :disabled="disabled" v-model:value="formState.theme" />
			</a-form-item>

			<a-form-item
				class="form-item"
				label="类别"
				:rules="[{ required: true, message: '请输入!', trigger: 'blur' }]"
				name="category"
				:label-col="{ span: 4 }"
			>
				<a-select
					style="width: 300px"
					:disabled="disabled"
					v-model:value="formState.category"
					@change="handleChangeName"
				>
					<a-select-option v-for="item in optionsName" :key="item.id" :value="item.id">{{
						item.dictLabel
					}}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item class="form-item" label="范围" name="scope" :label-col="{ span: 4 }">
				<a-input placeholder="请输入范围" style="width: 300px" :disabled="disabled" v-model:value="formState.scope" />
			</a-form-item>

			<a-form-item
				class="form-item"
				label="发布人"
				:rules="[{ required: true, message: '请输入!', trigger: 'blur' }]"
				name="publisher"
				:label-col="{ span: 4 }"
			>
				<a-input
					placeholder="请输入发布人"
					style="width: 300px"
					:disabled="disabled"
					v-model:value="formState.publisher"
				/>
			</a-form-item>

			<a-form-item
				class="form-item"
				label="发布时间"
				:rules="[{ required: true, message: '请输入!', trigger: 'blur' }]"
				name="publishTime"
				:label-col="{ span: 4 }"
			>
				<a-date-picker
					style="width: 300px"
					:disabled="disabled"
					v-model:value="formState.publishTime"
					valueFormat="YYYY-MM-DD HH:mm:ss"
				/>
			</a-form-item>

			<!--  -->

			<a-form-item
				class="peix-run shuo-ming"
				label="发布内容"
				name="publishContent"
				:label-col="{ span: 4 }"
				:rules="[{ required: true, message: '请输入!', trigger: 'blur' }]"
			>
				<a-textarea
					placeholder="请输入发布内容"
					:disabled="disabled"
					v-model:value="formState.publishContent"
					allow-clear
				/>
			</a-form-item>

			<div class="attachment">
				<a-form-item
					ref="uploadDataList"
					:rules="[{ required: true, message: '请输入!', trigger: 'blur' }]"
					class="form-item"
					label="附件"
					name="attachment"
					:label-col="{ span: 4 }"
				>
					<DIYUPLoad
						:beforeUpload="beforeUpload"
						multiple
						:disabled="disabled"
						:change="changeUpload"
						listType="picture-card"
						v-model:urls="formState.attachment"
					></DIYUPLoad>
				</a-form-item>
			</div>
			<a-form-item>
				<div class="item-submit">
					<a-button class="btn1" @click="onClose">取消</a-button>
					<a-button class="btn1" type="primary" html-type="submit">保存</a-button>
				</div>
			</a-form-item>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
		</template>
	</xn-form-container>
</template>
<script lang="js">
	import business from '@/api/business/personnelApi.js'
	import businessDel from '@/api/business/dictionary.js'
	import { ref } from 'vue'
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import global from '@/api/basic.info/global'
	export default {
		name: 'FromName',
		components: {},
		emits: ['change'],

		setup(props, { emit }) {
			const disabled = ref(false)
			const visible = ref(false)
			const records = ref('')
			const onOpen = (record, flag, view, row) => {
				records.value = record
				visible.value = flag
				disabled.value = view
				if (row) {
					detail(row.id)
					formState.value.id = row.id
				}
			}
			const detail = async (v) => {
				const res = await business.ZSKJKView({ id: v })
				Object.assign(formState.value, res)
				formState.value.attachment = res.attachment.split(',')
			}
			const onClose = () => {
				visible.value = false
			}
			watch(
				() => visible.value,
				(newVal) => {
					if (!newVal) {
						setTimeout(() => {
							formState.value = {
								id: '',
								theme: '',
								category: '',
								scope: '',
								publisher: '',
								publishTime: '',
								publishContent: '',
								attachment: ''
							}
						}, 0)
					}
				},
				{ immediate: true, deep: true }
			)

			const formState = ref({
				id: '',
				theme: '',
				category: '',
				scope: '',
				publisher: '',
				publishTime: '',
				publishContent: '',
				attachment: ''
			})
			onMounted(() => {
				getEthnicity()
			})
			const formStateRef = ref(null)
			const optionsName = ref([]) //category
			const getEthnicity = async () => {
				const res = await businessDel.genderDEl({ isQueryFristNode: true, parentId: '1783685063975374850' })
				optionsName.value = res
			}
			const handleChangeName = (v) => {}

			const onFinish = async (values) => {
				formState.value.attachment = values.attachment.join(',')
				await handleAdd(formState.value)
				emit('change')
				formState.value = {
					id: '',
					theme: '',
					category: '',
					scope: '',
					publisher: '',
					publishTime: '',
					publishContent: '',
					attachment: ''
				}
				onClose()
			}

			const handleAdd = async (val) => {
				if (records.value == 'edit') {
					console.log(records.value)
					const res = await business.ZSKJKEdit(val)
				} else {
					const res = await business.ZSKJKADD(val)
					console.log('add')
				}
			}

			const onFinishFailed = (errorInfo) => {
				console.log('Failed:', errorInfo)
			}

			function changeUpload(fd) {
				return global.uploadFile(fd).then((reg) => {
					uploadDataList.value.clearValidate()
					return reg
				})
			}
			const uploadDataList = ref(null)
			function beforeUpload() {
				uploadDataList.value.clearValidate()
			}

			return {
				handleChangeName,
				optionsName,
				uploadDataList,
				beforeUpload,
				formStateRef,
				changeUpload,
				formState,
				onFinish,
				onFinishFailed,
				disabled,
				onOpen,
				visible,
				onClose
			}
		}
	}
</script>
<style lang="less" scoped>
	.box1 {
		display: flex;
		justify-content: space-between;
		.box-left {
			width: 350px;
			align-items: center;
		}
		.box-right {
			width: 350px;
			margin-right: 10px;
			align-items: center;
		}
	}
	.common {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30px;
		.title {
			width: 130px;
			text-align: right;
			margin-right: 5px;
		}
	}
	.input {
		margin-right: 10px;
		margin-left: 40px;
		margin-top: 20px;
		.ant-input-affix-wrapper {
			height: 100px;
		}
	}
	.btnBox {
		text-align: center;
		margin-top: 100px;
		.snowy-buttom-left {
			margin-left: 100px;
		}
		.acc {
			width: 80px;
			height: 40px;
		}
	}
	.form {
		display: flex;
		flex-wrap: wrap;
		// justify-content: center;
		.form-item {
			width: 250px;
			margin-right: 120px;
		}
	}
	.item-submit {
		display: flex;
		justify-content: center;
		margin-top: 100px;
		.btn1 {
			width: 100px;
			margin-right: 20px;
		}
	}
	.ant-select {
		width: 250px;
	}
	.ant-input {
		width: 350px;
	}
	.ant-form-item-label {
		width: 100px;
	}
	.attachment {
		margin-top: 30px;
		// margin-left: 15px;
	}
	.shuo-ming {
		::v-deep(.ant-input) {
			height: 100px;
		}
	}
</style>
