<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> Manuscript list
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-select v-model="query.journal" @change="getdate" placeholder="Please select journal">
					<el-option :key="0" label="All journal" :value="0"></el-option>
					<el-option v-for="item in items" :key="item.journal_id" :label="item.title" :value="item.journal_id"></el-option>
				</el-select>
				<el-select v-model="query.state" @change="getdate" placeholder="Please select status" style="margin-left:5px;">
					<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="5" :label="$t('artstate.state5')" :value="5" :disabled="query.act==1"></el-option>
					<el-option :key="6" :label="$t('artstate.state6')" :value="6" :disabled="query.act==2"></el-option>
				</el-select>
				<el-select v-model="query.act" @change="getdate" placeholder="Please select status" style="margin-left:5px;">
					<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>
			</div>
			<el-table :data="tableData" border ref="multipleTable" empty-text="New messages (0)">
				>
				<el-table-column type="index" label="No." width="55" align="center"></el-table-column>
				<!-- <el-table-column prop="article_id" label="ID" width="55" align="center"></el-table-column> -->
				<el-table-column prop="title" label="Title" align="left"></el-table-column>
				<el-table-column prop="abbr" label="Journal" width="80" align="center"></el-table-column>
				<el-table-column :formatter="typeFormat" label="Type" width="100" align="center"></el-table-column>
				<el-table-column :formatter="repeFormat" prop="repetition" label="Repetition" width="80" align="center"></el-table-column>
				<el-table-column prop="realname" label="Editor" width="100" align="center"></el-table-column>
				<el-table-column :formatter="dateFormat" prop="ctime" width="100" label="Add date" align="center"></el-table-column>
				<el-table-column prop="state" label="Status" :formatter="stateFormat" align="center" width="100"></el-table-column>
				<el-table-column prop="country" label="Country" width="120" align="center"></el-table-column>
				<el-table-column label="" width="100" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" plain icon="el-icon-tickets" @click="showdetail(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>
	</div>
</template>

<script>
	export default {
		name: 'monitorManuscript',
		data() {
			return {
				items: '',
				query: {
					journal: 0,
					state: -1,
					act: 1,
					pageIndex: 1,
					pageSize: 10
				},
				tableData: [],
				multipleSelection: [],
				delList: [],
				editVisible: false,
				Total: 0
				// form: {},
				// idx: -1,
				// id: -1
			};
		},
		created() {
			this.initselect();
			this.getdate();
		},
		methods: {
			//初始化期刊选项
			initselect() {
				this.$api
					.post('api/Article/getJournal')
					.then(res => {
						this.items = res;
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 获取数据
			getdate() {
				this.$api
					.post('api/Admin/getArticle', this.query)
					.then(res => {
						console.log(res);
						this.Total = res.total;
						this.tableData = res.data;
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageIndex', 1);
				this.getdate();
			},
			//跳转到增加稿件页面
			addArticle() {
				this.$router.push('/articleAdd');
			},
			//格式化状态输出
			stateFormat(row, column) {
				let str = '';
				switch (row.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;
					default:
						str = 'error!!';
				}
				return str;
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageIndex', val);
				this.getdate();
			},
			showdetail(row) {
				this.$router.push({
					path: 'monitorManuscriptDetail',
					query: {
						id: row.article_id
					}
				});
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (row.editor_act == 1) {
					return 'hasChange-row';
				}
			},
			dateFormat(row, column, cellValue, index) {
				return this.formatDate(cellValue);
			},
			nameformate(row, column, cellValue, index) {
				return row.username + '(' + row.realname + ')';
			},
			repeFormat(row, column, cellValue, index) {
				return cellValue + '%';
			},
			typeFormat(row, column, cellValue, index) {
				let frag = '';
				switch (row.type) {
					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;
			},
			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;
				// return Y + M + D + ' ' + h + ':' + m + ':' + s;
			},
		}
	};
</script>

<style scoped>
	.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>
<style>
	.el-table .hasChange-row {
		background-color: #ffebe8;
	}
</style>
