<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="articleform" :model="form" :rules="rules" label-width="120px">
                    <el-form-item label="Journal" prop="journal">
                        <el-select v-model="form.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="Title" prop="title">
                        <el-input v-model="form.title" placeholder="Title"></el-input>
                    </el-form-item>
                    <el-form-item label="Major" :required="true">
                        <el-row>
                            <el-col :span="8">
                                <el-select v-model="form.major" placeholder="Please select" @change="majorChange()">
                                    <el-option
                                        v-for="item in majors"
                                        :key="item.major_id"
                                        :label="item.title"
                                        :value="item.major_id"
                                    ></el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="8">
                                <el-select v-model="form.cmajor" placeholder="Please select">
                                    <el-option
                                        v-for="item in cmajors"
                                        :key="item.major_id"
                                        :label="item.title"
                                        :value="item.major_id"
                                    ></el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="Type" prop="type">
                        <el-select v-model="form.type" placeholder="Please select">
                            <el-option key="A" label="Article" value="A"></el-option>
                            <el-option key="B" label="Review" value="B"></el-option>
                            <el-option key="C" label="Case report" value="C"></el-option>
                            <el-option key="M" label="Meta-analysis" value="M"></el-option>
                            <el-option key="P" label="Research proposal" value="P"></el-option>
                            <el-option key="N" label="News" value="N"></el-option>
                            <el-option key="T" label="Comment" value="T"></el-option>
                            <el-option key="O" label="Others" value="O"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Ethical Approval" v-show="form.type == 'A'">
                        <el-switch v-model="form.approval" active-text="yes" inactive-text="no"></el-switch>
                    </el-form-item>
                    <el-form-item label="Author" :required="true">
                        <p class="zyfont">
                            The number of both (First Author and Corresponding Author) should be no more than two respectively.
                        </p>
                        <el-collapse v-model="activeNames">
                            <!-- <el-collapse> -->
                            <el-collapse-item v-for="(item, index) in form.authorList" :key="index" :name="index + 1">
                                <template slot="title"
                                    >Author {{ index + 1 }} :{{ item.firstname }} {{ item.lastname }} {{ item.isSuper ? '#' : ''
                                    }}{{ item.isReport ? '*' : '' }}</template
                                >
                                <el-form-item label="E-mail:" label-width="100px">
                                    <el-input v-model="item.email" placeholder="E-mail" style="width: 300px"></el-input>
                                </el-form-item>
                                <el-form-item label="Name:" label-width="100px">
                                    <el-row>
                                        <el-col :span="8">
                                            <el-input v-model="item.firstname" placeholder="First name"></el-input>
                                        </el-col>
                                        <el-col :span="8" :offset="1">
                                            <el-input v-model="item.lastname" placeholder="Last name"></el-input>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                                <el-form-item label="First author:" label-width="100px">
                                    <el-switch v-model="item.isSuper" active-text="yes" inactive-text="no"></el-switch>
                                </el-form-item>
                                <el-form-item label="Corresponding author:" label-width="160px">
                                    <el-switch v-model="item.isReport" active-text="yes" inactive-text="no"></el-switch>
                                </el-form-item>
                                <el-form-item label="Address" label-width="100px" v-show="item.isReport">
                                    <el-input v-model="item.address" placeholder="Address"></el-input>
                                </el-form-item>
                                <el-form-item label="Institution:" label-width="100px">
                                    <el-input autosize type="textarea" v-model="item.company" placeholder="Institution"></el-input>
                                </el-form-item>
                                <el-form-item label="Department:" label-width="100px">
                                    <el-input v-model="item.department" placeholder="Department"></el-input>
                                </el-form-item>
                                <el-form-item label="Title:" label-width="100px">
                                    <el-select v-model="item.title" 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 label="Country:" label-width="100px">
                                    <el-select v-model="item.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 label="Delete:" label-width="100px">
                                    <el-button @click="deleteAuthor(item, index)" type="text" style="color: red"
                                        >delete the author</el-button
                                    >
                                </el-form-item>
                            </el-collapse-item>
                        </el-collapse>
                        <el-button @click="addAuthor" type="text">
                            <i class="el-icon-circle-plus-outline">Add author</i>
                        </el-button>
                    </el-form-item>
                    <el-form-item label="Abstrart">
                        <el-input type="textarea" rows="5" v-model="form.abstrart" placeholder="Description information"></el-input>
                    </el-form-item>
                    <el-form-item label="Key words">
                        
                        <el-input
                            v-for="(item, index) in keywordsList"
                            :key="index"
                            :name="index + 1"
                            v-model="item.ke"
                            :placeholder="'Key words' + (index + 1)"
                            style="width: 110px; margin-right: 3px; margin-bottom: 3px"
                        ></el-input>
                        <el-button type="text" style="margin-left: 5px" @click="addfund">
                            <i class="el-icon-circle-plus-outline">Add</i>
                        </el-button>
                    </el-form-item>
                    <el-form-item label="Fund">
                        <el-input v-model="form.fund" placeholder="Fund"></el-input>
                    </el-form-item>
                    <el-form-item label="Cover letter">
                        <el-upload
                            class="upload-demo"
                            :action="upload_coverLetter"
                            accept=".pdf, .doc, .docx"
                            name="coverLetter"
                            :before-upload="beforeupload_coverLetter"
                            :on-error="uperr_coverLetter"
                            :on-success="upSuccess_coverLetter"
                            :limit="1"
                            :on-exceed="alertlimit"
                            :on-remove="removefilecoverLetter"
                        >
                            <div class="el-upload__text">
                                <em>click upload</em>
                            </div>
                            <div class="el-upload__tip" slot="tip">Only pdf and word files can be uploaded(.pdf,.doc,.docx)</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="Figures">
                        <el-upload
                            class="upload-demo"
                            :action="upload_picturesAndTables"
                            accept=".jpg, .png, .rar, .zip"
                            name="picturesAndTables"
                            :before-upload="beforeupload_picturesAndTables"
                            :on-error="uperr_coverLetter"
                            :on-success="upSuccess_picturesAndTables"
                            :limit="30"
                            :on-exceed="alertlimit"
                            :on-remove="removefilepicturesAndTables"
                        >
                            <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 label="Title page">
                        <el-upload
                            class="upload-demo"
                            :action="upload_totalpage"
                            accept=".doc, .docx"
                            name="totalpage"
                            :before-upload="beforeupload_totalpage"
                            :on-error="uperr_coverLetter"
                            :on-success="upSuccess_totalpage"
                            :limit="1"
                            :on-exceed="alertlimit"
                            :on-remove="removefiletotalpage"
                        >
                            <div class="el-upload__text">
                                <em>click upload</em>
                            </div>
                            <div class="el-upload__tip" slot="tip">Only word files can be uploaded(.doc,.docx)</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="Manuscirpt">
                        <p class="zyfont" style="color: red">
                            Please do not include identifying information in your main manuscript as this must remain blinded.
                        </p>
                        <el-upload
                            class="upload-demo"
                            :action="upload_manuscirpt"
                            accept=".doc, .docx, .rar, .zip"
                            name="manuscirpt"
                            :before-upload="beforeupload_manuscirpt"
                            :on-error="uperr_coverLetter"
                            :on-success="upSuccess_manuscirpt"
                            :limit="1"
                            :on-exceed="alertlimit"
                            :on-remove="removefilemanuscirpt"
                        >
                            <div class="el-upload__text">
                                <em>click upload</em>
                            </div>
                            <div class="el-upload__tip" slot="tip">
                                Only word and compressed files can be uploaded(.doc,.docx,.rar,.zip)
                            </div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="Co-submission">
                        <p class="zyfont">Co-submitting Papers to TMR Publishing Group Journals</p>
                        <p class="zyfont">
                            We know it can be time consuming to serially submit your paper to multiple journals, restarting the review
                            process each time.
                        </p>
                        <p class="tffont">
                            TMR Publishing Group publishes many journals, and we give you the opportunity to Co-submitting your paper. If
                            your manuscript is not considered suitable for the first journal, the manuscript transfer can be executed
                            automatically following your choose in order along with the reviews and the reviewers' identities (cascading
                            peer-review) from one journal to another. Please pay attention, you could only choose 3 journals totally.
                        </p>
                        <p class="zyfont">
                            If you have questions about the Co-submission process, please contact publisher@tmrjournals.com.
                        </p>
                        <el-switch v-model="form.istransfer" active-text="yes" inactive-text="no"></el-switch>
                    </el-form-item>
                    <el-form-item label="Journals" v-show="form.istransfer">
                        <p class="zyfont">1:{{ getjournalbyid(form.journal) }}</p>
                        <p class="zyfont" v-for="(cjou, index) in form.checkedjours" :key="index">
                            {{ index + 2 }}:{{ getjournalbyid(cjou) }}
                        </p>
                        <el-checkbox-group v-model="form.checkedjours" :max="2">
                            <el-checkbox
                                v-for="jour in items"
                                :label="jour.journal_id"
                                :disabled="jour.journal_id == form.journal"
                                :key="jour.journal_id"
                                >{{ jour.title }}</el-checkbox
                            >
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item>
                        <el-checkbox v-model="agreechecked">I accept </el-checkbox><el-link @click="licensebox=true" type="primary" style="padding-left: 5px"> the license agreement</el-link>
                    </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>
        <el-dialog title="" :visible.sync="licensebox" width="30%">
            <span style="word-wrap:break-word; word-break:normal; ">
                Creative Commons Licensing<br> 
                TMR Publishing Group provides authors the choice of applying the Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) licenses defined below, to be determined after acceptance:<br>
                Attribution: CC BY-NC 4.0<br>
                This license lets others distribute, remix, tweak, and build upon your work. They can not use the material for commercial purposes. 
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="licensebox = false">close</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            baseUrl: this.Common.baseUrl,
            items: [],
            licensebox:false,
            agreechecked:false,
            loading: false,
            form: {
                journal: localStorage.getItem('ms_journal_alias') ? parseInt(localStorage.getItem('ms_journal_alias')) : 1,
                username: localStorage.getItem('ms_username'),
                title: '',
                major: '',
                cmajor: '',
                authorList: [
                    {
                        firstname: '',
                        lastname: '',
                        company: '',
                        department: '',
                        title: '',
                        country: '',
                        email: '',
                        address: '',
                        isSuper: false,
                        isReport: false
                    }
                ],
                checkedjours: [],
                abstrart: '',
                type: '',
                approval: false,
                istransfer: false,
                keyWords: '',
                fund: '',
                coverLetter: '',
                picturesAndTables: [],
                totalpage: '',
                manuscirpt: ''
            },
            rules: {
                journal: [{ required: true, message: 'Please select Journal', trigger: 'blur' }],
                title: [{ required: true, message: 'Please enter a title', trigger: 'blur' }],
                type: [{ required: true, message: 'Please enter a title', trigger: 'blur' }],
                abstrart: [{ required: true, message: 'Please enter a description', trigger: 'blur' }],
                keyWords: [{ required: true, message: 'Please enter keywords', trigger: 'blur' }],
                fund: [{ required: true, message: 'Please input fund', trigger: 'blur' }]
            },
            activeNames: [1],
            keywordsList: [{ ke: '' }],
            majors: [],
            cmajors: [],
            countrys: []
        };
    },
    created: function () {
        this.initselect();
        this.initCountrys();
        this.initMajor();
    },
    computed: {
        upload_coverLetter: function () {
            return this.baseUrl + 'api/Article/up_file/type/coverLetter';
        },
        upload_picturesAndTables: function () {
            return this.baseUrl + 'api/Article/up_file/type/picturesAndTables';
        },
        upload_totalpage: function () {
            return this.baseUrl + 'api/Article/up_file/type/totalpage';
        },
        upload_manuscirpt: function () {
            return this.baseUrl + 'api/Article/up_file/type/manuscirpt';
        }
    },
    methods: {
        onSubmit() {
            // console.log(this.form);
            // return false;
            if(!this.agreechecked){
                this.$message.error('Dear author, the licenses need to be accecpted before you submit the manuscript. You could find more information in http://creativecommons.org/licenses/by/4.0/');
                return false;
            }
            this.$refs.articleform.validate((valid) => {
                //验证文档
                if (this.form.manuscirpt == '') {
                    this.$message.error('Manuscirpt is required');
                    // console.log('file up error');
                    return false;
                }
                //验证作者
                let authorlist = this.form.authorList;
                let Firsta = 0;
                let Corra = 0;
                if (authorlist.length == 0) {
                    this.$message.error('Author is required');
                    return false;
                }
                for (var kk in authorlist) {
                    if (authorlist[kk].isReport && authorlist[kk].address == '') {
                        this.$message.error('Address is necessary for corresponding author');
                        return false;
                    }
                    if(authorlist[kk].country==''){
                        this.$message.error('Country is necessary for author!');
                        return false;
                    }
                    if (authorlist[kk].isReport) {
                        Corra++;
                    }
                    if (authorlist[kk].isSuper) {
                        Firsta++;
                    }
                }
                if (Firsta == 0 || Corra == 0) {
                    this.$message.error('First author and corresponding author must be exist');
                    return false;
                }
                //验证文章领域
                if (this.form.major == '' || this.form.cmajor == '') {
                    this.$message.error('Major is required');
                    return false;
                }
                //验证选择转投但没选期刊项的情况
                if (this.form.istransfer && this.form.checkedjours.length == 0) {
                    this.$message.error('If you chose co-submission, you need to select at least one journal.');
                    return false;
                }

                //keywords转化
                var flist = this.keywordsList;
                var fstr = '';
                for (var fu in flist) {
                    if (flist[fu].ke != '') {
                        fstr += flist[fu].ke.trim() + ',';
                    }
                }
                this.form.keyWords = fstr == '' ? '' : fstr.substring(0, fstr.length - 1);
                if (valid) {
                    this.loading = true;
                    this.$api
                        .post('api/Article/addArticle', this.form)
                        .then((res) => {
                            console.log(res);
                            this.loading = false;
                            if (res.code == 0) {
                                this.$message.success('Success');
                                this.$router.push('/articleList');
                            } else {
                                this.$message.error('Failed to submit, please contact administrator!');
                                console.log(res.msg);
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                } else {
                    this.$message.error('Failed to submit. Please ensure the integrity of the information');
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        addAuthor() {
            this.form.authorList.push({
                firstname: '',
                lastname: '',
                company: '',
                department: '',
                title: '',
                country: '',
                email: '',
                address: '',
                isSuper: false,
                isReport: false
            });
        },
        addfund() {
            this.keywordsList.push({
                fun: ''
            });
        },
        deleteAuthor(item, index) {
            this.form.authorList.splice(index, 1);
        },
        //初始化期刊选项
        initselect() {
            this.$api
                .post('api/Article/getJournal')
                .then((res) => {
                    this.items = res;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        open() {
            let str =
                'Creative Commons Licensing<br> Medicine provides authors the choice of applying the Creative Commons 4.0 licenses defined below, to be determined after acceptance:<br>Attribution: CC-BY<br>This license lets others distribute, remix, tweak, and build upon your work, even commercially, if they credit you for the original creation. <br>This is the most accommodating of licenses offered.';
            this.$alert(str, '', {
                confirmButtonText: 'ok'
            });
        },
        initCountrys() {
            this.$api.post('api/Admin/getCountrys').then((res) => {
                this.countrys = res;
            });
        },
        initMajor() {
            this.$api.post('api/Admin/getMajor').then((res) => {
                this.majors = res.data;
            });
        },
        majorChange() {
            let majorid = this.form.major;
            this.$api.post('api/Admin/majorChild', { majorid: majorid }).then((res) => {
                this.cmajors = res.data;
                this.form.cmajor = res.data[0].major_id;
            });
        },
        getjournalbyid(jid) {
            var list = this.items;
            for (var i in list) {
                if (list[i].journal_id == jid) {
                    return list[i].title;
                }
            }
        },
        uperr_coverLetter(err) {
            this.$message.error('Upload error');
        },
        //检验上传文件的格式
        beforeupload_coverLetter(file) {
            // const isWORd =
            //     file.type === 'application/msword' ||
            //     file.type === 'application/pdf' ||
            //     file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
            // if (!isWORd) {
            //     this.$message.error('Only word and pdf files can be uploaded(.pdf,.doc,.docx)');
            // }
            // return isWORd;
        },
        beforeupload_picturesAndTables(file) {
            // const iszip =
            //     file.type === 'application/x-zip-compressed' ||
            //     file.name.split('.')[1] === 'rar';
            // if (!iszip) {
            //     this.$message.error('Only compressed files can be uploaded(.rar,.zip)');
            // }
            // return iszip;
        },
        beforeupload_totalpage(file) {},
        beforeupload_manuscirpt(file) {
            // const ismau =
            //     file.type === 'application/msword' ||
            //     file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
            //     file.type === 'application/x-zip-compressed' ||
            //     file.name.split('.')[1] === 'rar';
            // if (!ismau) {
            //     this.$message.error('Only word and compressed files(.doc,.docx,.rar,.zip)');
            // }
            // return ismau;
        },
        //文件上传成功后的操作
        upSuccess_coverLetter(res, file) {
            if (res.code == 0) {
                this.form.coverLetter = 'coverLetter/' + res.upurl;
            } else {
                this.$message.error('service error：' + res.msg);
            }
        },
        upSuccess_picturesAndTables(res, file, fileList) {
            this.form.picturesAndTables = [];
            for (var ii in fileList) {
                var url = fileList[ii].response.upurl;
                this.form.picturesAndTables.push('picturesAndTables/' + url);
            }
        },
        upSuccess_totalpage(res, file) {
            if (res.code == 0) {
                this.form.totalpage = 'totalpage/' + res.upurl;
            } else {
                this.$message.error('service error：' + res.msg);
            }
        },
        upSuccess_manuscirpt(res, file) {
            if (res.code == 0) {
                this.form.manuscirpt = 'manuscirpt/' + res.upurl;
            } else {
                this.$message.error('service error：' + res.msg);
            }
        },
        //超出传送文件个数限制
        alertlimit() {
            this.$message.error('The maximum number of uploaded files has been exceeded');
        },
        //清除文件时的事件
        removefilecoverLetter(file, fileList) {
            this.form.coverLetter = '';
        },
        removefilepicturesAndTables(file, fileList) {
            this.form.picturesAndTables = [];
            for (var ii in fileList) {
                var url = fileList[ii].response.upurl;
                this.form.picturesAndTables.push('picturesAndTables/' + url);
            }
        },
        removefiletotalpage(file, fileList) {
            this.form.totalpage = '';
        },
        removefilemanuscirpt(file, fileList) {
            this.form.manuscirpt = '';
        },
        getOpState(index) {
            let a = this.activeNames.indexOf(index) > -1 ? 'Close' : 'Open';
        },
        checkfiletype(file) {}
    }
};
</script>

<style scoped>
.author-box {
    width: 150%;
}
.author-box .el-row {
    margin-bottom: 5px;
}
.author-box .author-title {
    color: #969595;
    text-align: center;
    background-color: #eceaea;
}
.author-box .author-delete {
    text-align: center;
}
.author-box .author-delete i {
    color: red;
}
.zyfont {
    font-size: 10px;
    color: rgb(133, 131, 131);
}
.tffont {
    font-size: 10px;
    line-height: 1.5;
    color: rgb(133, 131, 131);
}
</style>