<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> Manuscript detail </el-breadcrumb-item>
				<el-breadcrumb-item>Manuscript detail</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container" v-if="transque">
			<div class="top-content">
				<span>
					<p>
						I am writing just to follow up on the suggestion from the editor of {{ form.journalname }} that you might be
						interested in submitting your paper to {{ transinfo.jourtitle }} instead.<br /><br />
					</p>
					<p>
						If you choose to pursue publication in {{ transinfo.jourtitle }},
						<el-link type="primary" @click="quetrans()">please click here</el-link>.
					</p>
				</span>
			</div>
		</div>
		<div class="container" v-else>
			<el-row>
				<el-col :span="16">
					<div class="form-box" v-loading="loading">
						<el-form ref="articleform" :model="form" :rules="rules" label-width="110px">
							<el-form-item label="Suggest" v-show="this.form.state == 4 ? true : false">
								<el-card class="box-card" v-for="(item, index) in suggest" :key="index">
									<div slot="header" class="clearfix">
										<span>Reviewer Opinion{{ index + 1 }}</span>
										<!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
									</div>
									<div>
										{{ item.comments }}
									</div>
								</el-card>
							</el-form-item>
							<el-form-item label="Status">
								<span>{{ articleState }}</span>
							</el-form-item>
							<el-form-item v-if="form.accept_sn != ''" label="Manuscript ID">
								<span>{{ form.accept_sn }}</span>
							</el-form-item>
							<!-- <el-form-item v-if="suggest != ''" label="Suggest">
                                <span>{{suggest}}</span>
                            </el-form-item> -->
							<el-form-item label="Journal">
								<span>{{ journal_me }}</span>
							</el-form-item>
							<el-form-item v-if="form.special_num > 0" label="Special Issues">
								<span>{{ form.special_title }}</span>
							</el-form-item>
							<el-form-item label="Title">
								<span>{{ form.title }}</span>
							</el-form-item>
							<el-form-item label="Type">
								<span>{{ form.type | jtName }}</span>
							</el-form-item>
							<el-form-item label="Major">
								<span>{{form.major}}</span>
							</el-form-item>
							<el-form-item label="Ethical Approval" v-show="form.type == 'A'">
								<span>{{ form.approval ? 'yes' : 'no' }}</span>
							</el-form-item>
							<el-form-item label="Author" :required="true">
								<!-- <p class="zyfont">The number of first authors and corresponding authors both be limited in two.</p> -->
								<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="ORCID iD:" label-width="100px">
											<el-input v-model="item.orcid" placeholder="Last name"></el-input>
										</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="Affiliation:" label-width="100px">
											<el-input autosize type="textarea" v-model="item.company" placeholder="Affiliation"></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" 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" v-show="this.form.state == 4 ? true : false">
									<i class="el-icon-circle-plus-outline">Add author</i>
								</el-button>
							</el-form-item>
							<el-form-item label="Abstract">
								<el-input type="textarea" rows="5" v-model="form.abstrart" placeholder="Description information" :readonly="true"></el-input>
								<p>{{form.abstrart}}</p>
							</el-form-item>
							<el-form-item label="Key words">
								<el-input v-model="form.keyWords" placeholder="keyword1,keyword2" :readonly="true"></el-input>
							</el-form-item>
							<el-form-item label="Fund" v-if="form.fund!=''">
								<el-input v-model="form.fund" placeholder="fund" :readonly="true"></el-input>
							</el-form-item>
							<el-row>
								<el-col :span="8">
									<el-form-item label="Cover letter">
										<el-popover placement="right" width="350" trigger="click">
											<el-table :data="coverLetterFileList" empty-text="New messages (0)">
												<el-table-column width="150" :formatter="filedateformate" property="ctime" align="center" label="date"></el-table-column>
												<el-table-column width="100" property="username" align="center" label="Uploader"></el-table-column>
												<el-table-column width="100" label="download" align="center">
													<template slot-scope="scope">
														<el-link type="primary" icon="el-icon-download" :href="getlinkurl(scope.row)"></el-link>
													</template>
												</el-table-column>
											</el-table>
											<el-button class="more_btn" icon="el-icon-download" type="text" slot="reference">Download</el-button>
										</el-popover>
										<el-upload v-show="this.form.state == 4 ? true : false" 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>Re 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-col>
								<el-col :span="8">
									<el-form-item label="Manuscript">
										<el-popover placement="right" width="350" trigger="click">
											<el-table :data="manuscirptFileList" empty-text="New messages (0)">
												<el-table-column width="150" :formatter="filedateformate" property="ctime" align="center" label="date"></el-table-column>
												<el-table-column width="100" property="username" align="center" label="Uploader"></el-table-column>
												<el-table-column width="100" label="download" align="center">
													<template slot-scope="scope">
														<el-link type="primary" icon="el-icon-download" :href="getlinkurl(scope.row)"></el-link>
													</template>
												</el-table-column>
											</el-table>
											<el-button class="more_btn" icon="el-icon-download" type="text" slot="reference">Download</el-button>
										</el-popover>
										<el-upload v-show="this.form.state == 4 ? true : false" 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>Re upload</em>
											</div>
											<div class="el-upload__tip" slot="tip">Only word and compressed files(.doc,.docx,.rar,.zip)</div>
										</el-upload>
									</el-form-item>
								</el-col>
							</el-row>

							<el-row>
								<el-col :span="8">
									<el-form-item label="Figures">
										<el-popover placement="right" width="350" trigger="click">
											<el-table :data="picturesAndTablesFileList" empty-text="New messages (0)">
												<el-table-column width="150" :formatter="filedateformate" property="ctime" align="center" label="date"></el-table-column>
												<el-table-column width="100" property="username" align="center" label="Uploader"></el-table-column>
												<el-table-column width="100" label="download" align="center">
													<template slot-scope="scope">
														<el-link type="primary" icon="el-icon-download" :href="getlinkurl(scope.row)"></el-link>
													</template>
												</el-table-column>
											</el-table>
											<el-button class="more_btn" icon="el-icon-download" type="text" slot="reference">Download</el-button>
										</el-popover>
										<el-upload v-show="this.form.state == 4 ? true : false" 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>Re 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-col>
								<el-col :span="8">
									<el-form-item label="Title page">
										<el-popover placement="right" width="350" trigger="click">
											<el-table :data="totalpageFileList" empty-text="New messages (0)">
												<el-table-column width="150" :formatter="filedateformate" property="ctime" align="center" label="date"></el-table-column>
												<el-table-column width="100" property="username" align="center" label="Uploader"></el-table-column>
												<el-table-column width="100" label="download" align="center">
													<template slot-scope="scope">
														<el-link type="primary" icon="el-icon-download" :href="getlinkurl(scope.row)"></el-link>
													</template>
												</el-table-column>
											</el-table>
											<el-button class="more_btn" icon="el-icon-download" type="text" slot="reference">Download</el-button>
										</el-popover>
										<el-upload v-show="this.form.state == 4 ? true : false" class="upload-demo" :action="upload_totalpage" accept=".doc, .docx, .rar, .zip"
										 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>Re upload</em>
											</div>
											<div class="el-upload__tip" slot="tip">Only word and compressed files(.doc,.docx,.rar,.zip)</div>
										</el-upload>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item v-show="this.form.state == 4 ? true : false">
								<el-button type="primary" @click="onSubmit">modify</el-button>
							</el-form-item>
						</el-form>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="tree_box">
						<h2>State tracking</h2>
						<div class="block">
							<el-timeline>
								<el-timeline-item :timestamp="formatDate(form.ctime)" placement="top">
									<el-card>
										<h4>Manuscript Submission</h4>
										<p>{{ form.username }} submit article</p>
									</el-card>
								</el-timeline-item>
								<el-timeline-item v-for="(activity, index) in msgs" :key="index" :timestamp="formatDate(activity.ctime)"
								 placement="top">
									<el-card v-if="activity.ftype == 0">
										<p>Status change: {{ statetostr(activity.state_from) }} => {{ statetostr(activity.state_to) }}</p>
										<p v-if="activity.content != ''">{{ activity.content }}</p>
									</el-card>
									<el-card v-else>
										<p>Author message:</p>
										<p>{{ activity.content }}</p>
									</el-card>
								</el-timeline-item>
							</el-timeline>
						</div>
						<el-button type="primary" icon="el-icon-edit" round style="margin-left: 28px" @click="authormsg">Edit message</el-button>
					</div>
				</el-col>
			</el-row>
		</div>

		<el-dialog title="Message" :visible.sync="editVisible" width="40%" :close-on-click-modal="false">
			<el-form ref="msgform" :model="msgform" label-width="80px">
				<el-form-item label="Message">
					<el-input type="textarea" rows="5" v-model="msgform.content" placeholder="Author messages"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="saveMsg" :loading="saveloading">save</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				suggest: '',
				loading: false,
				transque: false,
				items: '',
				coverLetterFileList: [],
				picturesAndTablesFileList: [],
				totalpageFileList: [],
				manuscirptFileList: [],
				supplementaryFileList:[],
				countrys: [],
				transinfo: [],
				msgform: {
					articleId: this.$route.query.id,
					content: ''
				},
				form: {
					articleId: this.$route.query.id,
					journal: '',
					journalname: '',
					username: localStorage.getItem('U_name'),
					title: '',
					accept_sn: '',
					abstrart: '',
					keyWords: '',
					type: '',
					major: '',
					approval: false,
					fund: '',
					coverLetter: '',
					picturesAndTables: [],
					totalpage: '',
					manuscirpt: '',
					state: '',
					ctime: '',
					authorList: []
				},
				rules: {
					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'
					}]
				},
				msgs: [],
				editVisible: false,
				saveloading: false
			};
		},
		created: function() {
			this.initselect();
			this.initarticle();
			this.initFileList();
			this.initCountrys();
		},
		computed: {
			
			coverLetterUrl: function() {
				return this.baseUrl + this.form.coverLetter;
			},
			picturesAndTablesUrl: function() {
				return this.baseUrl + this.form.picturesAndTables;
			},
			manuscirptUrl: function() {
				return this.baseUrl + this.form.manuscirpt;
			},
			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';
			},
			journal_me: function() {
				var frag = this.form.journalname;
				if (this.form.special_num > 0) {
					frag += '(Special Issues)';
				}
				return frag;
			},
			articleState: function() {
				let str = '';
				switch (this.form.state) {
					case 0:
						str = this.$t('artstate.state0');
						break;
					case 1:
						str = this.$t('artstate.state1');
						break;
					case 2:
						str = this.$t('artstate.state2');
						break;
					case 3:
						str = this.$t('artstate.state3');
						break;
					case 4:
						str = this.$t('artstate.state4');
						break;
					case 5:
						str = this.$t('artstate.state5');
						break;
					case 6:
						str = this.$t('artstate.state6');
						break;
				}
				return str;
			}
		},
		methods: {
			onSubmit() {
				this.$refs.articleform.validate((valid) => {
					//验证文件
					// if (this.form.manuscirpt == '') {
					//     this.$message.error('Manuscript is required');
					//     console.log('file up error');
					//     return false;
					// }
					// //验证文章作者
					// var alist = this.form.authorList;
					// for (var i in alist) {
					//     if (alist[i].author != '' && alist[i].isReport && alist[i].email == '') {
					//         this.$message.error("The corresponding author's email is required");
					//         return false;
					//     }
					// }
					if (valid) {
						this.loading = true;
						this.$api
							.post('api/Article/editArticle', this.form)
							.then((res) => {
								this.loading = false;
								if (res.code == 0) {
									this.$message.success('success');
									this.initarticle();
									this.initFileList();
								} 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;
					}
				});
			},
			saveAuthor() {
				//验证文章作者
				var alist = this.form.authorList;
				for (var i in alist) {
					if (alist[i].author != '' && alist[i].email == '') {
						this.$message.error("The author's email is required");
						return false;
					}
				}
				this.$api.post('api/Article/saveAuthor', this.form).then((res) => {
					if (res.code == 0) {
						this.$message.success('update author success');
						this.$router.go(0);
					} else {
						console.log(res);
					}
				});
			},
			//初始化期刊选项
			initselect() {
				this.$api
					.post('api/Article/getJournal')
					.then((res) => {
						this.items = res;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			initCountrys() {
				this.$api.post('api/Admin/getCountrys').then((res) => {
					this.countrys = res;
				});
			},
			//初始化期刊信息
			initarticle() {
				this.$api
					.post('api/Article/getArticleDetail', {
						articleId: this.form.articleId,
						human: 'author'
					})
					.then((res) => {
						this.form.title = res.article.title;
						this.form.journal = res.article.journal_id;
						this.form.journalname = res.article.journalname;
						this.form.abstrart = res.article.abstrart;
						this.form.accept_sn = res.article.accept_sn;
						this.form.keyWords = res.article.keywords;
						this.form.fund = res.article.fund;
						this.form.state = res.article.state;
						this.form.special_num = res.article.special_num;
						this.form.special_title = res.article.special_title;
						this.form.major = res.major;
						this.form.type = res.article.type;
						(this.form.approval = res.article.approval == 1 ? true : false), (this.form.ctime = res.article.ctime);
						this.transinfo = res.transinfo;
						if (this.transinfo != null) {
							this.transque = true;
						}
						this.msgs = res.msg;
						this.suggest = res.suggest;
						this.form.authorList = [];
						var alist = res.authors;
						for (var i in alist) {
							this.form.authorList.push({
								art_aut_id: alist[i].art_aut_id,
								firstname: alist[i].firstname,
								lastname: alist[i].lastname,
								orcid: alist[i].orcid,
								company: alist[i].company,
								department: alist[i].department,
								title: alist[i].author_title,
								country: alist[i].country,
								email: alist[i].email,
								address: alist[i].address,
								isSuper: alist[i].is_super == 1 ? true : false,
								isReport: alist[i].is_report == 1 ? true : false
							});
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},
			//初始化filelist
			initFileList() {
				this.$api
					.post('api/Article/getFilelistByArticleID', {
						articleId: this.form.articleId
					})
					.then((res) => {
						this.coverLetterFileList = res.coverLetter;
						this.picturesAndTablesFileList = res.picturesAndTables;
						this.totalpageFileList = res.totalpage;
						this.manuscirptFileList = res.manuscirpt;
						this.supplementaryFileList = res.supplementary;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			deleteAuthor(item, index) {
				this.form.authorList.splice(index, 1);
			},
			addAuthor() {
				this.form.authorList.push({
					firstname: '',
					lastname: '',
					company: '',
					department: '',
					title: '',
					country: '',
					email: '',
					address: '',
					isSuper: false,
					isReport: false
				});
			},
			//检验上传文件的格式
			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;
			},
			quetrans() {
				if (confirm('Your sure transfer your manuscript?')) {
					this.$api
						.post('api/article/trans_manu', this.transinfo)
						.then((res) => {
							this.$message.success('success');
							this.$router.go(0);
						});
				}
			},
			getlinkurl(row) {
				return this.mediaUrl + row.file_url;
			},
			filedateformate(row, column, cellValue, index) {
				return this.formatDate(cellValue);
			},
			uperr_coverLetter(err) {
				this.$message.error('upload error!');
			},
			beforeupload() {},
			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);
				}
			},
			formatDate(timestamp) {
				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
				var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D + ' ' + h + ':' + m + ':' + s;
			},
			//超出传送文件个数限制
			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 = '';
			},
			authormsg() {
				this.editVisible = true;
			},
			saveMsg() {
				if (this.msgform.content == '') {
					this.$message.error('Please input messages');
					return false;
				}
				this.saveloading = true;
				this.$api.post('api/Article/authorMessage', this.msgform).then((res) => {
					this.saveloading = false;
					this.$message.success('Sent successfully');
					this.$router.go(0);
				});
			},
			statetostr(mystate) {
				let str = '';
				switch (mystate) {
					case 0:
						str = this.$t('artstate.state0');
						break;
					case 1:
						str = this.$t('artstate.state1');
						break;
					case 2:
						str = this.$t('artstate.state2');
						break;
					case 3:
						str = this.$t('artstate.state3');
						break;
					case 4:
						str = this.$t('artstate.state4');
						break;
					case 5:
						str = this.$t('artstate.state5');
						break;
					case 6:
						str = this.$t('artstate.state6');
						break;
				}
				return str;
			}
		}
	};
</script>


<style scoped>
	.dwnbtn {
		margin-bottom: 5px;
	}

	.container {
		min-width: 1000px;
	}

	.tree_box {
		padding: 15px 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.el-row {
		margin-bottom: 5px;
	}

	.author-title {
		color: #969595;
		text-align: center;
		background-color: #eceaea;
	}

	.author-delete {
		text-align: center;
	}

	.author-delete i {
		color: red;
	}

	.zyfont {
		font-size: 10px;
		color: rgb(133, 131, 131);
	}

	.top-content span {
		/* font-family: Arial, Helvetica, sans-serif; */
		display: block;
		padding: 2px;
		font-size: 14px;
		line-height: 1.5;
	}
</style>
