<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-user"></i> Add journal
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="journalform" :model="form" :rules="rules" label-width="200px">
                    <el-form-item label="Title" prop="title">
                        <el-input v-model="form.title" placeholder="Journal title"></el-input>
                    </el-form-item>
                    <el-form-item label="Issn" prop="issn">
                        <el-input v-model="form.issn" placeholder="Issn like 2413-3973"></el-input>
                    </el-form-item>
                    <el-form-item label="Alias" prop="alias">
                        <el-input v-model="form.alias" placeholder="Alias like 97A"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">Add</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                title: '',
                issn: '',
                alias:''
            },
            rules: {
                title: [{ required: true, message: 'Please enter a title', trigger: 'blur' }],
                issn: [{ required: true, message: 'Please enter a issn', trigger: 'blur' }],
                alias: [{ required: true, message: 'Please enter a issn', trigger: 'blur' }]
            }
        };
    },
    methods: {
        onSubmit() {
            this.$refs.journalform.validate(valid => {
                if (valid) {
                    this.$api
                        .post('api/Admin/journalAdd', this.form)
                        .then(res => {
                            if(res.code==0){
                                this.$message.success('add success!');
                                this.$router.push('/journalList');
                            }else{
                                this.$message.error(res.msg);
                            }
                        })
                        .catch(err => {
                            this.$message.error(err);
                        });
                } else {
                    this.$message.error('Failed to submit. Please ensure the integrity of the information');
                    return false;
                }
            });
        }
    }
};
</script>