<template>
	<div>
		<el-dialog v-model="props.dialogVisible" :title="props.dialogTitle"  width="30%" :before-close="closeModal" >
			<span>
				
				<el-form ref="form" :rules="rules" :model="formData" label-width="60px" >
					<el-form-item :label="props.title" prop="reason">
						<el-input v-model="formData.reason"  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({
		reason: [
			{ required: true, message: '请输入原因...', trigger: 'blur' }, 
		], 
	})

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

	let form = ref('');

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


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

	function closeModal (){
		formData.value = {
			reason : '' 
		}

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

</script>

<style lang="scss" scoped>

</style>