<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
        <el-container v-loading="loading">
            <el-main style="padding: 0 20px 20px 20px">
                <el-form ref="dialogForm" :model="form" :rules="rules" label-width="120px">
                    <el-row>
                        <el-col :md="12" :sm="24">

                            <el-form-item label="所需物料" prop="material">
                                <el-select v-model="form.material" placeholder="所需物料" clearable style="width:100%">
                                    <el-option v-for="item in options" :key="item.id" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :md="12" :sm="24">
                            <el-form-item label="所需数量" prop="need_count">
                                <el-input-number v-model="form.need_count" :precision="0" :min="0" controls-position="right"
                                    placeholder="所需数量" style="width:100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :md="12" :sm="24">
                            <el-form-item label="需求日期">
                                <el-date-picker v-model="form.need_date" type="date" placeholder="需求日期"
                                    value-format="YYYY-MM-DD" style="width:100%">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-form-item label="所属部门">
                            <el-select v-model="form.belong_dept" placeholder="所属部门" clearable style="width: 100%;">
                                <el-option v-for="item in deptOptions" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-col :md="12" :sm="24">
                            <el-form-item label="备注">
                                <el-input v-model="form.note" placeholder="备注" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-main>
            <el-footer>
                <el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
                <el-button @click="visible = false">取消</el-button>
            </el-footer>
        </el-container>
    </el-dialog>
</template>
<script>
export default {
    emits: ["success", "closed"],
    props: {
        puPlan: { type: String, default: '' },
    },
    data() {
        return {
            loading: false,
            mode: "add",
            titleMap: {
                add: "新增采购详情",
                edit: "编辑采购详情",
                show: "查看采购详情",
            },
            form: {},
            rules: {
                material: [{ required: true, message: "请选择物料", trigger: "blur" }],
                need_date: [{ required: true, message: "请输入需求日期", trigger: "blur" }],
                need_count: [{ required: true, message: "请输入所需数量", trigger: "blur" }],
            },
            visible: false,
            isSaveing: false,
            setFiltersVisible: false,
            options: [],
            deptOptions: [],
        };
    },
    mounted() {
        this.getList();
        this.getDeptOptions();
    },
    methods: {
        //部门数据
        getDeptOptions() {
            this.$API.system.dept.list.req({ page: 0, type: 'dept' }).then(res => {
                this.deptOptions = res;
            });
        },
        //显示
        open(mode = "add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        getList() {
            this.$API.mtm.material.list.req({ page: 0 }).then(res => {
                this.options = res;
            })
        },
        //提交
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    try {
                        var res;
                        this.form.pu_plan = this.puPlan;
                        if (this.mode == "add") {
                            res = await this.$API.pum.planitem.create.req(this.form);
                        } else if (this.mode == "edit") {
                            res = await this.$API.pum.planitem.update.req(this.form.id, this.form);
                        }
                        this.isSaveing = false;
                        this.$emit("success", this.form, this.mode);
                        this.visible = false;
                        this.$message.success("操作成功");
                    } catch (err) {
                        //可以处理校验错误
                        this.isSaveing = false;
                        return err;
                    }
                }
            });
        },
        //表单注入数据
        setData(data) {
            Object.assign(this.form, data);
        },
        //设置过滤项
        setFilters(filters) {
            this.selectionFilters = filters;
            this.setFiltersVisible = true;
        },
    },
};
</script>
  