<template>
    <div class="base_mag_drawer">
        <el-drawer v-if="isOpen" :visible.sync="isOpen" direction="rtl" size="20%" style="padding-left: 20px">
            <template slot="title">
                <div>期刊管理</div>
            </template>
            <div>
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="期刊名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入期刊名称" maxlength="500"/>
                    </el-form-item>
                    <el-form-item label="序号" prop="ord">
                        <el-input-number v-model="form.ord" controls-position="right" :min="0" />
                    </el-form-item>
                </el-form>
                <div class="dialog-footer" style="text-align: center;">
                    <el-button type="primary" @click="submitForm">保存</el-button>
                    <el-button @click="doCancel">取 消</el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { listMag, getMag, delMag, addMag, updateMag } from "@/api/base/mag";
export default {
    data() {
        return {
            dataList: [],
            isOpen: false,
            oldData: null,
            form: {
                name: "",
                ord: 0,
            },
            rules: {
                name: [{ required: true, message: "请输入名称", trigger: "blur" }],
            }
        };
    },
    mounted() {

    },
    methods: {
        show(it, nextId) {
            this.form.ord = nextId;
            this.oldData = it;
            this.isOpen = true;
            if (it) {
                this.form.name = it.name;
                this.form.ord = it.ord;
            } else {
                this.form.name = "";
            }
        },
        doCancel() {
            this.isOpen = false;
        },
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.oldData != null && this.oldData.id) {
                        this.oldData.name = this.form.name;
                        this.oldData.ord = this.form.ord;
                        updateMag(this.oldData).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.isOpen = false;
                            this.$emit("success");
                        });
                    } else {
                        addMag(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.isOpen = false;
                            this.$emit("success");
                        });
                    }
                }
            });
        }
    },
};
</script>
<style lang="scss" scoped>
.base_mag_drawer {
    ::v-deep .el-drawer__header {
        margin-bottom: 0px;
    }

    ::v-deep .el-drawer__body {
        padding: 12px 24px;
    }

    ::v-deep .el-drawer {
        min-width: 400px;
    }
}
</style>