<template>
	<div class="globalparam-box" v-loading="devLoading">
		<pageTitle :title="title"></pageTitle>
		<div class="form">
			<el-form
				ref="dataFormRef"
				label-suffix=":"
				:rules="dataRule"
				:model="dataForm"
				label-width="200px"
				size="large"
			>
				<el-row>
					<el-col :span="8">
						<el-form-item label="接收超期(天)" prop="receParamValue">
							<el-input-number
								:precision="0"
								:min="1"
								:max="99"
								placeholder="请输入接收超期时限时间"
								v-model="dataForm.receParamValue"
								class="in-put"
							></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="处理超期(月)" prop="handParamValue">
							<el-input-number
								:precision="0"
								:min="1"
								:max="12"
								placeholder="请输入处理超期时限时间"
								v-model="dataForm.handParamValue"
								class="in-put"
							></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="处置完成超期(天)" prop="closParamValue">
							<el-input-number
								:precision="0"
								:min="1"
								:max="99"
								placeholder="请输入处置完成时限时间"
								v-model="dataForm.closParamValue"
								class="in-put"
							></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>

				<el-form-item label="假期列表" prop="holidayParamValue">
					<el-input
						v-model="dataForm.holidayParamValue"
						maxlength="2000"
						show-word-limit
						:autosize="{ minRows: 3 }"
						type="textarea"
						placeholder="请输入假期列表，内容2000字以内"
					/>
				</el-form-item>
				<el-form-item label="调休列表" prop="txdateParamValue">
					<el-input
						v-model="dataForm.txdateParamValue"
						maxlength="2000"
						show-word-limit
						:autosize="{ minRows: 3 }"
						type="textarea"
						placeholder="请输入调休列表，内容2000字以内"
					/>
				</el-form-item>
			</el-form>
		</div>
		<div class="globalparam-footer">
			<el-button type="primary" @click="handleConfirmClick(dataFormRef)">保存</el-button>
			<el-button @click="resetForm()">重置</el-button>
		</div>
	</div>
</template>

<script setup lang="ts" name="modal">
import { getCurrentInstance, ComponentInternalInstance, ref, reactive } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import pageTitle from '@/components/components/pageTitle.vue';
import useSystemStore from '@/store/main';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const dataForm = reactive<any>({
	receParamValue: 5,
	handParamValue: 1,
	closParamValue: 5,
	holidayParamValue: '',
	txdateParamValue: '',
});
const dataFormRef = ref<FormInstance>();
const title = '超期提醒';
const systemStore = useSystemStore();

const resetForm = () => {
	if (!dataFormRef.value) return;
	dataFormRef.value.resetFields();
	dataForm.value = JSON.parse(dataString.value);
};
/* 自定义校验：仅数字 + 英文逗号 */
const validateHoliday = (rule: any, value: string, callback: (err?: Error) => void) => {
	if (!value) return callback(new Error('请输入假期列表'));
	if (!/^\d+(,\d+)*$/.test(value)) {
		return callback(new Error('仅允许输入数字，用英文逗号分隔'));
	}
	callback();
};
const dataRule: FormRules = {
	receParamValue: [{ required: true, message: '请输入接收超期时限时间', trigger: 'blur' }],
	handParamValue: [{ required: true, message: '请输入处理超期时限时间', trigger: 'blur' }],
	closParamValue: [{ required: true, message: '请输入关闭时限时间', trigger: 'blur' }],
	holidayParamValue: [
		{ required: true, message: '请输入假期列表', trigger: 'blur' },
		{ validator: validateHoliday, trigger: 'blur' },
	],
	txdateParamValue: [
		{ required: true, message: '请输入调休列表', trigger: 'blur' },
		{ validator: validateHoliday, trigger: 'blur' },
	],
};
// 点击确定
function handleConfirmClick(formEl: FormInstance | undefined) {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
			proxy!.$modal.msgSuccess('您已保存成功');
		} else {
			console.log('error submit!', fields);
		}
	});
}
const devLoading = ref(false);
const dataString = ref();
function getOverTime() {
	// devLoading.value = true;
	// getOverTime({}).then(response => {
	// 	const data = response.data;
	// 	if (data.code === 0) {
	// 		devLoading.value = false;
	// 		dataForm.receParamValue = parseInt(dataForm.receParamValue);
	// 		dataForm.handParamValue = parseInt(dataForm.handParamValue);
	// 		dataForm.closParamValue = parseInt(dataForm.closParamValue);
	// 		dataString.value = JSON.stringify(dataForm);
	// 	} else {
	// 		devLoading.value = false;
	// 		proxy!.$modal.msgError(data.msg);
	// 	}
	// });
}
getOverTime();
</script>

<style lang="scss" scoped>
.globalparam-box {
	background-color: #fff;
	margin: 20px;
	padding: 15px 20px 20px 20px;
}
.globalparam-footer {
	text-align: center;
}
.form {
	padding: 10px 30px;
}
.form .el-input__wrapper {
	width: 100% !important;
}
.in-put {
	width: 100%;
	text-align: left;
}
</style>
