<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> Add manuscirpt
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="addarticle-box" v-loading="loading">
                <el-form ref="reviewerform" :model="reviewerForm" :rules="rules" label-width="120px">
                    <el-form-item label="Journal" prop="journal">
                        <el-select v-model="reviewerForm.journal" placeholder="Please select">
                            <el-option
                                v-for="item in items"
                                :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="country" label="Country">
                        <el-select v-model="reviewerForm.country" 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="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+ii.ctitle"
                                :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="Affiliation"
                        >
                            <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"
                        :on-error="uperr"
                        :on-success="upSuccess"
                        :limit="1"
                        :on-exceed="alertlimit"
                        :on-remove="removefile"
                    >
                        <div class="el-upload__text">
                            <em>click 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-col :offset="4">
                            <el-button type="primary" @click="onSubmit">Submit</el-button>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
export default {
    name: 'dashboard',
    data() {
        return {
            baseUrl: this.Common.baseUrl,
            name:localStorage.getItem('ms_username'),
            userdata: '',
            loading: false,
            reviewerForm: {
                username: localStorage.getItem('ms_username'),
                journal: '',
                gender:1,
                introduction:'',
                country:'',
                major:'',
                field:'',
                technical:'',
                company:'',
                qualifications:''
            },
            rules: {
                journal: [{ required: true, message: 'please select a journal', trigger: 'blur' }],
                introduction: [{ required: true, message: 'Please input personal qualification and resume', trigger: 'blur' }],
                country:[{required: true, message: 'Please enter country', trigger: 'blur'}],
                major:[{required:true,message:'Please select a major',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' }],
            },
            items: [],
            countrys:[],
            majorList:[],
        };
    },
    created: function () {
        this.initselect();
        this.getUserdata();
        this.initCountrys();
        this.initMajor();
    },
    computed: {
        role() {
            console.log(this.userrole);
            let frag = 'dads';
            switch (this.userrole) {
                case '1':
                    frag = this.$t('total.author');
                    break;
                case '2':
                    frag = this.$t('total.editor');
                    break;
                case 'reviewer':
                    frag = this.$t('total.reviewers') + '&' + this.$t('total.author');
                    break;
                case 'admin':
                    frag = this.$t('total.admin');
                    break;
            }
            return frag;
        },
        my_login_time() {
            return this.formatDate(this.userdata.last_login_time);
        },
        upload_qualifications: function() {
            return this.baseUrl + 'api/Admin/up_file';
        }
    },
    methods: {
        onSubmit(){
            //验证简历为必填项
            if(this.reviewerForm.qualifications==''){
                this.$message.error('qualifications is required');
                return false;
            }

            this.$refs.reviewerform.validate(vali=>{
                if(vali){
                    this.loading = true;
                    this.$api.post('api/Admin/becameReviewer',this.reviewerForm)
                    .then(res=>{console.log(res);
                        this.loading = false;
                        this.$message.success('Success!');
                        this.$router.push('/');
                    });
                }
            });

        },
        getUserdata() {
            this.$api
                .post('api/user/getUserdata', { account: this.name })
                .then((res) => {
                    if (res.code == 0) {
                        this.userdata = res.data;
                    } else {
                        this.$message.error('get userinfo error');
                        console.log('error getuserdata');
                    }
                })
                .catch((err) => {});
        },
        formatDate(timestamp) {
            var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
            var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return Y + M + D + ' ' + h + ':' + m + ':' + s;
        },
        initCountrys() {
            this.$api.post('api/Admin/getCountrys').then((res) => {
                this.countrys = res;
            });
        },
        initMajor(){
            this.$api.post('api/User/getMajorList')
            .then(res=>{
                this.majorList = res.data;
            })
        },
        initselect() {
            this.$api
                .post('api/Admin/getJournalchu',{username:this.reviewerForm.username})
                .then((res) => {
                    this.items = res;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        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 = '';
        },
    }
};
</script>

