<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">Reviewer Application Form</div>
            <el-form class="ms-content" :rules="Rules" ref="reviewerForm" :model="reviewerForm" label-width="100px">
                <!-- 姓名 -->
                <el-form-item prop="username" label="Username">
                    <el-input v-model="reviewerForm.username" auto-complete="off" placeholder="Username">
                        <i slot="prefix" class="el-icon-user"></i>
                    </el-input>
                </el-form-item>
                <!-- 期刊 -->
                <el-form-item label="Journal" prop="Journal">
                    <el-select v-model="reviewerForm.journal" placeholder="Please select">
                        <el-option
                            v-for="item in journalList"
                            :key="item.journal_id"
                            :label="item.title"
                            :value="item.journal_id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <!-- 性别 -->
                <el-form-item label="Gender">
                    <el-radio-group v-model="reviewerForm.gender">
                        <el-radio :label="1">male</el-radio>
                        <el-radio :label="2">female</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 简介  -->
                <el-form-item prop="introduction" label="Introduction">
                    <el-input
                        type="textarea"
                        rows="5"
                        v-model="reviewerForm.introduction"
                        placeholder="Please input personal qualification and resume"
                    ></el-input>
                </el-form-item>
                <!-- 邮箱 -->
                <el-form-item prop="email" label="Email">
                    <el-input size="small" v-model="reviewerForm.email" auto-complete="off" placeholder="Email">
                        <i slot="prefix" class="el-icon-message"></i>
                    </el-input>
                </el-form-item>
                <!-- 国家 -->
                <el-form-item prop="country" label="Country">
                    <el-select v-model="reviewerForm.country" filterable placeholder="Please select">
                        <el-option v-for="it in countrys" :key="it.en_name" :label="it.en_name" :value="it.en_name"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item prop="country" label="Country">
                    <el-input size="small" v-model="reviewerForm.country" auto-complete="off" placeholder="Country"></el-input>
                </el-form-item> -->
                <!-- 专业 -->
                <el-form-item prop="major" label="Major">
                    <el-select v-model="reviewerForm.major" placeholder="Please select">
                        <el-option v-for="ii in majorList" :key="ii.major_id" :label="ii.title" :value="ii.major_id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 领域 -->
                <el-form-item prop="field" label="Field">
                    <el-input size="small" v-model="reviewerForm.field" auto-complete="off" placeholder="Field"></el-input>
                </el-form-item>
                <!-- 职称 -->
                <el-form-item prop="technical" label="Technical">
                    <el-select v-model="reviewerForm.technical" placeholder="Please select">
                        <el-option key="Prof." label="Prof." value="Prof."></el-option>
                        <el-option key="Associate Prof." label="Associate Prof." value="Associate Prof."></el-option>
                        <el-option key="Assistant Prof." label="Assistant Prof." value="Assistant Prof."></el-option>
                        <el-option key="Ph.D." label="Ph.D." value="Ph.D."></el-option>
                        <el-option key="Others" label="Others" value="Others"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 单位 -->
                <el-form-item prop="company" label="Affiliation">
                    <el-input size="small" v-model="reviewerForm.company" auto-complete="off" placeholder="company">
                        <i slot="prefix" class="el-icon-user"></i>
                    </el-input>
                </el-form-item>
                <el-form-item label="Qualifications">
                    <el-upload
                        class="upload-demo"
                        :action="upload_qualifications"
                        accept=".rar, .zip"
                        name="qualifications"
                        :before-upload="beforeupload_qualifications"
                        :on-error="uperr"
                        :on-success="upSuccess"
                        :limit="1"
                        :on-exceed="alertlimit"
                        :on-remove="removefile"
                    >
                        <div class="el-upload__text">
                            <em>Upload</em>
                        </div>
                        <div class="el-upload__tip" slot="tip">Only compressed files can be uploaded(.rar,.zip)</div>
                    </el-upload>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item>
                    <el-button size="small" type="primary" @click.native.prevent="handleRegister" class="register-submit">Submit</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data: function () {
        var validateUsername = (rule, value, callback) => {
            this.$api.post('api/User/checkReviewer', { username: value }).then((res) => {
                if (res.code == 0) {
                    callback();
                } else {
                    callback(
                        new Error(
                            'This user name has been registered, please log in to the background operation, or change a new user name'
                        )
                    );
                }
            });
        };
        return {
            baseUrl: this.Common.baseUrl,
            journalList: [],
            majorList: [],
            countrys: [],
            reviewerForm: {
                journal: '',
                username: '',
                introduction: '',
                email: '',
                gender: 1,
                major: '',
                country: '',
                technical: '',
                field: '',
                company: '',
                qualifications: ''
            },
            Rules: {
                journal: [{ required: true, message: 'please select a journal', trigger: 'blur' }],
                username: [
                    { required: true, message: 'enter one user name', trigger: 'blur' },
                    { required: true, validator: validateUsername, trigger: 'blur' }
                ],
                introduction: [{ required: true, message: 'Please input personal qualification and resume', trigger: 'blur' }],
                email: [
                    { required: true, message: 'Please enter email', trigger: 'blur' },
                    { type: 'email', message: 'Email address format error（example@gmail.com）', trigger: 'blur' }
                ],
                major: [{ required: true, message: 'Please select major', trigger: 'blur' }],
                country: [{ required: true, message: 'Please enter country', trigger: 'blur' }],
                technical: [{ required: true, message: 'Please select technical', trigger: 'blur' }],
                field: [{ required: true, message: 'Please enter field', trigger: 'blur' }],
                company: [{ required: true, message: 'enter your company', trigger: 'blur' }]
            }
        };
    },
    created: function () {
        this.initselect();
        this.initMajor();
        this.initCountrys();
    },
    computed: {
        upload_qualifications: function () {
            return this.baseUrl + 'api/Admin/up_file';
        }
    },
    methods: {
        handleRegister() {
            this.$refs.reviewerForm.validate((valid) => {
                if (this.reviewerForm.qualifications == '') {
                    this.$message.error('Please make sure that the qualifications document is uploaded successfully');
                    console.log('file up error');
                    return false;
                }
                if (valid) {
                    this.$api
                        .post('api/Admin/reviewer', this.reviewerForm)
                        .then((res) => {
                            console.log(res);
                            if (res.code == 0) {
                                this.$message.success('submit success');
                                this.$router.push('/thanks');
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                } else {
                    this.$message.error('The registration information is incorrect. Please check and submit again');
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        beforeupload_qualifications(file) {
            // console.log(file);
            // const iszip = file.type === 'application/x-zip-compressed' ||
            // file.name.substr(file.name.lastIndexOf(".") + 1) === 'rar';
            // if (!iszip) {
            //     this.$message.error('Only compressed files can be uploaded(.rar,.zip)');
            // }
            // return iszip;
        },
        uperr(err) {
            this.$message.error('upload defailed:' + err);
        },
        upSuccess(res, file) {
            if (res.code == 0) {
                this.reviewerForm.qualifications = 'reviewer/' + res.upurl;
            } else {
                this.$message.error('Server upload error：' + res.msg);
            }
        },
        alertlimit() {
            this.$message.error('The maximum number of uploaded files has been exceeded');
        },
        removefile() {
            this.reviewerForm.qualifications = '';
        },
        initMajor() {
            this.$api.post('api/User/getMajorList').then((res) => {
                this.majorList = res.data;
            });
        },
        initCountrys() {
            this.$api.post('api/Admin/getCountrys').then((res) => {
                this.countrys = res;
            });
        },
        //初始化期刊选项
        initselect() {
            this.$api
                .post('api/Article/getJournal')
                .then((res) => {
                    this.journalList = res;
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    }
};
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/login-bg.jpg);
    background-size: 100%;
    background-attachment: fixed;
}
.ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #969090;
    border-bottom: 1px solid #ddd;
}
.ms-login {
    position: absolute;
    left: 38%;
    top: 30%;
    width: 800px;
    height: 650px;
    overflow: auto;
    margin: -190px 0 0 -175px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
}
.ms-content {
    padding: 30px 30px;
}
.login-btn {
    text-align: center;
}
.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}
.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
}
.register-submit {
    margin: auto;
}
.rebacklogin {
    padding-top: 13px;
}
.captchaimg {
    margin-top: 2px;
    margin-left: 8px;
}
</style>