<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> Submit manuscript </el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="step_list" style="width: 960px;position: relative;">
			<div v-for="item in listStep" @click="StepCode(item.index)" :class="show_step ==item.index?'C_style':''">
				<div>
					<i :class="item.icon"></i>
					{{item.title}}
					<div class="num">{{item.index}}</div>
				</div>
				<p class="bor_der"></p>
			</div>
			<br clear="both">
			<!-- <p
				style="position: absolute;line-height: 20px;color: #999;left:990px;top: 600px;width: 280px;font-size: 14px;">
				We encourage authors to upload a Cover Letter file and Highlights is also be encouraged. That will help
				authors let editors quickly obtain information and evaluate the
				scientific value of their research correctly.
				<br>Please remind our editor in the cover letter if you want your manuscript processed quickly.
				<br>Please note that manuscripts with at least one of the following characteristics will be included in
				the
				journal's manuscript fast track:
				<br>
				<font style="color: #006699;">1.Interest:</font> This manuscript has a novel perspective.
				<br>
				<font style="color: #006699;">2.Importance:</font> This manuscript belongs to the focus area.
				<br>
				<font style="color: #006699;">3.Value:</font> This manuscript belongs to the advanced topic and can
				attract wide
				attention.
			</p> -->
			<p
				style="position: absolute;line-height: 20px;color: #999;left:990px;top: 120px;width: 280px;font-size: 14px;">
				We highly encourage authors to upload a Cover Letter file and Highlights, as this will assist editors in
				quickly obtaining accurate information and evaluating the scientific value of their research. If you
				would like your manuscript to be processed quickly, please kindly remind our editor in the cover letter.
				<br>Additionally, please take note that manuscripts exhibiting at least one of the following
				characteristics
				will be considered for the journal's fast track process:
				<br>
				<font style="color: #006699;">Interest:</font> The manuscript presents a unique perspective.
				<br>
				<font style="color: #006699;">Importance:</font> The manuscript aligns with the journal's focus area.
				<br>
				<font style="color: #006699;">Value:</font> The manuscript addresses an advanced topic that has the
				potential to garner widespread attention.
			</p>
		</div>
		<div class="manu_add" style="width: 960px;" v-loading="loading">
			<el-form ref="articleform" :model="form" :rules="rules" label-width="160px">
				<div class="bag_color" v-if="show_step==1">
					<div>
						<h3>Manuscript Information</h3>
						<el-form-item label="Journal :" prop="journal" v-if="ms_alias!=null">
							<div style="font-size: 16px;">{{check_item.title}}</div>
							<p style="color: #666;line-height: 24px;font-size: 13px;margin: 5px 0 0 0;">
								<b>E-Mail Address : </b>{{check_item.email}}
								<br>
								<b>Website : </b><a :href="check_item.website" target="_blank" style="color: #666;"
									class="web_stite">{{check_item.website}}</a>
							</p>
							<!-- <el-button type="warning" size="mini" icon="el-icon-refresh" plain @click="change_Journal" style="margin-top: 15px;">Change Journal</el-button> -->
						</el-form-item>
						<el-form-item label="Journal :" prop="journal" v-if="ms_alias==null">
							<div v-for="item in items" @click="ch_Jour_all(item.journal_id)"
								:class="form.journal==item.journal_id?'jour_ku_all B_style':'jour_ku_all'">
								{{item.title}}
							</div>
						</el-form-item>
						<el-form-item label="Type :" prop="type">
							<el-select v-model="form.type" placeholder="Please select type" style="width: 240px">
								<el-option v-for="item in journal_type" :key="item.value" :label="item.name"
									:value="item.value"></el-option>
							</el-select>
							
						</el-form-item>
						<el-form-item label="Major :" :required="true" prop="major_a">
							<el-select v-model="form.major_a" placeholder="Please select major" @change="majorChange(1)"
								style="width: 240px">
								<el-option v-for="item in majors_a" :key="item.major_id" :label="item.major_title"
									:value="item.major_id"></el-option>
							</el-select>
							<el-select v-model="form.major_b" placeholder="Please select major" v-if="majors_b!=''"
								@change="majorChange(2)" style="margin:0 15px;width: 240px">
								<el-option :key="0" label="None" :value="0"></el-option>
								<el-option v-for="item in majors_b" :key="item.major_id" :label="item.major_title"
									:value="item.major_id"></el-option>
							</el-select>
							<el-select v-model="form.major_c" placeholder="Please select major" v-if="majors_c!=''"
								style="width: 240px" @change="majorChange(3)">
								<el-option :key="0" label="None" :value="0"></el-option>
								<el-option v-for="item in majors_c" :key="item.major_id" :label="item.major_title"
									:value="item.major_id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="Manuscript Title :" prop="title">
							<el-input v-model="form.title" placeholder="Please enter title"></el-input>
						</el-form-item>
						<el-form-item label="Whether ethical approval was obtained ?" v-show="form.type == 'A'"
							label-width="300px">
							<el-switch v-model="form.approval" active-text="yes" inactive-text="no"></el-switch>
							<p v-show="form.approval == true"
								style="display: inline-block;width: 440px;margin-left: 60px;vertical-align: top;line-height: 22px;color: #999;font-size: 12px;">
								For authors who selected 'Yes', please provide the approval number and name of the
								ethics committee or institutional review board that approved the study.
							</p>
						</el-form-item>
						<el-form-item label="Abstract :" prop="abstrart">
							<el-input type="textarea" rows="5" v-model="form.abstrart"
								placeholder="Please enter the abstract"></el-input>
						</el-form-item>
						<!-- 话题 -->
						<!-- <el-form-item label="Topics :" prop="topics">
							<el-cascader disabled class="formTopics" @change="topicsChange"
							v-model="form.topics"
							:options="topicsList"
							:props="topicsProps"
							clearable></el-cascader>
						</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: 150px; margin-right: 15px; margin-bottom: 3px"></el-input>
							<el-button type="text" @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="Please provide the specific funding information if your research has received funding support">
							</el-input>
						</el-form-item>
						<div style="text-align: center;margin: 40px 0 0 0;">
							<el-button type="warning" @click="onStagingSave(1)" class="pro_stage">Save as draft
							</el-button>
							<el-button type="primary" @click="onStep(1)" class="pro_ceed">Save and proceed to the next
								step</el-button>
						</div>
					</div>
				</div>

				<div class="bag_color" v-if="show_step==2">
					<div>
						<h3>
							Author Information
							<el-button @click="addAuthor" type="primary" style="float:right;">
								<i class="el-icon-plus"> Add author</i>
							</el-button>
							<p class="zyfont" style="font-weight: normal;margin-top: 5px;">
								The number of First Authors and Corresponding Authors should not exceed two each.
							</p>
						</h3>
						<div label="Author" :required="true" style="margin: 0 0 0 35px;">
							<el-collapse v-model="activeNames">
								<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 ? '*' : '' }}
										<el-button @click="deleteAuthor(item, index)" type="text" class="Del_btn">
											<i class="el-icon-remove-outline" style="font-weight: bold;"> Delete this
												author</i>
										</el-button>
									</template>
									<el-form-item label-width="120px">
										<span slot="label">
											<span style="color: #F56C6C;">*</span>
											E-mail :
										</span>
										<el-input v-model="item.email" placeholder="E-mail" style="width: 280px">
										</el-input>
									</el-form-item>
									<el-form-item label-width="120px">
										<span slot="label">
											<span style="color: #F56C6C;">*</span>
											Name :
										</span>
										<el-input v-model="item.firstname" placeholder="First name"
											style="width:280px;margin-right: 20px;"></el-input>
										<el-input v-model="item.lastname" placeholder="Last name" style="width: 280px;">
										</el-input>
									</el-form-item>
									<el-form-item label="ORCID iD :" label-width="120px">
										<el-input v-model="item.orcid" placeholder="Orcid" style="width: 280px;">
										</el-input>
										<a href="https://orcid.org/register" target="_blank" class="orcid_link">Register
											for an ORCID iD</a>
									</el-form-item>
									<el-form-item label="First author :" label-width="180px">
										<el-switch v-model="item.isSuper" active-text="yes" inactive-text="no"
											@change="chanSelt">
										</el-switch>
									</el-form-item>
									<el-form-item label="Corresponding author :" label-width="180px">
										<el-switch v-model="item.isReport" active-text="yes" inactive-text="no"
											@change="chanSelt">
										</el-switch>
									</el-form-item>
									<el-form-item label="Title :" label-width="120px">
										<el-select v-model="item.title" placeholder="Please select"
											style="width: 280px;" @change="chanSelt">
											<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="Affiliation :" label-width="120px">
										<!-- <el-input autosize type="textarea" v-model="item.company"
											placeholder="Affiliation"></el-input> -->
										<el-autocomplete class="inline-input" v-model="item.company"
											:fetch-suggestions="searchCompany" placeholder="Affiliation"
											:trigger-on-focus="false" @select="selCompany($event,index)"
											style="width: 100%;">
										</el-autocomplete>
									</el-form-item>
									<el-form-item label="Department :" label-width="120px">
										<el-input v-model="item.department" placeholder="Department"></el-input>
									</el-form-item>
									<el-form-item label="Address :" label-width="120px" v-show="item.isReport">
										<el-input v-model="item.address" placeholder="Address"></el-input>
									</el-form-item>
									<el-form-item label-width="120px">
										<span slot="label">
											<span style="color: #F56C6C;">*</span>
											Country :
										</span>
										<el-select v-model="item.country" filterable placeholder="Please select"
											style="width: 280px;">
											<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-collapse-item>
							</el-collapse>
						</div>
						<div style="text-align: center;margin: 40px 0 0 0;">
							<el-button type="warning" @click="onStagingSave(2)" class="pro_stage">Save as draft
							</el-button>
							<el-button type="primary" @click="onStep(2)" class="pro_ceed">Save and proceed to the next
								step</el-button>
						</div>
					</div>
				</div>

				<div class="bag_color" v-if="show_step==3">
					<div>
						<h3>
							Upload Manuscript
						</h3>
						<el-form-item label="Cover letter :" label-width="200px">
							<el-upload class="upload-demo up_newstyle" :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"
								:file-list="fileL_coverLetter" :on-preview="dowloadFile">
								<div class="el-upload__text">
									<em>Upload</em>
								</div>
								<div class="el-upload__tip" slot="tip">
									Only PDF and Word files can be uploaded (file formats: .pdf, .doc, .docx).
								</div>
							</el-upload>
						</el-form-item>
						<el-form-item label-width="200px">
							<span slot="label">
								Figures
								<el-popover placement="top-start" width="350" trigger="hover">
									<p
										style="line-height: 24px;word-wrap: break-word;word-break: normal;text-align: left;">
										Dear Author
										<br>Except for the experimental graphs covered in this article; the statistical
										graphs of the experimental results in this article; the model graphs produced by
										the author of this article.
										<br>For images from any other source :
										<br>1. Please make sure that the author owns the copyright of the image.
										<br>2. Obtain written authorization from the original copyright owner (please
										upload proof of copyright authorization, including a screenshot of the other
										party's authorization email or authorization letter).
									</p>
									<i class="el-icon-info" slot="reference"
										style="color: #ef8429;cursor: pointer;vertical-align: super;font-size: 20px;"></i>
								</el-popover>
								:
							</span>
							<el-upload class="upload-demo up_newstyle" :action="upload_picturesAndTables" accept=".zip"
								name="picturesAndTables" :before-upload="beforeupload_picturesAndTables"
								:on-error="uperr_coverLetter" :on-success="upSuccess_picturesAndTables" :limit="1"
								:on-exceed="alertlimit" :on-remove="removefilepicturesAndTables"
								:file-list="fileL_picturesAndTables" :on-preview="dowloadFile">
								<div class="el-upload__text">
									<em>Upload</em>
								</div>
								<div class="el-upload__tip" slot="tip">
									Only ZIP files can be uploaded (file format: .zip).
								</div>
							</el-upload>
						</el-form-item>
						<!-- <el-form-item label="Title page :" prop="totalpage">
							<el-upload class="upload-dem up_newstyle" :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>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 :" prop="manuscirpt" label-width="200px">
							<el-upload ref="uploadFile" class="upload-demo up_newstyle" :action="upload_manuscirpt"
								accept=".docx" name="manuscirpt" :before-upload="beforeupload_manuscirpt"
								:on-error="uperr_coverLetter" :on-success="upSuccess_manuscirpt" :limit="1"
								:on-exceed="alertlimit" :on-remove="removefilemanuscirpt" :file-list="fileL_manuscirpt"
								:on-preview="dowloadFile">
								<div class="el-upload__text" @click="clearUploadedFile">
									<em>Upload</em>
								</div>
								<div class="el-upload__tip" slot="tip">
									Only Word and compressed files can be uploaded (file format: .docx).
								</div>
							</el-upload>
							</a>
						</el-form-item>
						<el-form-item label="Supplementary Material :" label-width="200px">
							<el-upload class="upload-demo up_newstyle" :action="upload_supplementary" accept=".zip"
								name="supplementary" :before-upload="beforeupload_supplementary"
								:on-error="uperr_coverLetter" :on-success="upSuccess_supplementary" :limit="1"
								:on-exceed="alertlimit" :on-remove="removefilesupplementary"
								:file-list="fileL_supplementary" :on-preview="dowloadFile">
								<div class="el-upload__text">
									<em>Upload</em>
								</div>
								<div class="el-upload__tip" slot="tip">
									Only ZIP files can be uploaded (file formats: .zip).
								</div>
							</el-upload>
						</el-form-item>
						<div style="text-align: center;margin: 40px 0 0 0;">
							<el-button type="primary" @click="onStep(3)" class="pro_ceed">Next Step</el-button>
						</div>
					</div>
				</div>

				<div class="bag_color" v-if="show_step==4">
					<div>
						<h3>
							Co-submitting
						</h3>
						<p style="line-height: 25px;margin: 0 10px 0 55px;font-size: 14px;">
							TMR Publishing Group publishes multiple journals and offers you the opportunity to co-submit
							your paper. If your manuscript is not deemed suitable for the first journal, it can be
							automatically transferred along with reviews and reviewers' identities (cascading
							peer-review) to another journal of your choice. Please note that you can choose up to two
							journals only.
							<br><br>
							<el-switch @change="changeSwitch($event)" v-model="form.istransfer" active-text="Yes"
								inactive-text="No"></el-switch>
						</p>
						<el-form-item label="Journals :" v-show="form.istransfer" label-width="130px"
							style="margin-top: 20px;">
							<div style="margin-bottom: 0;">
								<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>
							</div>
							<el-checkbox-group v-model="form.checkedjours" :max="1" style="margin-top: 10px;">
								<el-checkbox v-for="jour in mj_jour" :label="jour.journal_id"
									:disabled="jour.journal_id == form.journal" :key="jour.journal_id"
									class="tally_jour" v-if="jour.journal_id!=form.journal">{{ jour.title }}
								</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						<p style="line-height: 25px;margin: 50px 10px 0 55px;font-size: 14px;"
							v-if="checkReviewerof==0">
							Would you be interested in serving as a reviewer for this journal?
							<br><br>
							<el-switch @change="changeBecome($event)" v-model="form.becomeRev" active-text="Yes"
								inactive-text="No"></el-switch>
						</p>
						<el-form ref="reviewerform" :model="reviewerForm"
							v-show="form.becomeRev&&!this.usercap.includes('reviewer')" :rules="rules"
							label-width="130px"
							style="width: 500px;padding: 15px 30px 1px 5px;margin: 25px 0px 0px 55px;box-shadow: 0 0 8px #b7d2ed;">
							<!-- 性别 -->
							<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="3" 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" 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="major" label="Major :">
								<el-select v-model="reviewerForm.major" filterable placeholder="Please select">
									<el-option v-for="item in majorList" :key="item.major_id"
										:label="item.title+item.ctitle" :value="item.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"></el-input>
							</el-form-item>
							<!-- 简历 -->
							<el-form-item label="CV. :">
								<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" style="color: #999;">Only compressed files
										can be uploaded(.rar,.zip)</div>
								</el-upload>
							</el-form-item>
						</el-form>
						<h3 style="margin-top: 35px;">Suggesting reviewers</h3>
						<p style="margin: -55px 10px 0 55px;font-size: 14px;text-align: right;">
							<el-button :disabled="tuiJianForm.length==3" type="primary" @click="onAddTuijian" plain
								icon="el-icon-plus" style="width: 210px;">Add Recommended Reviewer</el-button>
						</p>
						<p style="margin: 5px 10px 0 55px;font-size: 14px;line-height: 22px;">
							(Non-essential)
							<br>While authors are welcome to suggest potential reviewers, the final decision on the
							selection of reviewers is at the discretion of the editorial board. The following criteria
							are generally considered when selecting reviewers:
							<br>1. The reviewer should hold a Ph.D. degree (or equivalent) in a relevant field.
							<br>2. The reviewer should have published at least three articles on the subject matter of
							the manuscript, one of which was published within the last five years and is indexed in the
							WOS database.
							<br>3. The reviewer should not be affiliated with the same institution as the author, and
							should not have a close collaborative or personal relationship with the author. Conflict of
							interest should be avoided.
							<br>4. The editorial board encourages diversity in reviewer selection, with respect to
							gender and geographic location.
						</p>
						<el-form ref="tuiJianForm" v-for="(item, index) in tuiJianForm" :rules="rules"
							label-position="top" label-width="110px" class="tuijian_f" :model="item">
							<p>Reviewer <span style="margin: 0 0 0 3px;">{{index+1}}</span></p>
							<el-form-item label="Realname :" prop="realname">
								<el-input v-model="item.realname" style="width: 160px;"></el-input>
							</el-form-item>
							<el-form-item label="Email :" prop="email">
								<el-input v-model="item.email" style="width: 160px;" :validate-event="false"></el-input>
							</el-form-item>
							<el-form-item label="Country :" prop="country">
								<el-select v-model="item.country" filterable placeholder="Please select" clearable
									style="width: 180px;">
									<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="Major :" prop="major_all">
								<el-cascader :options="jl_major" v-model="item.major_all" :props="defaultParams"
									placeholder="Please select major" style="width: 270px;" clearable></el-cascader>
							</el-form-item>
							<el-button :disabled="tuiJianForm.length==1" @click="onDeleteTuijian(item, index)"
								type="danger" icon="el-icon-delete" class="shanchu_tj"></el-button>
						</el-form>

						<p style="font-size: 12px;color: #888;margin: 15px 10px 0 55px;line-height: 18px;">
							You can suggest 3 potential reviewers, which can help speed up the review process.
							<br><b style="letter-spacing: -0.5px;">Please pay attention:</b>
							<br>Authors may suggest potential reviewers if they wish. However, whether or not to
							consider these reviewers is
							at the editor's discretion. Authors should not suggest recent collaborators or colleagues
							who work in the same
							institution as themselves. Authors who wish to suggest peer reviewers should provide
							institutional email
							addresses where possible or information that will help the editor verify the identity of the
							reviewer.
							<br>Authors may request the exclusion of individuals as peer reviewers, but they should
							explain the reasons in
							their cover letter on submission. Authors should not exclude too many individuals as this
							may hinder the peer
							review process. Intentionally falsifying information, for example, suggesting reviewers with
							a false name or
							email address, will result in rejection of the manuscript and may lead to further
							investigation in line with our
							misconduct policy.
						</p>

						<div style="margin:50px 0 0 30px">
							<el-form-item>
								<span slot="label">
									Invitation code
									<el-popover placement="top-start" width="320" trigger="hover">
										<p
											style="line-height: 24px;word-wrap: break-word;word-break: normal;text-align: left;">
											The journal encourages scientists to invite their colleagues or
											collaborators to submit manuscripts in order to promote collaboration and
											expand the journal's author network. You will be rewarded with credits that
											can be used to offset APC (specific details subject to journal policies) and
											gain priority in editorial board selection.
										</p>
										<i class="el-icon-info" slot="reference"
											style="color: #ef8429;cursor: pointer;vertical-align: super;font-size: 20px;"></i>
									</el-popover>
									:
								</span>
								<el-input v-model="form.code" placeholder="Please enter invitation code"
									style="width: 200px;"></el-input>
							</el-form-item>
						</div>

						<div style="margin:20px 0 30px 30px">
							<el-checkbox v-model="agreechecked" style="font-weight: bold;">I accept </el-checkbox>
							<el-link @click="licensebox=true" type="primary"
								style="padding-left: 5px;font-weight: bold;"> the license
								agreement</el-link>
						</div>

						<div style="text-align: center;margin: 40px 0 0 0;">
							<el-button type="primary" @click="onSubmit" style="width: 160px;margin-bottom: 30px;">Submit
							</el-button>
						</div>
					</div>
				</div>
			</el-form>
		</div>
		<el-dialog title="" :visible.sync="licensebox" width="500px">
			<span style="word-wrap:break-word; word-break:normal;line-height: 22px;">
				Creative Commons Licensing<br><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><br>
				Attribution: CC BY-NC 4.0<br><br>
				This license lets others distribute, remix, tweak, and build upon your work. They can not use the
				material for
				commercial purposes.<br><br>
				Copyright<br>
				Authors retain the copyright of their manuscripts.
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="licensebox = false">OK</el-button>
			</span>
		</el-dialog>


		<!-- 选择期刊弹出框 -->
		<el-dialog title="Change Journal" :visible.sync="changeVisible" width="780px">
			<el-form :model="jour_form" :rules="rules" label-width="85px">
				<el-form-item label="Journal" prop="journal">
					<div v-for="item in items" @click="ch_Jour(item.journal_id)"
						:class="jour_form.journal==item.journal_id?'jour_ku B_style':'jour_ku'">{{item.title}}</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="changeVisible = false">Cancel</el-button>
				<el-button type="primary" @click="close_ch_Jour()">OK</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				usercap: localStorage.getItem('U_role'),
				ms_alias: localStorage.getItem('ms_journal_alias'),
				stagingID: this.$route.query.id,
				move_step: 1, //进行步骤
				show_step: 1, //显示内容
				items: [],
				check_item: {},
				jour_form: {
					journal: 0,
				},
				changeVisible: false,
				licensebox: false,
				agreechecked: false,
				loading: false,
				listStep: [{
					index: 1,
					icon: 'el-icon-s-order',
					title: 'Basic Information'
				}, {
					index: 2,
					icon: 'el-icon-s-custom',
					title: 'Author Information'
				}, {
					index: 3,
					icon: 'el-icon-s-management',
					title: 'Upload Manuscript'
				}, {
					index: 4,
					icon: 'el-icon-s-check',
					title: 'Submit'
				}],
				form: {
					article_id: 0,
					journal: localStorage.getItem('ms_journal_alias') ? parseInt(localStorage.getItem(
						'ms_journal_alias')) : 1,
					username: localStorage.getItem('U_name'),
					user_id: localStorage.getItem('U_id'),
					title: '',
					major: '',
					major_a: '',
					major_b: '',
					major_c: '',
					authorList: [{
						firstname: '',
						lastname: '',
						orcid: '',
						company: '',
						department: '',
						title: '',
						country: '',
						email: '',
						address: '',
						isSuper: false,
						isReport: false
					}],
					checkedjours: [],
					abstrart: '',
					type: '',
					approval: false,
					istransfer: false,
					becomeRev: false,
					keyWords: '',
					fund: '',
					reviewers: [],
					coverLetter: '',
					picturesAndTables: '',
					totalpage: '',
					manuscirpt: '',
<<<<<<< HEAD
					supplementary: '',
					code: ''
=======
					topics:null
>>>>>>> remotes/origin/xie
				},
				journal_type: [{
					name: 'ARTICLE',
					value: 'A'
				}, {
					name: 'REVIEW',
					value: 'B'
				}, {
					name: 'CASE REPORT',
					value: 'C'
				}, {
					name: 'RESEARCH PROPOSAL',
					value: 'P'
				}, {
					name: 'NEWS',
					value: 'N'
				}, {
					name: 'COMMENT',
					value: 'T'
				}, {
					name: 'CORRECTION',
					value: 'CT'
				}, {
					name: 'HYPOTHESIS',
					value: 'HT'
				}, {
					name: 'PREFACE',
					value: 'PF'
				}, {
					name: 'EDITORIAL',
					value: 'ET'
				}, {
					name: 'REPORT',
					value: 'RP'
				}, {
					name: 'LETTER',
					value: 'LR'
				}, {
					name: 'EMPIRICAL FORMULA',
					value: 'EF'
				}, {
					name: 'EXPERT CONSENSUS',
					value: 'EC'
				}, {
					name: 'LETTER TO EDITOR',
					value: 'LTE'
				}, {
					name: 'QUESTIONNAIRE INVESTIGATION',
					value: 'QI'
				}, {
					name: 'CASE SERIES',
					value: 'CS',
				}, {
					name: 'RETRACTION',
					value: 'RT',
				}, {
					name: 'MINI REVIEW',
					value: 'MR',
				}, {
					name: 'OTHERS',
					value: 'O',
				}],
				reviewerForm: {
					username: localStorage.getItem('U_name'),
					gender: 1,
					introduction: '',
					country: '',
					major: '',
					field: '',
					technical: '',
					company: '',
					qualifications: ''
				},
				tuiJianForm: [{
					realname: '',
					email: '',
					country: '',
					major_all: ''
				}, {
					realname: '',
					email: '',
					country: '',
					major_all: ''
				}, {
					realname: '',
					email: '',
					country: '',
					major_all: ''
				}],
				countrys: [],
				fileL_coverLetter: [],
				fileL_picturesAndTables: [],
				fileL_manuscirpt: [],
				fileL_supplementary: [],
				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 select type',
						trigger: 'blur'
					}],
					major: [{
						required: true,
						message: 'Please select major',
						trigger: 'blur'
					}],
					abstrart: [{
						required: true,
						message: 'Please enter the abstract',
						trigger: 'blur'
					}],
					keyWords: [{
						required: true,
						message: 'Please enter keywords',
						trigger: 'blur'
					}],
					fund: [{
						required: true,
						message: 'Please input fund',
						trigger: 'blur'
					}],
					totalpage: [{
						required: true,
						message: 'Please upload totalpage',
						trigger: 'blur'
					}],
					manuscirpt: [{
						required: true,
						message: 'Please upload manuscirpt',
						trigger: 'blur'
					}],
					introduction: [{
						required: true,
						message: 'Please input personal qualification and resume',
						trigger: 'blur'
					}],
					country: [{
						required: true,
						message: 'Please select 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: 'Please enter company',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: 'Please enter email',
					}, {
						validator: function(rule, value, callback) {
							if (/^[-.-_A-Za-z0-9]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value) == false) {
								callback(new Error("Please enter the correct email format"));
							} else {
								callback();
							}
						}
					}],
					realname: [{
						message: 'Please enter realname',
						trigger: 'blur'
					}],
					country: [{
						required: true,
						message: 'Please select country',
						trigger: 'blur'
					}],
					major_all: [{
						required: true,
						message: 'Please select major',
						trigger: 'blur'
					}],
				},
				activeNames: [1],
				keywordsList: [{
					ke: ''
				}],
				majors_a: [],
				majors_b: [],
				majors_c: [],
				Reviewerof: {
					username: localStorage.getItem('U_name'),
					journal: localStorage.getItem('ms_journal_alias') ? parseInt(localStorage.getItem(
						'ms_journal_alias')) : 1
				},
				checkReviewerof: 0,
				companyList: [],
				countrys: [],
				majorList: [],
				jl_major: [],
				defaultParams: {
					label: 'title',
					value: 'major_id',
					children: 'children'
				},
				mj_jour: [],
				jour_name: '',
				topicsList:null,  // 话题列表
				topicsProps:{
					multiple: true,
					emitPath: false, // 只返回该节点的值
					value: "journal_topic_id", // 自定义要映射的键名
					label: "title",
					children: "children",
				}
			};
		},
		watch: {
			form: {
				handler(e) {
					// console.log(e)
				},
				deep: true
			},
		},
		created() {
			this.initSelect();
			if (this.stagingID != undefined) {
				this.form.article_id = this.stagingID
				this.Temporary()
			} else {
				this.initMajor();
				this.getTopics()
			}
		},
		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';
			},
			upload_supplementary: function() {
				return this.baseUrl + 'api/Article/up_file/type/supplementary';
			},
			upload_qualifications: function() {
				return this.baseUrl + 'api/Admin/up_file';
			},
		},
		methods: {
			onSubmit() {
				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].email == '') {
							this.$message.error('Please enter author email!');
							return false;
						}
						if (/^[-.-_A-Za-z0-9]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(authorlist[kk].email) ==
							false) {
							this.$message.error('Please enter the correct author email format!');
							return false;
						}
						if (authorlist[kk].firstname == '') {
							this.$message.error('Please enter author name!');
							return false;
						}
						if (authorlist[kk].country == '') {
							this.$message.error('Country is necessary for author!');
							return false;
						}
						if (authorlist[kk].isReport && authorlist[kk].address == '') {
							this.$message.error('Address is necessary for corresponding 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.$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) {
						// 验证是否推荐审稿人
						let tj_shifou = 0
						for (let i in this.tuiJianForm) {
							if (this.tuiJianForm[i].major_all != '' || this.tuiJianForm[i].realname != '' || this
								.tuiJianForm[i].email !=
								'' ||
								this.tuiJianForm[i].country != '') {
								tj_shifou = 1
							}
						}
						let tuijian_yanzheng = 0
						if (tj_shifou == 1) {
							for (let i in this.tuiJianForm) {
								this.$refs.tuiJianForm[i].validate(vali => {
									if (vali) {
										tuijian_yanzheng += 0
										this.tuiJianForm[i].major = this.tuiJianForm[i].major_all[0]
										this.tuiJianForm[i].cmajor = this.tuiJianForm[i].major_all[1]
									} else {
										tuijian_yanzheng += 1
									}
								})
							}
							this.form.reviewers = this.tuiJianForm
						} else {
							this.form.reviewers = []
						}
						if (tuijian_yanzheng == 0) {
							this.loading = true;
							// 验证是不是同意申请审稿人
							if (this.form.becomeRev == true) {
								if (this.usercap.includes('reviewer')) {
									// 如果已经是审稿人
									this.$api
										.post('api/Ucenter/applyReviewer', {
											user_id: localStorage.getItem('U_id'),
											journal_id: this.form.journal
										})
										.then((res) => {
											if (res.code == 0) {
												this.$message.success('Apply Success!');
												this.Submission_of_manuscripts()
											} else {
												this.$message.error(res.msg);
											}
										})
										.catch((err) => {
											console.log(err);
										});
								} else {
									if (this.reviewerForm.qualifications == '') {
										this.$message.error('qualifications is required');
										return false;
									}
									// 如果不是审稿人
									this.reviewerForm.journal = this.form.journal
									this.$refs.reviewerform.validate(vali => {
										if (vali) {
											this.$api
												.post('api/Admin/becameReviewer', this.reviewerForm)
												.then(res => {
													if (res.code == 0) {
														this.$message.success('Apply Success!');
														this.Submission_of_manuscripts()
													} else {
														this.$message.error(res.msg);
													}
												});
										}
									});
								}
							} else {
								this.Submission_of_manuscripts()
							}
						}
					} else {
						this.$message.error('Failed to submit. Please ensure the integrity of the information');
						console.log('The submission encountered an error.');
						return false;
					}
				});
			},

			Submission_of_manuscripts() {
				// 提交稿件
				this.$api
					// api/Article/addArticle
					.post('api/Article/addArticlePart4', this.form)
					.then((res) => {
						this.loading = false;
						if (res.code == 0) {
							this.$message.success('Successful submission!');
							this.$router.push('/articleList');
						} else {
							if (res.msg == undefined) {
								this.$message.error('Failed to submit, please contact administrator!');
								console.log(res.msg);
							} else {
								this.$message({
									duration: 0,
									showClose: true,
									message: res.msg,
									type: 'warning'
								});
								return false;
							}
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},

			addAuthor() {
				this.form.authorList.push({
					firstname: '',
					lastname: '',
					orcid: '',
					company: '',
					department: '',
					title: '',
					country: '',
					email: '',
					address: '',
					isSuper: false,
					isReport: false
				});
			},

			addfund() {
				this.keywordsList.push({
					ke: ''
				});
			},

			deleteAuthor(item, index) {
				// 二次确认删除
				this.$confirm('Are you sure you want to delete this author?', 'Delete', {
						type: 'warning'
					})
					.then(() => {
						this.form.authorList.splice(index, 1);
					})
					.catch(() => {});
			},

			//初始化期刊选项
			initSelect() {
				this.$api
					.post('api/Article/getJournal')
					.then((res) => {
						this.items = res;
						for (let i in this.items) {
							if (this.items[i].journal_id == this.form.journal) {
								this.check_item = this.items[i]
								this.jour_form.journal = this.items[i].journal_id
							}
						}
					})
					.catch((err) => {
						console.log(err);
					});

				this.$api
					.post('api/Admin/getCountrys')
					.then((res) => {
						this.countrys = res;
					});

				this.$api
					.post('api/Article/getAllCompany')
					.then((res) => {
						this.companyList = []
						for (let i in res.data.companys) {
							this.companyList.push({
								'value': res.data.companys[i].title
							})
						}
					});

				this.$api
					.post('/api/Reviewer/getMajorForReviewer', {
						username: localStorage.getItem('U_name'),
					}).then(res => {
						if (res.data.major != 0) {
							this.$api
								.post('api/User/getMajorList')
								.then(res => {
									this.majorList = res.data;
								})
						}
					})

				this.$api
					.post('api/Reviewer/getAllMajor')
					.then(res => {
						this.jl_major = res.data.majors;
					})
					.catch(err => {
						this.$message.error(err);
					});

				this.checkReviewer()

			},

			// 机构模糊搜索
			searchCompany(queryString, cb) {
				var companyList = this.companyList;
				var results = queryString ? companyList.filter(this.createFilter(queryString)) : companyList;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter(queryString) {
				return (companyList) => {
					return (companyList.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1);
				};
			},
			selCompany(item, index) {
				this.form.authorList[index].company = item.value
			},
			checkReviewer() {
				this.$api
					.post('api/Reviewer/checkReviewerOfJournal', this.Reviewerof)
					.then(res => {
						this.checkReviewerof = res.data.has;
					})
			},

			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'
				});
			},

			initMajor() {
				this.$api
					.post('api/Major/getMajorForAddArticle', {
						journal_id: this.form.journal,
						major_id: 1
					}).then((res) => {
						this.majors_a = res.data.majors;
					});
			},

			majorChange(e) {
				if (e == 1) {
					this.$api
						.post('api/Major/getMajorForAddArticle', {
							journal_id: this.form.journal,
							major_id: this.form.major_a
						}).then((res) => {
							this.majors_b = res.data.majors;
							this.majors_c = []
							this.form.major_b = ''
							this.form.major_c = ''
							this.majorChange_panduan()
						});
				} else if (e == 2 && this.form.major_b != 0) {
					this.$api
						.post('api/Major/getMajorForAddArticle', {
							journal_id: this.form.journal,
							major_id: this.form.major_b
						}).then((res) => {
							this.majors_c = res.data.majors;
							this.form.major_c = ''
							this.majorChange_panduan()
						});
				} else {
					this.majorChange_panduan()
				}
			},

			majorChange_panduan() {
				if (this.form.major_c != '' || this.form.major_c != 0) {
					this.form.major = this.form.major_c
				} else if (this.form.major_b != '' || this.form.major_b != 0) {
					this.form.major = this.form.major_b
				} else {
					this.form.major = this.form.major_a
				}
				// 选择共同投稿清除
				this.mj_jour = []
				this.form.checkedjours = []
				this.form.istransfer = false
			},

			getjournalbyid(jid) {
				for (var i in this.items) {
					if (this.items[i].journal_id == jid) {
						return this.items[i].title;
					}
				}
			},
			uperr_coverLetter(err) {
				this.$message.error('Upload error');
			},
			// 共同投稿
			changeSwitch(val) {
				if (val === true) {
					let flag = val
					this.form.istransfer = false
					// // 二次确认
					this.$confirm(
							'Please confirm this information again. When you select this Co-submission again. if the manuscript is not suitable for the first journal, the manuscript will be automatically submitted to the journal you selected.',
							'Tips', {
								confirmButtonText: 'OK',
								cancelButtonText: 'Cancel',
								type: 'warning'
							})
						.then(() => {
							this.form.istransfer = true;
							// 获取期刊by领域
							this.$api
								.post('api/Article/getJournalsByMajor', {
									major_id: this.form.major
								}).then((res) => {
									this.mj_jour = res.data.journals;
								});
						})
						.catch(() => {});
				}
			},
			// 是否申请审稿人
			changeBecome(val) {
				if (val === true) {
					let flag = val
					this.form.becomeRev = false
					// // 二次确认
					this.$confirm(
							'Do you want to apply to be a reviewer of ' + this.getjournalbyid(this.form.journal) + '?',
							'Tips', {
								type: 'warning'
							})
						.then(() => {
							this.form.becomeRev = true;
							// 作者同意申请审稿人
						})
						.catch(() => {});
				}
			},

			// 添加推荐审稿人
			onAddTuijian() {
				this.tuiJianForm.push({
					realname: '',
					email: '',
					country: '',
					major_all: ''
				});
			},
			onDeleteTuijian(item, index) {
				this.tuiJianForm.splice(index, 1);
			},
			// 下载文件
			dowloadFile(file) {
				let filePath = '/public/' + file.url;
				let fileName = file.name;

				// 获取heads中的filename文件名
				let downloadElement = document.createElement('a');
				// 创建下载的链接
				downloadElement.href = filePath // 下载后文件名
				downloadElement.download = fileName;
				downloadElement.target = "_blank";
				document.body.appendChild(downloadElement);
				// 点击下载
				downloadElement.click();
				// 下载完成移除元素
				document.body.removeChild(downloadElement);
			},
			//检验上传文件的格式
			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) {
				let flieArr = file.name.split(".")
				let fileSuffix = flieArr[flieArr.length - 1];
				if (fileSuffix != 'docx') {
					this.$message.error('Only word and compressed files can be uploaded(.docx)');
					return false;
				}
				// 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;
			},
			beforeupload_supplementary(file) {
				let flieArr = file.name.split(".")
				let fileSuffix = flieArr[flieArr.length - 1];
				if (fileSuffix != 'zip') {
					this.$message.error('Only zip files can be uploaded(.zip)');
					return false;
				}
				// 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;
					this.fileL_coverLetter = [{}]
					this.fileL_coverLetter[0].name = "Cover letter File";
					this.fileL_coverLetter[0].url = 'coverLetter/' + res.upurl;
					this.onStaging(3)
				} else {
					this.$message.error('service error：' + res.msg);
				}
			},
			upSuccess_picturesAndTables(res, file, fileList) {
				if (res.code == 0) {
					this.form.picturesAndTables = 'picturesAndTables/' + res.upurl;
					this.fileL_picturesAndTables = [{}]
					this.fileL_picturesAndTables[0].name = "Figures File";
					this.fileL_picturesAndTables[0].url = 'picturesAndTables/' + res.upurl;
					this.onStaging(4)
				} else {
					this.$message.error('service error：' + res.msg);
				}
			},
			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;
					this.fileL_manuscirpt = [{}];
					this.fileL_manuscirpt[0].name = "Manuscirpt File";
					this.fileL_manuscirpt[0].url = 'manuscirpt/' + res.upurl;
					this.onStaging(5)
				} else {
					this.$message.error('service error: ' + res.msg);
				}
			},
			upSuccess_supplementary(res, file) {
				if (res.code == 0) {
					this.form.supplementary = 'supplementary/' + res.upurl;
					this.fileL_supplementary = [{}]
					this.fileL_supplementary[0].name = "Supplementary Material";
					this.fileL_supplementary[0].url = 'supplementary/' + res.upurl;
					this.onStaging(6)
				} else {
					this.$message.error('service error: ' + res.msg);
				}
			},
			clearUploadedFile() {
				this.$refs['uploadFile'].clearFiles();
			},
			//超出传送文件个数限制
			alertlimit() {
				this.$message.error('The maximum number of uploaded files has been exceeded');
			},
			//清除文件时的事件
			removefilecoverLetter(file, fileList) {
				this.form.coverLetter = '';
				this.fileL_coverLetter = []
				this.$api
					.post('api/Article/delArticleFile', {
						file_id: this.form.coverLetterId
					})
					.then((res) => {
						if (res.code == 0) {
							this.$message.success('Deletion succeeded!');
						} else {
							this.$message.error(res.msg);
						}
					});
			},
			removefilepicturesAndTables(file, fileList) {
				this.form.picturesAndTables = '';
				this.fileL_picturesAndTables = []
				this.$api
					.post('api/Article/delArticleFile', {
						file_id: this.form.picturesAndTablesId
					})
					.then((res) => {
						if (res.code == 0) {
							this.$message.success('Deletion succeeded!');
						} else {
							this.$message.error(res.msg);
						}
					});
			},
			removefiletotalpage(file, fileList) {
				this.form.totalpage = '';
			},
			removefilemanuscirpt(file, fileList) {
				this.form.manuscirpt = '';
				this.fileL_manuscirpt = [];
				this.$api
					.post('api/Article/delArticleFile', {
						file_id: this.form.manuscirptId
					})
					.then((res) => {
						if (res.code == 0) {
							this.$message.success('Deletion succeeded!');
						} else {
							this.$message.error(res.msg);
						}
					});
			},
			removefilesupplementary() {
				this.form.supplementary = '';
				this.fileL_supplementary = [];
				this.$api
					.post('api/Article/delArticleFile', {
						file_id: this.form.supplementaryId
					})
					.then((res) => {
						if (res.code == 0) {
							this.$message.success('Deletion succeeded!');
						} else {
							this.$message.error(res.msg);
						}
					});
			},
			getOpState(index) {
				let a = this.activeNames.indexOf(index) > -1 ? 'Close' : 'Open';
			},
			checkfiletype(file) {},

			// 上传文件-简历
			uperr(err) {
				this.$message.error('upload defailed:' + err);
			},
			upSuccess(res, file) {
				if (res.code == 0) {
					this.reviewerForm.qualifications = 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 = '';
			},

			// 点击更换期刊
			change_Journal() {
				this.jour_form.journal = this.form.journal
				this.changeVisible = true;
			},

			// 点击期刊-更换
			ch_Jour(e) {
				this.jour_form.journal = e
			},

			// 点击期刊-确定
			close_ch_Jour() {
				for (let i in this.items) {
					if (this.items[i].journal_id == this.jour_form.journal) {
						this.check_item = this.items[i]
					}
				}
				this.Reviewerof.journal = this.jour_form.journal;
				this.checkReviewer();
				this.form.journal = this.jour_form.journal;
				this.form.major = ''
				this.form.major_a = ''
				this.form.major_b = ''
				this.form.major_c = ''
				this.majors_a = []
				this.majors_b = []
				this.majors_c = []
				this.mj_jour = []
				this.form.checkedjours = []
				this.form.istransfer = false
				this.form.becomeRev = false
				this.changeVisible = false
				this.initMajor();
			},

			// 点击期刊-更换-所有
			ch_Jour_all(e) {
				this.Reviewerof.journal = e;
				this.checkReviewer();
				this.form.journal = e
				this.form.major = ''
				this.form.major_a = ''
				this.form.major_b = ''
				this.form.major_c = ''
				this.majors_a = []
				this.majors_b = []
				this.majors_c = []
				this.mj_jour = []
				this.form.checkedjours = []
				this.form.istransfer = false
				this.form.becomeRev = false
				this.initMajor();
				this.getTopics()
			},

			// 点击tab变化
			StepCode(e) {
				if (this.move_step > e) {
					if (this.move_step == 2) {
						this.onStaging(2)
					}
					this.show_step = e
					this.move_step = e

				} else if (this.move_step < e) {
					this.$refs.articleform.validate((valid) => {
						if (valid) {
							if (this.move_step == 1) {
								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);
								this.$api
									.post('api/Article/addArticlePart1', this.form)
									.then((res) => {
										if (res.code == 0) {
											this.stagingID = res.data.article_id
											this.form.article_id = res.data.article_id
											this.$message.success('Saving succeeded!');
											this.move_step = 2 //进行步骤
											this.show_step = 2 //显示内容
										} else {
											this.$message.error(res.msg);
										}
									});
							} else if (this.move_step == 2) {
								this.onStaging(2)
								this.show_step = 3
								this.move_step = 3
							} else {
								this.show_step = e
								this.move_step = e
							}
						} else {
							this.$message.error('Please fill in the current content first!');
							return false;
						}
					});
				} else {
					if (e == 1) {
						this.onStaging(1)
					}
					if (e == 2) {
						this.onStaging(2)
					}
				}
			},

			showFiles() {
				// 文件显示出来
				this.fileL_coverLetter = [];
				if (this.form.coverLetter != '') {
					this.fileL_coverLetter = [{}]
					this.fileL_coverLetter[0].name = "Cover letter File";
					this.fileL_coverLetter[0].url = this.form.coverLetter;

				}
				this.fileL_picturesAndTables = [];
				if (this.form.picturesAndTables != '') {
					this.fileL_picturesAndTables = [{}]
					this.fileL_picturesAndTables[0].name = "Figures File";
					this.fileL_picturesAndTables[0].url = this.form.picturesAndTables;
				}
				this.fileL_manuscirpt = [];
				if (this.form.manuscirpt != '') {
					this.fileL_manuscirpt = [{}];
					this.fileL_manuscirpt[0].name = "Manuscirpt File";
					this.fileL_manuscirpt[0].url = this.form.manuscirpt;
				}
				this.fileL_supplementary = [];
				if (this.form.supplementary != '') {
					this.fileL_supplementary = [{}];
					this.fileL_supplementary[0].name = "Supplementary Material";
					this.fileL_supplementary[0].url = this.form.supplementary;
				}
			},

			// 点击进行下一步
			onStep(e) {
				this.$refs.articleform.validate((valid) => {
					if (valid) {
						if (e == 1) {
							// this.onStaging(1)
							// setTimeout(() => {
							// 	console.log('456')
							// 	this.move_step = 2 //进行步骤
							// 	this.show_step = 2 //显示内容
							// }, 1000);

							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);
							this.$api
								.post('api/Article/addArticlePart1', this.form)
								.then((res) => {
									if (res.code == 0) {
										this.stagingID = res.data.article_id
										this.form.article_id = res.data.article_id
										this.$message.success('Saving succeeded!');
										this.move_step = 2 //进行步骤
										this.show_step = 2 //显示内容
									} else {
										this.$message.error(res.msg);
									}
								});
						}
						if (e == 2) {
							this.onStaging(e) //暂存
							// 作者邮箱必填
							let Firsta = 0;
							let Corra = 0;
							if (this.form.authorList.length == 0) {
								this.$message.error('Author is required');
								return;
							}
							for (let i in this.form.authorList) {
								if (this.form.authorList[i].email == '') {
									this.$message.error('Please fill in the email information!');
									return
								}
								if (this.form.authorList[i].firstname == '') {
									this.$message.error('Please fill in the author name!');
									return;
								}
								if (this.form.authorList[i].country == '') {
									this.$message.error('Country is necessary for author!');
									return;
								}
								if (this.form.authorList[i].isReport && this.form.authorList[i].address == '') {
									this.$message.error('Address is necessary for corresponding author');
									return;
								}
								if (this.form.authorList[i].isReport) {
									Corra++;
								}
								if (this.form.authorList[i].isSuper) {
									Firsta++;
								}
							}
							if (Firsta == 0 || Corra == 0) {
								// this.$message.error('First author and corresponding author must be exist');
								// return;
							}
							this.move_step = 3 //进行步骤
							this.show_step = 3 //显示内容
						}
						if (e == 3) {
							this.move_step = 4 //进行步骤
							this.show_step = 4 //显示内容
						}
					} else {
						this.$message.error('The submission encountered an error.');
						return false;
					}
				});
			},

			// save暂存
			onStagingSave(e) {
				if (e == 1) {
					this.onStaging(1)
				} else if (e == 2) {
					this.onStaging(2)
				}
			},

			// 暂存
			onStaging(e) {
				if (e == 1) {
					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);
					this.$api
						.post('api/Article/addArticlePart1', this.form)
						.then((res) => {
							if (res.code == 0) {
								this.stagingID = res.data.article_id
								this.form.article_id = res.data.article_id
								this.$message.success('Saving succeeded!');
							} else {
								this.$message.error(res.msg);
								console.log('456')
								return false;
							}
						});
				} else if (e == 2) {
					for (let i = 0; i < this.form.authorList.length; i++) {
						if (this.form.authorList[i].art_aut_id == undefined) {
							this.form.authorList[i].art_aut_id = 0
						}
						// 空信息的作者删除
						let authMark = 0
						for (let key in this.form.authorList[i]) {
							if (key != 'isSuper' && key != 'isReport' && key != 'is_super' && key != 'is_report' &&
								key != 'state' && key != 'article_id' && key != 'art_aut_id') {
								if (this.form.authorList[i][key] != '') {
									authMark++
								}
							}
						}
						if (authMark == 0) {
							this.form.authorList.splice(i, 1)
							i = i - 1
						}
					}
					if (this.form.authorList.length != 0) {
						this.$api
							.post('api/Article/saveArticleAuthor', {
								article_id: this.form.article_id,
								authors: this.form.authorList
							})
							.then((res) => {
								if (res.code == 0) {
									this.$message.success('Saving succeeded!');
								} else {
									this.$message.error(res.msg);
								}
							});
					}

				} else if (e == 3) {
					this.$api
						.post('api/Article/addArticlefile', {
							article_id: this.form.article_id,
							type: 'coverLetter',
							url: this.form.coverLetter
						})
						.then((res) => {
							if (res.code == 0) {
								this.form.coverLetterId = res.data.file_id
							} else {
								this.$message.error(res.msg);
							}
						});
				} else if (e == 4) {
					this.$api
						.post('api/Article/addArticlefile', {
							article_id: this.form.article_id,
							type: 'picturesAndTables',
							url: this.form.picturesAndTables
						})
						.then((res) => {
							if (res.code == 0) {
								this.form.picturesAndTablesId = res.data.file_id
							} else {
								this.$message.error(res.msg);
							}
						});
				} else if (e == 5) {
					this.$api
						.post('api/Article/addArticlefile', {
							article_id: this.form.article_id,
							type: 'manuscirpt',
							url: this.form.manuscirpt
						})
						.then((res) => {
							if (res.code == 0) {
								this.form.manuscirptId = res.data.file_id
							} else {
								this.$message.error(res.msg);
							}
						});
				} else if (e == 6) {
					this.$api
						.post('api/Article/addArticlefile', {
							article_id: this.form.article_id,
							type: 'supplementary',
							url: this.form.supplementary
						})
						.then((res) => {
							if (res.code == 0) {
								this.form.supplementaryId = res.data.file_id
							} else {
								this.$message.error(res.msg);
							}
						});
				}
			},

			// 读取
			Temporary() {
				this.$api
					.post('api/Article/getSaveArticleDetail', {
						'article_id': this.stagingID
					})
					.then((res) => {
						console.log(res, '已经保存的值')
						if (res.code == 0) {
							// 基本信息
							this.form.journal = res.data.base.journal_id
							this.form.type = res.data.base.type
							this.form.title = res.data.base.title
							this.form.approval = res.data.base.approval
							this.form.abstrart = res.data.base.abstrart
							this.form.fund = res.data.base.fund
							this.form.topics = res.data.base.topics							
							// 领域
							this.$api
								.post('api/Major/getMajorForAddArticle', {
									journal_id: this.form.journal,
									major_id: 1
								}).then((res) => {
									this.majors_a = res.data.majors;
								});
							this.form.major_a = res.data.major.major_id
							this.$api
								.post('api/Major/getMajorForAddArticle', {
									journal_id: this.form.journal,
									major_id: this.form.major_a
								}).then((ref) => {
									this.majors_b = ref.data.majors;
									this.majors_c = []
									this.form.major_b = ''
									this.form.major_c = ''
									this.majorChange_panduan()
									if (res.data.major.child != undefined) {
										this.form.major_b = res.data.major.child.major_id
										this.$api
											.post('api/Major/getMajorForAddArticle', {
												journal_id: this.form.journal,
												major_id: this.form.major_b
											}).then((ref) => {
												this.majors_c = ref.data.majors;
												this.form.major_c = ''
												this.majorChange_panduan()
												if (res.data.major.child.child != undefined) {
													this.form.major_c = res.data.major.child.child.major_id
													this.majorChange_panduan()
												}
											});
									}
								});
							// 关键词
							let keyList = res.data.base.keywords.split(",")
							this.keywordsList = []
							for (let i = 0; i < keyList.length; i++) {
								this.keywordsList.push({
									'ke': keyList[i]
								})
							}
							// 作者
							if (res.data.authors.length > 0) {
								this.form.authorList = res.data.authors
								this.activeNames = []
								for (let i = 0; i < this.form.authorList.length; i++) {
									if (this.form.authorList[i].is_report == 1) {
										this.form.authorList[i].isReport = true
									} else {
										this.form.authorList[i].isReport = false
									}
									if (this.form.authorList[i].is_super == 1) {
										this.form.authorList[i].isSuper = true
									} else {
										this.form.authorList[i].isSuper = false
									}
									this.form.authorList[i].title = this.form.authorList[i].author_title
									this.activeNames.push(i + 1)
								}
							}
							// 文件
							if (res.data.files.length > 0) {
								for (let i = 0; i < res.data.files.length; i++) {
									if (res.data.files[i].type_name == 'coverLetter') {
										this.form.coverLetter = res.data.files[i].file_url
										this.form.coverLetterId = res.data.files[i].file_id
									}
									if (res.data.files[i].type_name == 'picturesAndTables') {
										this.form.picturesAndTables = res.data.files[i].file_url
										this.form.picturesAndTablesId = res.data.files[i].file_id
									}
									if (res.data.files[i].type_name == 'manuscirpt') {
										this.form.manuscirpt = res.data.files[i].file_url
										this.form.manuscirptId = res.data.files[i].file_id
									}
									if (res.data.files[i].type_name == 'supplementary') {
										this.form.supplementary = res.data.files[i].file_url
										this.form.supplementaryId = res.data.files[i].file_id
									}
								}
								this.showFiles()
							}
						} else {
							this.$message.error(res.msg);
						}
					});
			},

			// 选择
			chanSelt() {
				this.$forceUpdate()
			},

			// 获取话题
			getTopics(){
				this.$api	
				.post('api/Article/getJournalTopics', {'journal_id': this.Reviewerof.journal})
				.then((res) => {
					if (res.code == 0) {
						this.topicsList = res.data.topics
						console.log(res.data.topics,'话题')
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			// 选中值变化
			topicsChange(e){
				console.log(this.form.topics,'选中的话题id')
			}

		}
	};
</script>

<style scoped>
	.formTopics{
		width: 100%;
	}
</style>

<style>
	.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: 14px;
		color: rgb(133, 131, 131);
	}

	.tffont {
		font-size: 10px;
		line-height: 1.5;
		color: rgb(133, 131, 131);
	}

	.orcid_link {
		color: #409EFF;
		margin-left: 20px;
	}

	.orcid_link:hover {
		text-decoration: underline;
	}

	.manu_add .el-upload__tip {
		position: absolute;
		top: -5px;
		left: 90px;
		color: #999;
	}

	.el-collapse-item__content {
		padding-bottom: 8px !important;
	}

	.up_newstyle {
		margin-left: 10px;
	}

	.up_newstyle .el-upload--text {
		background-color: #006699;
		border: 1px solid #006699;
		padding: 0 7px;
		/* margin-left: 10px; */
	}

	.up_newstyle .el-upload__text em {
		color: #fff !important;
		font-size: 12px;
	}

	.Del_btn {
		color: #df1f1f !important;
		margin-left: 30px;
	}

	.Del_btn:hover {
		text-decoration: underline;
	}

	.manu_add .el-form-item__label {
		color: #000;
	}

	.manu_add .el-upload__tip {
		color: #333;
	}

	.manu_add .zyfont {
		color: #111;
	}

	.manu_add h3 {
		margin: 5px 20px 30px 20px;
		color: #006699;
	}

	.manu_add .el-collapse {
		border-top: 1px solid #bfcdd3;
		border-bottom: 1px solid #bfcdd3;
	}

	.manu_add .el-collapse-item__header {
		background-color: #f8fbff;
		border-bottom: 1px solid #bfcdd3;
	}

	.manu_add .el-collapse-item__wrap {
		background-color: #f8fbff;
	}

	.manu_add .el-collapse-item__header.is-active {
		border-bottom-color: transparent;
	}

	.manu_add .bag_color {
		padding-top: 25px;
		background-color: #f8fbff;
		box-shadow: 2px 30px 15px -20px #ebf5ff inset;
	}

	.manu_add .bag_color>div {
		padding: 1px 25px;
		background-color: #f8fbff;
		box-shadow: 2px -30px 15px -20px #ebf5ff inset;
	}

	.manu_add .pro_ceed {
		width: 260px;
		margin-bottom: 50px;
		font-size: 14px;
	}

	.manu_add .pro_stage {
		width: 120px;
		margin-bottom: 50px;
		font-size: 14px;
	}

	.manu_add .el-form-item__error {
		margin-left: 10px;
		top: 99%;
		color: #e52d2d;
	}

	.step_list {
		margin: 30px 0 0 0;
	}

	.step_list>div {
		position: relative;
		float: left;
		background-color: #eee;
		padding-top: 20px;
	}

	.step_list>div>.bor_der {
		position: absolute;
		height: 70px;
		width: 2px;
		background-color: #d5dee3;
		top: 40px;
		left: 0;
	}

	.step_list>div>div {
		width: 240px;
		height: 85px;
		text-align: center;
		color: #777;
		background-color: #eee;
		padding-top: 5px;
		font-weight: bold;
		cursor: pointer;
	}

	.step_list>div>div:hover {
		color: #006699;
	}

	.step_list>div>div i {
		display: block;
		font-size: 35px;
		margin-bottom: 5px;
	}

	.step_list>div.C_style {
		background-color: #f8fbff;
		box-shadow: 2px 30px 15px -20px #ebf5ff inset;
	}

	.step_list>div.C_style>div {
		background-color: #f8fbff;
		box-shadow: 2px -30px 15px -20px #ebf5ff inset;
		color: #006699;
	}

	.step_list>div .num {
		position: absolute;
		top: 0;
		left: 0;
		height: 20px;
		line-height: 20px;
		width: 20px;
		text-align: center;
		color: #fff;
		background: #006699;
	}

	.step_list>div .num::before,
	.step_list>div .num::after {
		content: "";
		position: absolute;
		border-top: 10px solid #006699;
		border-right: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 10px solid #006699;
	}

	.step_list>div .num::before {
		bottom: -20px;
		left: 0;
	}

	.step_list>div .num::after {
		right: -20px;
		top: 0;
	}

	.jour_ku {
		font-size: 14px;
		float: left;
		width: 330px;
		padding-left: 10px;
		cursor: pointer;
		color: #666;
		line-height: 34px;
	}

	.jour_ku:nth-child(2n) {
		width: 280px;
	}

	.jour_ku.B_style {
		background-color: #006699;
		color: #fff;
		font-weight: bold;
	}

	.jour_ku_all {
		font-size: 12px;
		float: left;
		width: 210px;
		padding-left: 10px;
		cursor: pointer;
		color: #666;
		line-height: 26px;
	}

	.jour_ku_all:nth-child(3n+1) {
		width: 270px;
	}

	.jour_ku_all:nth-child(3n+2) {
		width: 240px;
	}

	.jour_ku_all.B_style {
		color: #006699;
		font-weight: bold;
	}

	.tally_jour {
		line-height: 18px;
		width: 350px;
		margin-right: 0;
		font-size: 13px;
	}

	.tally_jour .el-checkbox__label {
		font-size: 13px;
	}

	.web_stite:hover {
		text-decoration: underline;
	}

	.tuijian_f {
		width: 835px;
		padding: 10px 5px 15px 5px;
		margin: 20px 0px 0px 55px;
		box-shadow: 0 0 8px #b7d2ed;
		position: relative;
	}

	.tuijian_f>p {
		margin: 0 0 0 10px;
		color: #006699;
		font-weight: bold;
		letter-spacing: -1px;
		font-size: 14px;
	}

	.tuijian_f>.shanchu_tj {
		position: absolute;
		right: 0;
		top: 0;
		padding: 5px 10px;
	}

	.tuijian_f>.el-form-item {
		display: inline-block;
		margin: 0 8px;
	}

	.tuijian_f>.el-form-item .el-form-item__label {
		padding: 0;
	}

	.tuijian_f .el-form-item>.el-form-item__label:before {
		content: "" !important;
	}


	.el-popover {
		word-break: break-word;
		text-align: left;
	}
</style>
