<template>
	<div>
		<!-- 申请延期弹出框 -->

		<el-dialog v-model="props.dialogVisible" title="申请延期"  width="30%" :before-close="closeModal" >
			<span>
				
				<el-form ref="form" :rules="rules" :model="formData" label-width="80px" >
					<el-form-item label="延期时间" prop="delaytime">
						<el-date-picker style="width:100%" v-model="formData.delaytime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"  placeholder="请选择延期时间" />
					</el-form-item>

					<el-form-item label="延期原因" prop="delayreason">
						<el-input v-model="formData.delayreason"  type="textarea" />
					</el-form-item>
				</el-form>

			</span>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeModal">取 消</el-button>
					<el-button type="primary" @click="submit">确 认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup> 
	import { ref, defineEmits, defineProps, getCurrentInstance } from 'vue';

	const rules = ref({
		delayreason: [
			{ required: true, message: '请输入原因...', trigger: 'blur' }, 
		], 
		delaytime: [
			{ required: true, message: '请选择延期时间...', trigger: 'blur' }, 
		], 
	})

	const props = defineProps({
		dialogVisible : { 
			type: Boolean,
			default: false
		},
		title : {
			type : String,
			default : '原因'
		}
	})

	let form = ref('');

	let formData = ref({
		delaytime : '',
		delayreason : ''
	})
 
	const emit = defineEmits(['update:dialogVisible', 'submit'])


	function submit (){
		form.value.validate((bool)=>{
			if(bool){
				emit('submit', formData.value);
				closeModal()
			}
		})
	}

	function closeModal (){
		formData.value = {
			delaytime : '',
			delayreason : '' 
		}

		emit('update:dialogVisible' , false);
	}
	

</script>

<style lang="scss" scoped>

</style>