<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-box"></i> Manuscript list
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-select v-model="query.special_id" @change="getDate" placeholder="Please select journal">
					<el-option :key="0" label="All Specials" :value="0"></el-option>
					<el-option v-for="item in specil_L" :key="item.journal_special_id" :label="item.title" :value="item.journal_special_id"></el-option>
				</el-select>
				<el-select v-model="query.state" @change="getDate" placeholder="Please select status" style="margin-left:5px;width: 130px;">
					<el-option :key="-1" label="All status" :value="-1"></el-option>
					<el-option :key="0" :label="$t('artstate.state0')" :value="0" :disabled="query.act==2"></el-option>
					<el-option :key="1" :label="$t('artstate.state1')" :value="1" :disabled="query.act==2"></el-option>
					<el-option :key="2" :label="$t('artstate.state2')" :value="2" :disabled="query.act==2"></el-option>
					<el-option :key="3" :label="$t('artstate.state3')" :value="3" :disabled="query.act==1"></el-option>
					<el-option :key="4" :label="$t('artstate.state4')" :value="4" :disabled="query.act==2"></el-option>
					<el-option :key="6" :label="$t('artstate.state6')" :value="6" :disabled="query.act==2"></el-option>
					<el-option :key="5" :label="$t('artstate.state5')" :value="5" :disabled="query.act==1"></el-option>
				</el-select>
				<el-select v-model="query.act" @change="getDate" placeholder="Please select status" style="margin-left:5px;width: 100px;">
					<el-option :key="1" :label="$t('artstate.act1')" :value="1"></el-option>
					<el-option :key="2" :label="$t('artstate.act2')" :value="2"></el-option>
				</el-select>
				<el-input v-model="query.name" placeholder="Title" class="handle-input" style="margin-left:5px;width: 180px;"></el-input>
				<el-input v-model="query.sn" placeholder="SN" class="handle-input mr10" style="margin-left:5px;width: 180px;"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">Search</el-button>
			</div>
			<el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header" empty-text="New messages (0)">
				<el-table-column type="index" label="No." width="55" align="center"></el-table-column>
				<el-table-column prop="accept_sn" width="170" label="Manuscript ID" align="center">
					<template slot-scope="scope">
						<p style="margin-bottom: 5px;">{{scope.row.accept_sn}}</p>
						<el-button size="mini" type="primary" plain icon="el-icon-tickets" @click="showdetaileditor(scope.row)">Detail</el-button>
						<!-- <el-button @click="deteContent(scope.row)" size="mini" type="primary" plain icon="el-icon-tickets">Manuscript Detail</el-button> -->
					</template>
				</el-table-column>
				<el-table-column prop="title" label="Title" align="center">
					<template slot-scope="scope">
						<el-badge is-dot :hidden="scope.row.author_act==1?false:true" class="item">
							{{scope.row.title}}
						</el-badge>
					</template>
				</el-table-column>
				<el-table-column label="" align="center">
					<template slot="header">
						<div>Reviewer</div>
						<div>Decision</div>
					</template>
					<template slot-scope="scope">
						<p style="margin-bottom: 5px;">
							<el-button v-for="(item, index) in scope.row.review" :type="item.state==2?'danger':'success'" circle style="padding: 5px;"></el-button>
						</p>
						<el-button size="mini" type="primary" plain icon="el-icon-user" @click="articleReviewer(scope.row)">Peer-Review</el-button>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="journalname" label="Journal" align="center"></el-table-column> -->
				<el-table-column label="Submitter" align="center">
					<template slot-scope="scope">
						<p v-if="scope.row.realname!=''">
							<font style="color: #999;font-size: 12px;">Name:</font>
							{{scope.row.realname}}
						</p>
						<p v-if="scope.row.email!=''">
							<font style="color: #999;font-size: 12px;">Email:</font>
							{{scope.row.email}}
						</p>
						<p v-if="scope.row.phone!=''">
							<font style="color: #999;font-size: 12px;">Phone:</font>
							{{scope.row.phone}}
						</p>
					</template>
				</el-table-column>
				<el-table-column label="Countries" align="center">
					<template slot-scope="scope">
						<p v-for="(item, index) in scope.row.countrys">
							{{item}}
							<font v-if="index!=scope.row.countrys.length-1">,</font>
						</p>
					</template>
				</el-table-column>
				<el-table-column label="Status" align="center">
					<template slot-scope="scope">
						<p style="margin-bottom: 5px;">{{stateFormat(scope.row.state)}}</p>
						<el-button @click="testvis(scope.row)" size="mini" type="primary" plain icon="el-icon-edit">Change</el-button>
					</template>
				</el-table-column>
				<el-table-column label="Repetition" align="center">
					<template slot-scope="scope">
						<p style="margin-bottom: 5px;">{{scope.row.repetition}} %</p>
						<el-button @click="changeRepe(scope.row)" size="mini" type="primary" plain icon="el-icon-edit">Change</el-button>
					</template>
				</el-table-column>
				<el-table-column label="Remarks" align="center">
					<template slot-scope="scope">
						<p style="margin-bottom: 5px;">{{scope.row.remarks}}</p>
						<el-button @click="testedit(scope.row)" size="mini" type="primary" plain icon="el-icon-edit">Change</el-button>
					</template>
				</el-table-column>
				<!-- <el-table-column label="" width="105" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" plain icon="el-icon-discount" @click="showdetaileditor(scope.row)">Detail</el-button>
					</template>
				</el-table-column> -->
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize"
				 :total="Total" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>
		
		<el-dialog title="Manuscript Information" :visible.sync="ConentVise" width="800px">
			<div class="art_state_message">
				<p>
					<font>Status :</font><b>{{stateFormat(MesDetail.state)}}</b>
				</p>
				<p>
					<font>Title :</font><b>{{MesDetail.title}}</b>
				</p>
				<p>
					<font>ID : </font><b>{{MesDetail.accept_sn}}</b>
				</p>
				<p>
					<font>Type :</font><b>{{myType(MesDetail.type)}}</b>
				</p>
				<p v-show="MesDetail.type=='A'">
					<font>Ethical Approval :</font><b>{{MesDetail.approval?'Yes':'No'}}</b>
				</p>
				<p v-if="MesDetail.special_num > 0">
					<font>Special Issues :</font><b>{{ MesDetail.special_title }}</b>
				</p>
				<p>
					<font>Journal :</font><b>{{MesDetail.journalname}}{{journal_me(MesDetail.special_num)}}</b>
				</p>
				<p>
					<font>Major :</font><b>{{MesDetail.major}}</b>
				</p>
				<el-collapse class="auth_colla auth_collna_ew auth_collna_list">
					<el-collapse-item :title="authorList_name" name="1">
						<div v-for="(item, index) in MesDetail.authorList" class="auth_mess">
							<h4 style="font-weight: bolder;">
								<img src="../../assets/img/state_one.png" v-if="item.isSuper" style="width: 15px;margin: 0 2px 0 0;vertical-align: text-bottom;">
								{{item.firstname}} {{item.lastname}} {{item.isSuper?'#':''}}{{item.isReport?'*':''}}
							</h4>
							<div>
								<p v-if="item.email">
									<img src="../../assets/img/state_email.png" v-if="item.isReport" style="width: 14px;margin: 0 8px 0 0;vertical-align: text-bottom;">
									<font>Email : </font>{{item.email}}
								</p>
								<p v-if="item.orcid">
									<font>ORCID iD : </font>{{item.orcid}}
								</p>
								<p>
									<font>First author : </font>
									<b v-if="item.isSuper">Yes</b>
									<b v-if="!item.isSuper">No</b>
								</p>
								<p>
									<font>Corresponding Author :</font>
									<b v-if="item.isReport">Yes</b>
									<b v-if="!item.isReport">No</b>
								</p>
								<p v-if="item.address">
									<font>Address : </font>{{item.address}}
								</p>
								<p v-if="item.company">
									<font>Affiliation : </font>{{item.company}}
								</p>
								<p v-if="item.department">
									<font>Department : </font>{{item.department}}
								</p>
								<p v-if="item.title">
									<font>Title : </font>{{item.title}}
								</p>
								<p v-if="item.country">
									<font>Country : </font>{{item.country}}
								</p>
							</div>
						</div>
					</el-collapse-item>
				</el-collapse>
				<el-collapse class="auth_colla auth_collna_ew auth_collna_list" style="margin-top: -15px;">
					<el-collapse-item name="2">
						<template slot="title">
							Abstract
							<font v-if="MesDetail.keywords" style="margin-left: 3px;">, Keywords</font>
							<font v-if="MesDetail.fund" style="margin-left: 3px;">, Fund</font>
						</template>
						<p>
							<font>Abstract :</font><b>{{MesDetail.abstrart}}</b>
						</p>
						<p v-if="MesDetail.keywords">
							<font>Keywords :</font><b>{{MesDetail.keywords}}</b>
						</p>
						<p v-if="MesDetail.fund">
							<font>Fund :</font><b>{{MesDetail.fund}}</b>
						</p>
					</el-collapse-item>
				</el-collapse>
			</div>

			<div class="art_file">
				<h4 v-if="coverLetterFileList">Cover letter : </h4>
				<p v-if="coverLetterFileList">
					<a v-for="item in coverLetterFileList" :href="mediaUrl + item.file_url">
						<img src="../../assets/img/icon_0.png">
						<span>
							<font>Uploader : </font>{{item.username}}
							<i><i class="el-icon-time"></i>{{formatDate(item.ctime)}}</i>
						</span>
						<i class="el-icon-download download"></i>
					</a>
				</p>
				<br clear="both" v-if="coverLetterFileList">
				<h4 v-if="picturesAndTablesFileList">Figures : </h4>
				<p v-if="picturesAndTablesFileList">
					<a v-for="item in picturesAndTablesFileList" :href="mediaUrl + item.file_url">
						<img src="../../assets/img/icon_0.png">
						<span>
							<font>Uploader : </font>{{item.username}}
							<i><i class="el-icon-time"></i>{{formatDate(item.ctime)}}</i>
						</span>
						<i class="el-icon-download download"></i>
					</a>
				</p>
				<br clear="both" v-if="picturesAndTablesFileList">
				<h4 v-if="totalpageFileList">Title page : </h4>
				<p v-if="totalpageFileList">
					<a v-for="item in totalpageFileList" :href="mediaUrl + item.file_url">
						<img src="../../assets/img/icon_0.png">
						<span>
							<font>Uploader : </font>{{item.username}}
							<i><i class="el-icon-time"></i>{{formatDate(item.ctime)}}</i>
						</span>
						<i class="el-icon-download download"></i>
					</a>
				</p>
				<br clear="both" v-if="totalpageFileList">
				<h4 v-if="supplementaryFileList">Supplementary Material : </h4>
				<p v-if="supplementaryFileList">
					<a v-for="item in supplementaryFileList" :href="mediaUrl + item.file_url">
						<img src="../../assets/img/icon_0.png">
						<span>
							<font>Uploader : </font>{{item.username}}
							<i><i class="el-icon-time"></i>{{formatDate(item.ctime)}}</i>
						</span>
						<i class="el-icon-download download"></i>
					</a>
				</p>
				<br clear="both" v-if="supplementaryFileList">
				<h4>Manuscirpt : </h4>
				<p>
					<a v-for="item in manuscirptFileList" :href="mediaUrl + item.file_url">
						<img src="../../assets/img/icon_0.png">
						<span>
							<font>Uploader : </font>{{item.username}}
							<i><i class="el-icon-time"></i>{{formatDate(item.ctime)}}</i>
						</span>
						<i class="el-icon-download download"></i>
					</a>
				</p>
				<br clear="both">
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="ConentVise = false">OK</el-button>
			</span>
		</el-dialog>

		<el-dialog title="Change Status" :visible.sync="editVisible" width="550px">
			<el-form ref="editform" :model="editform" label-width="95px">
				<el-form-item label="Title :">
					<p style="line-height: 20px;margin-top: 6px;">{{editform.title}}</p>
				</el-form-item>
				<el-form-item label="Status :">
					<el-select v-model="editform.state" placeholder="Please select">
						<!-- <el-option v-for="item in nextState" :key="item.state" :label="item.title" :value="item.state" :disabled="item.disabled"></el-option> -->
						<el-option :key="0" label="Received" :value="0" :disabled="true"></el-option>
						<el-option :key="1" label="With editor" :value="1"></el-option>
						<el-option :key="2" label="Under review" :value="2"></el-option>
						<el-option :key="3" label="Reject" :value="3"></el-option>
						<el-option :key="4" label="Revision" :value="4"></el-option>
						<el-option :key="5" label="Accept" :value="5" :disabled="true"></el-option>
						<el-option :key="6" label="Pre-accept" :value="6"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="Message :">
					<el-input type="textarea" rows="5" v-model="editform.editormsg" placeholder="feedback information"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">Cancel</el-button>
				<el-button type="primary" @click="saveEdit">Save</el-button>
			</span>
		</el-dialog>
		
		<el-dialog title="Remarks" :visible.sync="editbox" width="550px">
			<el-form ref="remark" :model="remark" label-width="85px">
				<el-form-item label="Title :">
					<p style="line-height: 20px;margin-top: 6px;">{{remark.title}}</p>
				</el-form-item>
				<el-form-item label="Content :">
					<el-input type="textarea" rows="5" v-model="remark.content"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editbox = false">Cancel</el-button>
				<el-button type="primary" @click="saveRemark">Save</el-button>
			</span>
		</el-dialog>
		
		<el-dialog title="Repetition" :visible.sync="repebox" width="550px">
			<el-form ref="repetition" :model="repeform" label-width="90px">
				<el-form-item label="Title :">
					<p style="line-height: 20px;margin-top: 6px;">{{repeform.title}}</p>
				</el-form-item>
				<el-form-item label="File :" v-if="repeform.repeurl!=''">
					<a :href="mediaUrl + repeform.repeurl" class="zip_load" target="_blank" style="margin-left: 0;">
						<img src="../../assets/img/icon_0.png">
						<span>Duplicate check file</span>
						<i class="el-icon-download download"></i>
					</a>
				</el-form-item>
				<el-form-item label="Content :">
					<el-input maxlength="3" style="width:100px;" v-model="repeform.repefen">
						<template slot="append">%</template>
					</el-input>
				</el-form-item>
				<el-form-item label="Zip :">
					<el-upload ref="zipLoad" class="upload-demo" :action="upload_zip" accept=".rar, .zip" name="repezip" :on-success="upSuccess_repezip"
					 :limit="1" :on-exceed="alertlimit" :on-remove="removefilerepezip">
						<div class="el-upload__text" style="padding:0 5px;">
							<em>Click Upload</em>
						</div>
						<div class="el-upload__tip" slot="tip">Only pdf and word files can be uploaded(.pdf,.doc,.docx)</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="repebox = false">Cancel</el-button>
				<el-button type="primary" @click="saveRepe">Save</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'articleListEditor',
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				specil_L: '',
				query: {
					user_id: localStorage.getItem('U_id'),
					special_id: 0,
					titleKey: '',
					sn: '',
					state: -1,
					act: 1,
					pageIndex: 1,
					pageSize: 50
				},
				tableData: [],
				multipleSelection: [],
				delList: [],
				Total: 0,
				ConentVise: false,
				editVisible: false,
				editbox: false,
				repebox: false,
				editform: {
					editname: localStorage.getItem('U_name'),
					articleId: 0,
					state: 0,
				},
				remark: {
					articleId: 0,
					content: ''
				},
				repeform: {
					articleId: 0,
					repefen: '',
					zipurl: '',
					repeurl: '',
				},
				nextState: [{
						state: 0,
						title: this.$t('artstate.state0'),
						disabled: true
					},
					{
						state: 1,
						title: this.$t('artstate.state1')
					},
					{
						state: 2,
						title: this.$t('artstate.state2'),
					},
					{
						state: 3,
						title: this.$t('artstate.state3')
					},
					{
						state: 4,
						title: this.$t('artstate.state4')
					},
					{
						state: 6,
						title: this.$t('artstate.state6')
					},
					{
						state: 5,
						title: this.$t('artstate.state5')
					},	
				],
				MesDetail: {},
				authorList_name: '',
				coverLetterFileList: [],
				picturesAndTablesFileList: [],
				totalpageFileList: [],
				manuscirptFileList: [],
				supplementaryFileList: [],
			};
		},
		created() {
			this.initselect();
			this.getDate();
		},
		computed: {
			upload_zip: function() {
				return this.baseUrl + 'api/Article/up_file/type/repezip';
			},
		},
		methods: {
			//初始化客座选项
			initselect() {
				this.$api
					.post('api/User/getUserAllSpecials', {
						'user_id': this.query.user_id
					})
					.then(res => {
						this.specil_L = res.data.specials;
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 获取数据
			getDate() {
				this.$api
					.post('api/Special/getSpecialArticles', this.query)
					.then(res => {
						this.tableData = res.data.articles;
						this.Total = res.data.count;
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageIndex', 1);
				this.getDate();
			},
			//文章送审
			articleReviewer(row) {
				this.$router.push({
					path: 'guestArticleReviewerL',
					query: {
						id: row.article_id
					}
				});
			},
			//弹出编辑框
			deteContent(e) {
				this.ConentVise = true
				this.$api
					.post('api/Article/getArticleDetail', {
						articleId: e.article_id,
						human: 'editor'
					})
					.then(res => {
						this.MesDetail = res.article;
						this.MesDetail.major = res.major;
						this.MesDetail.authorList = [];
						var alist = res.authors;
						let alist_name = [];
						for (var i in alist) {
							this.MesDetail.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
							});
							if (i == alist.length - 1) {
								alist_name.push(alist[i].firstname + ' ' + alist[i].lastname)
							} else {
								alist_name.push(alist[i].firstname + ' ' + alist[i].lastname + ' , ')
							}
						}
						this.authorList_name = "Author : " + alist_name.join("");
					})
					.catch(err => {
						console.log(err);
					});

				this.$api
					.post('api/Article/getFilelistByArticleID', {
						articleId: e.article_id
					})
					.then(res => {
						this.coverLetterFileList = res.coverLetter;
						this.picturesAndTablesFileList = res.picturesAndTables;
						this.manuscirptFileList = res.manuscirpt;
						this.totalpageFileList = res.totalpage;
						this.supplementaryFileList = res.supplementary;
					})
					.catch(err => {
						console.log(err);
					});
			},
			testvis(e) {
				this.editVisible = true;
				this.editform.title = e.title;
				this.editform.articleId = e.article_id;
				this.editform.state = e.state;
				this.editform.state_old = e.state;
			},
			testedit(e) {
				this.editbox = true;
				this.remark.title = e.title;
				this.remark.articleId = e.article_id;
				this.remark.content = e.remarks;
			},
			changeRepe(e) {
				this.repebox = true;
				this.repeform.title = e.title;
				this.repeform.articleId = e.article_id;
				this.repeform.repefen = e.repetition;
				this.repeform.repeurl = e.repeurl;
				this.repeform.zipurl = '';
				this.$nextTick(() => {
					this.$refs.zipLoad.clearFiles();
				})
			},
			//修改文章状态
			saveEdit() {
				this.$api
					.post('api/Special/editArticle', this.editform)
					.then(res => {
						if (res.code == 0) {
							this.$message.success('success');
							this.editVisible = false;
							this.getDate();
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 修改标记
			saveRemark() {
				this.$api.post('api/Article/editArticleRemark', this.remark)
					.then(res => {
						if (res.code == 0) {
							this.$message.success('success');
							this.editbox = false;
							this.getDate();
						} else {
							this.$message.error(res.msg);
						}
					});
			},
			// 修改查重
			saveRepe() {
				if (this.repeform.zipurl == '') {
					this.$message.error('please upload zip');
					return false;
				}
				this.$api.post('api/Article/changeRepetition', this.repeform)
					.then(res => {
						if (res.code == 0) {
							this.$message.success('success');
							this.repebox = false;
							this.getDate();
						} else {
							this.$message.error(res.msg);
						}
					});
			},
			// 查重文件操作
			upSuccess_repezip(res, file) {
				if (res.code == 0) {
					this.repeform.zipurl = 'repezip/' + res.upurl;
				}
			},
			removefilerepezip(file, fileList) {
				this.repeform.zipurl = '';
			},
			alertlimit() {
				this.$message.error('The maximum number of uploaded files has been exceeded');
			},

			//格式化状态输出
			stateFormat(e) {
				let str = '';
				switch (e) {
					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;
					default:
						str = 'error!!';
				}
				return str;
			},
			myType(e) {
				let frag = '';
				switch (e) {
					case "A":
						frag = 'ARTICLE';
						break;
					case 'B':
						frag = 'REVIEW';
						break;
					case 'C':
						frag = 'CASE REPORT';
						break;
					case 'P':
						frag = 'RESEARCH PROPOSAL';
						break;
					case 'N':
						frag = 'NEWS';
						break;
					case 'T':
						frag = 'COMMENT';
						break;
					case 'CT':
						frag = 'CORRECTION';
						break;
					case 'HT':
						frag = 'HYPOTHESIS';
						break;
					case 'PF':
						frag = 'PREFACE';
						break;
					case 'ET':
						frag = 'EDITORIAL';
						break;
					case 'RP':
						frag = 'REPORT';
						break;
					case 'LR':
						frag = 'LETTER';
						break;
					case 'EF':
						frag = 'EMPIRICAL FORMULA';
						break;
					case 'EM':
						frag = 'EVIDENCE-BASED MEDICINE';
						break;
					case 'EC':
						frag = 'EXPERT CONSENSUS';
						break;
					case 'LTE':
						frag = 'LETTER TO EDITOR';
						break;
					case 'QI':
						frag = 'QUESTIONNAIRE INVESTIGATION';
						break;
					case 'PT':
						frag = 'PROTOCOL';
						break;
					case 'CS':
						frag = 'CASE SERIES';
						break;
					case 'RT':
						frag = 'RETRACTION';
						break;
					case 'MR':
						frag = 'MINI REVIEW';
						break;
					default:
						frag = 'OTHERS';
				}
				return frag;
			},
			journal_me(e) {
				var frag = '';
				if (e > 0) {
					frag += "(Special Issues)";
				}
				return frag;
			},
			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;
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getDate();
			},
			showdetaileditor(row) {
				let stat_num = 'guestArticleDetail'
				this.$router.push({
					path: stat_num,
					query: {
						id: row.article_id
					}
				});
			},
			tableRowClassName({
				row,
				rowIndex
			}) {

				if (row.state == 1 || row.state == 2) {
					return 'normol-row';
				} else if (row.state == 3) {
					return 'red-row';
				} else if (row.state == 4) {
					return 'warning-row';
				} else if (row.state == 5) {
					return 'success-row';
				} else {
					return '';
				}
			}
		}
	};
</script>

<style scoped>
	.art_file>h4 {
		text-align: left;
	}

	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}

	.item {
		margin-top: 5px;
	}
</style>
