<template>
    <!-- 添加或修改项目信息对话框 -->
    <div class="el-drawer__wrapper">
        <el-dialog :title="title" v-model="visible" width="500px" @close="cancel" append-to-body>



            <el-form ref="checkRef" class="master-container" :model="form" :rules="rules" label-width="120px" style="margin-top: 20px;">
                <el-row :gutter="30">
                    <el-col :span="24">
                        <el-form-item label="检查类别编码" prop="code">
                            <el-input :disabled="!editStatus" v-model="form.code" placeholder="请输入检查类别编码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="检查类别名称" prop="name">
                            <el-input  v-model="form.name" placeholder="请输入检查类别名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input  v-model="form.remark" placeholder="请输入备注" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>

        </el-dialog>
    </div>
</template>
<script setup>
import { getCheck, addCheck, updateCheck } from "@/api/business/check";
const { proxy } = getCurrentInstance()
/** 父组件传参 */
const props = defineProps({
    getList: {
        type: Function,
        default: () => { }
    }
})
const { getList } = toRefs(props)
/** 字典数组区 */
/** 表单抽屉 页变量 */
const title = ref("")
const loading = ref(false)
const multiple = ref(true)
const visible = ref(false)
const editStatus = ref(false)
const isFullscreen = ref(false)
const webHost = import.meta.env.VITE_APP_BASE_API
const data = reactive({
    form: {},
    rules: {
        code: [
            { required: true, message: "检查类别编码不能为空", trigger: "blur" }
        ],
        name: [
            { required: true, message: "检查类别名称不能为空", trigger: "blur" }
        ],
    }
});
const { form, rules } = toRefs(data);
/***********************  方法区  ****************************/
/** 打开抽屉 */
function open(id) {
    reset();
    visible.value = true;
    if (id) {
        getCheck(id).then(response => {
            form.value = response.data;
            editStatus.value = false
            title.value = "修改项目信息"
        })
    } else {
        editStatus.value = true
        title.value = "添加项目信息"
    }
}

/** 取消按钮 */
function cancel() {
    visible.value = false;
    reset();
}

/** 表单重置 */
function reset() {
    form.value = {
        id: null,
        code: null,
        name: null,
        remark: null,
        status: null,
        creatorId: null,
        createTime: null,
        updaterId: null,
        updateTime: null,
        deleted: null,
        version: null
    };
    proxy.resetForm("checkRef");
}

/** 全屏缩放 */
function handleScreen() {
    const dom = document.querySelector('.list-container > .el-drawer__wrapper > .el-overlay')
    isFullscreen.value = !isFullscreen.value
    dom.style.position = isFullscreen.value ? 'fixed' : 'absolute'
}


/** 提交按钮 */
function submitForm() {
    proxy.$refs["checkRef"].validate(valid => {
        if (valid) {
            if (form.value.id != null) {
                updateCheck(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    visible.value = false;
                    getList.value()
                });
            } else {
                addCheck(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    visible.value = false;
                    getList.value()
                });
            }
        }
    });
}

/** 查询表单信息  */
function getForm() {
    loading.value = true
    getCheck(form.value.id).then(response => {
        loading.value = false
        form.value = response.data
    })
}

/** 暴露给父组件的方法 */
defineExpose({
    open
})
</script>
