<template>
	<xn-form-container :title="'基本设置'" :width="800" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-form :model="formState" ref="formStateRef" :rules="formStateRules" name="basic" autocomplete="off">
			<div class="form">
				<a-row>
					<a-col :span="12">
						<a-form-item
							class="form-item"
							label="标题"
							name="title"
							:label-col="{ span: 10 }"
							:rules="[{ required: true, message: '请输入新闻标题!', trigger: 'change' }]"
						>
							<a-input
								placeholder="请输入新闻标题"
								style="width: 600px"
								:disabled="disabled"
								v-model:value="formState.title"
							/>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="12">
						<a-form-item class="form-item" label="索引号" name="indexNumber" :label-col="{ span: 10 }">
							<a-input
								style="width: 250px"
								placeholder="示例:01500029X/2024-00055"
								disabled
								v-model:value="formState.indexNumber"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item class="form-item" label="主题分类" name="subjectClassificationId" :label-col="{ span: 10 }">
							<a-select :disabled="disabled" style="width: 250px" v-model:value="formState.subjectClassificationId">
								<a-select-option :value="'1'">禁用</a-select-option>
								<a-select-option :value="'2'">启用</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>

				<a-row>
					<a-col :span="12">
						<a-form-item class="form-item" label="发布日期" name="publishDate" :label-col="{ span: 10 }">
							<a-date-picker
								:disabled="disabled"
								v-model:value="formState.publishDate"
								valueFormat="YYYY-MM-DD HH:mm:ss"
								style="width: 250px"
							/>
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item class="form-item" label="发布机构" name="publishInstitution" :label-col="{ span: 10 }">
							<a-input style="width: 250px" :disabled="disabled" v-model:value="formState.publishInstitution" />
						</a-form-item>
					</a-col>
				</a-row>

				<!--  -->
				<a-row>
					<a-col :span="12">
						<a-form-item class="form-item" label="发文字号" name="documentNumber" :label-col="{ span: 10 }">
							<a-input style="width: 250px" :disabled="disabled" v-model:value="formState.documentNumber" />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item class="form-item" label="是否有效" name="isValid" :label-col="{ span: 10 }">
							<a-select style="width: 250px" :disabled="disabled" v-model:value="formState.isValid">
								<a-select-option :value="1">是</a-select-option>
								<a-select-option :value="0">否</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
			</div>

			<a-row :span="23">
				<a-col :span="20">
					<a-form-item ref="uploadDataList" class="form-item" label="附件" name="attachments" :label-col="{ span: 4 }">
						<DIYUPLoad
							:beforeUpload="beforeUpload"
							multiple
							:disabled="disabled"
							:change="changeUpload"
							listType="picture-card"
							v-model:urls="formState.attachments"
						></DIYUPLoad>
					</a-form-item>
				</a-col>
			</a-row>
			<div><span style="color: red">* </span>新闻内容:</div>
			<br />
			<a-form-item
				class="form-item"
				label="''"
				ref="EditorRef"
				name="noticeContent"
				:label-col="{ span: 0 }"
				:rules="[{ required: true, message: '请输入新闻内容!', trigger: 'change' }]"
			>
				<Editor
					@getTXTLE="getTXTLEDEL"
					:fileUploadFunction="global.uploadFile"
					:placeholder="'请输入新闻内容'"
					:disabled="disabled"
					v-model:modelValue="formState.noticeContent"
				/>
			</a-form-item>

			<a-form-item>
				<div class="item-submit">
					<a-button class="btn1" :disabled="disabled" @click="onFinish(2)">提交</a-button>
					<a-button class="btn1" :disabled="disabled" type="primary" @click="onFinish(1)">保存</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/home/home.js'
	import { ref } from 'vue'
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import global from '@/api/home/global.js'
	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
				indexNumberDEl()
				if (row) {
					detail(row.id)
				}
			}
			const rest = () => {
				for (let key in formState.value) {
					formState.value[key] = ''
				}
			}
			const detail = async (v) => {
				const res = await business.LSJQdetail({ id: v })
				formState.value = res
				formState.value.attachments = (res.attachments || '').split(',').filter((v) => v)
			}
			const onClose = () => {
				rest()
				visible.value = false
			}

			const indexNumberDEl = async () => {
				const res = await business.RRTYIUdet()
				formState.value.indexNumber = res
			}
			watch(
				() => visible.value,
				(newVal) => {
					if (!newVal) {
						setTimeout(() => {
							rest()
						}, 0)
					}
				},
				{ immediate: true, deep: true }
			)
			const formState = ref({
				title: '',
				indexNumber: '',
				subjectClassificationId: '',
				publishDate: '',
				publishInstitution: '',
				documentNumber: '',
				isValid: '',
				noticeContent: '',
				attachments: '',
				status: 0
			})
			const formStateRules = ref({
				// systemName: [{ required: true, message: '请填写!', trigger: 'blur' }],
				// publishTime: [{ required: true, message: '请填写!', trigger: 'change' }],
				// attachment: [{ required: true, message: '请填写!', trigger: 'change' }]
			})

			const formStateRef = ref(null)
			const onFinish = async (status) => {
				formStateRef.value.validate().then(async () => {
					try {
						if (Array.isArray(formState.value.attachments)) {
							formState.value.attachments = formState.value.attachments.join(',')
						}
						formState.value.status = status
						await handleAdd(formState.value)
						emit('change')
						onClose()
					} catch (err) {
						console.log(err)
					}
				})
			}

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

			const delADD = () => {
				formStateRef.value.validate().then(() => {})
			}

			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()
			}
			// EditorRef
			const EditorRef = ref(null)
			const getTXTLEDEL = (v) => {
				if (v !== undefined || v !== null || v !== '') {
					EditorRef.value.clearValidate()
				}
			}
			return {
				getTXTLEDEL,
				EditorRef,
				global,
				beforeUpload,
				uploadDataList,
				changeUpload,
				delADD,
				formStateRef,
				formStateRules,
				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: 250px;
	}
	.ant-form-item-label {
		width: 150px;
	}
	.attachment {
		margin-top: 30px;
		margin-left: 15px;
	}
</style>
