<template>
    <el-dialog :model-value="visible" :title="title" :close-on-click-modal="false" :close-on-press-escape="false"
        @close="handleCancel" :width="width">
        <el-form :model="form" ref="formRef" :rules="rules">
            <el-form-item label="" prop="reason">
                <el-input v-model="form.reason" autocomplete="off" type="textarea" show-word-limit maxlength="255"
                    :autosize="{ minRows: 2, maxRows: 4 }" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleConfirm">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import type { FormInstance, FormRules } from 'element-plus';
import { reactive, ref } from 'vue';

const props = defineProps({
    title: { type: String, default: '' },
    visible: { type: Boolean, default: true },
    width: { type: [Number, String], default: '50%' },
    onCancel: { type: Function, default: () => { } },
    onConfirm: { type: Function, default: () => { } },
})
const formRef = ref<FormInstance>()
const form = reactive({
    reason: ''
})
const rules = reactive<FormRules>({
    reason: { required: true, message: '请输入拒绝理由', trigger: 'blur' }
})
/**确认 */
const handleConfirm = () => {
    formRef.value?.validate((valid => {
        if (!valid) return
        props.onConfirm(form)
        handleCancel()
    }))
}
const handleCancel = () => {
    props.onCancel()
}

</script>
<style scoped></style>