<template>
    <super-dialog
        v-model="dialogVisible"
        :title="title"
        custom-class="notification-dialog"
        top="10%"
        width="30%"
        @closed="closePage"
    >
        <div
            v-loading="detailLoading"
            class="table-container"
            element-loading-background="rgba(10 ,38 ,61, 0.9)"
        >
            <el-form
                ref="addEditFormRef"
                :model="addEditForm"
                :rules="addEditFormRules"
                size="large"
                label-position="left"
                label-suffix="："
            >
                <el-form-item label="驳回意见" prop="comments">
                    <el-input
                        v-model="addEditForm.comments"
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 6 }"
                        placeholder="请输入驳回意见"
                    />
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" style="display: flex; justify-content: center; width: 100%">
            <el-button type="danger" @click="submitObject">驳回</el-button>
            <el-button @click="closePage">取消</el-button>
        </div>
    </super-dialog>
</template>

<script lang="ts" setup>
import SuperDialog from '@/components/Dialog/index.vue'

// 1. 定义 props
const props = defineProps({
    isShowAdd: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ''
    },
    info: {
        type: Object,
        default: () => ({})
    }
})

onMounted(() => {})

const detailLoading = ref<Boolean>(false)

const addEditFormRef = ref<any>(null)

const addEditForm = ref<any>({
    comments: ''
})

const addEditFormRules = ref<any>({
    comments: [{ required: true, message: '请输入驳回意见', trigger: 'blur' }]
})

function submitObject() {
    addEditFormRef.value?.validate((valid: any, object: any) => {
        if (!valid) {
            ElMessage.warning(
                `有${Object.keys(object || {}).length}个字段未通过校验，请正确填写表单内容。`
            )
        } else {
            ElMessage.success('驳回成功')
            emit('rejectSuccess', addEditForm.value.comments)
            closePage()
        }
    })
}

// 2. 定义 emit
const emit = defineEmits(['update:isShowAdd', 'rejectSuccess'])

const openPage = () => {
    // loadData()
}

const closePage = () => {
    addEditForm.value.comments = ''
    addEditFormRef.value?.resetFields()
    dialogVisible.value = false
}

defineExpose({
    openPage
})

// 3. 使用 computed 定义双向绑定
const dialogVisible = computed({
    get() {
        return props.isShowAdd
    },
    set(val) {
        emit('update:isShowAdd', false)
    }
})
</script>

<style lang="scss" scoped>
.move-type-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0 0 20px 10px;
}
</style>
