<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-user"></i> Add editor
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="editorform" :model="form" :rules="rules" label-width="200px">
                    <el-form-item label="username" prop="username">
                        <el-input v-model="form.username" placeholder="username"></el-input>
                    </el-form-item>
                    <el-form-item label="password" prop="password">
                        <el-input v-model="form.password" placeholder="password"></el-input>
                    </el-form-item>
                    <el-form-item label="email" prop="email">
                        <el-input v-model="form.email" placeholder="example@gmail.com"></el-input>
                    </el-form-item>
                    <el-form-item label="phone" prop="phone">
                        <el-input v-model="form.phone" placeholder="phone"></el-input>
                    </el-form-item>
                    <el-form-item label="realname" prop="realname">
                        <el-input v-model="form.realname" placeholder="realname"></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: {
                username: '',
                password: '',
                email: '',
                phone: '',
                realname: ''
            },
            rules: {
                username: [{ required: true, message: 'Please enter a username', trigger: 'blur' }],
                password: [
                    { required: true, message: 'Please input a password', trigger: 'blur' },
                    { min: 6, message: 'The password number cannot be less than 6 digits', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: 'Please enter email', trigger: 'blur' },
                    { type: 'email', message: 'Email address format error（example@gmail.com）', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        onSubmit() {
            this.$refs.editorform.validate(valid => {
                if (valid) {
                    this.$api
                        .post('api/Admin/addEditor', this.form)
                        .then(res => {
                            if(res.code==0){
                                this.$message.success('add success!');
                                this.$router.push('/editorList');
                            }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>