<template>
    <div class="bigBox">
        <MOSTY.FromPage :title="props.formData.title" @closeDialog="black">
            <template #content>
                <MOSTY.Assort :title="'基础信息'" />
                <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="130px" :model="fromData" :inline="true"
                    :rules="rules" :disabled="!props.formData.saveBtnShow">
                    <el-form-item label="人员:" prop="username">
                        <el-input v-model="fromData.username" disabled style="width: 337px" />
                    </el-form-item>
                    <el-form-item label="所属部门:" prop="deptname">
                        <el-input v-model="fromData.deptname" disabled clearable style="width: 337px" />
                    </el-form-item>
                    <el-form-item label="复烤量:" prop="volume">
                        <el-input v-model="fromData.volume" placeholder="请输入复烤量" style="width: 337px">
                            <template #append>万担</template></el-input>
                    </el-form-item>
                    <el-form-item label="年份:" prop="yearly">
                        <el-date-picker v-model="fromData.yearly" type="year" format="YYYY" value-format="YYYY"
                            placeholder="选择年份" style="width: 337px">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="备注:" style="width: 100%;">
                        <el-input v-model="fromData.bz" clearable style="width: 1332px" />
                    </el-form-item>
                </el-form>
            </template>
            <template #footer>
                <el-button type="primary" @click="submit(ruleFormRef)" v-loading='saveloading'
                    v-if="props.formData.saveBtnShow"> <el-icon>
                        <DocumentChecked />
                    </el-icon>保存</el-button>
                <el-button @click="black">
                    <el-icon>
                        <DocumentDelete />
                    </el-icon> 关闭</el-button>
            </template>
        </MOSTY.FromPage>
    </div>
</template>

<script setup>
import {
    reactive,
    ref,
    onMounted,
    getCurrentInstance

} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import * as rule from "@/utils/rules.js";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
const { proxy } = getCurrentInstance();
const rules = {
    ...rule.znumberRule({ validator: true, require: true }, "volume"),
    yearly: [{ required: true, message: "请选择年份", trigger: "blur" }],
    username: [{ required: true, message: "请选择人员", trigger: "blur" }],
};
const props = defineProps({
    formData: {
        type: Object,
        default: {}
    }
});
const fromData = ref({})
const saveloading = ref(false)
const emit = defineEmits("changePage");
const ruleFormRef = ref();
onMounted(() => {
    fromData.value.buildid = props.formData.buildid ? props.formData.buildid : null;
    fromData.value.buildname = props.formData.buildname ? props.formData.buildname : null;
    fromData.value.username = getItem("USERNAME");
    fromData.value.userid = getItem("USERID").toString();
    fromData.value.deptcode = getItem("deptId").ssbmid;
    fromData.value.deptname = getItem("deptId").ssbmmc;
    if (props.formData.id) {
        getmain(props.formData.id)
    }
});



// 保存
const submit = async (ruleFormRef) => {
    saveloading.value = true
    if (!ruleFormRef) return;
    await ruleFormRef.validate((valid) => {
        if (valid) {
            if (fromData.value) {
                if (fromData.value.id) {
                    postApi(fromData.value, "/mosty-jcgl/redryingNumber/updateRedryingNumberOne")
                        .then((res) => {
                            ElMessage.success("修改成功");
                            emit("changePage", "Todilog");
                        }).finally(() => {
                            saveloading.value = false
                        })
                } else {
                    postApi(fromData.value, "/mosty-jcgl/redryingNumber/addRedryingNumberOne")
                        .then((res) => {
                            ElMessage.success("新增成功");
                            emit("changePage", "Todilog", res);
                        }).finally(() => {
                            saveloading.value = false
                        })
                }


            }
        } else {
            ElMessage.error("请输入必填项!");
            saveloading.value = false
        }
    });
};
//获取详情
function getmain(id) {
    if (id) {
        getApi({ id: id }, "/mosty-jcgl/redryingNumber/queryRedryingById").then((res) => {
            if (res) {
                fromData.value = res;
            }
        });
    }
}

const black = () => {
    if (props.formData.saveBtnShow) {
        proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
            .then(() => {
                // 关闭上一次的表单校验
                ruleFormRef.value.clearValidate();
                emit("changePage");
            })
            .catch(() => {
                // catch error
            })
    } else {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emit("changePage");
    }

};

</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
    margin-left: 0px !important;
}

.table-lable {
    margin: 10px;
    color: var(--el-color-primary);
}

::v-deep ::-webkit-scrollbar {
    display: none !important;
}

::v-deep .el-pagination {
    justify-content: center !important;
}



::v-deep .el-form {
    // width: 1580px;
    margin: auto;
    padding: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: start;
}

.el-form-item {
    display: flex;
    margin-right: 20px;
}

.bigBox {
    display: block !important;
    padding: 0 14px;
    box-sizing: border-box;
}




::v-deep .el-table .cell {
    padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
    padding-left: 0px !important;

    >input {
        width: 100%;
        height: 33px;
    }
}



::v-deep .el-upload-list {
    width: 50%;
}
</style>