<template>
    <el-drawer v-model="open" :title="`申领清单`" :before-close="handleClose" direction="rtl" class="demo-drawer"
        modal-class="el-subscribe-drawer" size="80%">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" label-position="top">
            <el-form-item label="说明" prop="warehouseApplyExplain">
                <el-input maxlength="300" v-model="form.warehouseApplyExplain" type="textarea" placeholder="请输入说明"
                    autofocus />
            </el-form-item>
            <el-divider content-position="center">物料清单</el-divider>
        </el-form>

        <Index :editable="false" />
        <template #footer>
            <el-button plain @click="handleClose">取 消</el-button>
            <el-button :disabled="disabled" type="primary" @click="submitForm">提 交</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import { clearWarehouseApplyDetails, addWarehouseApplyDetails, updateWarehouseApplyDetails } from "@/utils/warehouseApplyDetails";
import { listWarehouseApply, getWarehouseApply, delWarehouseApply, addWarehouseApply, updateWarehouseApply } from "@/api/warehouseApply/warehouseApply";

import Index from "@/components/WarehouseApplyDetails/index";
const { proxy, ctx } = getCurrentInstance();
const open = ref(false);
const disabled = ref(true);
const store = useStore();
const emit = defineEmits();

const data = reactive({
    form: {},

    rules: {
        warehouseApplyExplain: [
            {
                required: true,
                message: "说明不能为空",
                trigger: "blur",
            },
        ],
    }
})

const { form, rules } = toRefs(data);




// 显示弹框
function show() {
    open.value = true;
    disabled.value = Object.values(store.state.data.warehouseApplyDetails).length <= 0;
}

// 关闭按钮
function handleClose() {
    form.value = {}
    open.value = false;
    emit("close")
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            form.value.warehouseApplyDetailsList = Object.values(store.state.data.warehouseApplyDetails);
            if (form.value.warehouseApplyId != null) {
                updateWarehouseApply(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    handleClose()
                    emit("submit")
                });
            } else {
                addWarehouseApply(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    handleClose()
                    clearWarehouseApplyDetails(false)
                    emit("submit")
                });
            }
        }
    });
}



defineExpose({
    show,
    handleClose,
});
</script>