<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> Manuscripts in Draft
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container_state">
			<div class="handle-box" style="margin: 20px 0;text-align: right;">
				<el-button type="primary" icon="el-icon-edit-outline" @click="addArticle" style="width: 190px;">New
					Submission</el-button>
			</div>

			<p v-if="tableData.length==0" style="text-align: center;font-size: 20px;">No Drafts</p>

			<div shadow="never" v-for="item in tableData" class="mangu_list">
				<div style="padding: 20px 20px 20px 20px;position: relative;">
					<p class="man_title" @click="jumpArticle(item.article_id)">
						{{item.title}}
					</p>
					<p style="margin-bottom: 8px;">
						<font style="color: #666b7a;">ID : </font>
						{{item.accept_sn}}
						<font style="color: #666b7a;margin-left: 50px;">Type : </font>
						{{item.type | ellipsis}}
						<font style="color: #666b7a;margin-left: 50px;">Journal : </font>
						<b style="font-weight: normal;">{{item.journal_title}}</b>
					</p>
					<p>
						<font style="color: #666b7a;">
							<i class="el-icon-time" style="margin: 0 5px 0 0;"></i>
							Update Time :
						</font>
						<b style="font-weight: normal;margin: 0 0 0 5px;">{{item.ctime}}</b>
					</p>
					<el-button type="primary" @click="jumpArticle(item.article_id)"
						style="position: absolute;right: 15px;top: 28px;width: 80px;">Continue</el-button>
					<el-button type="danger" @click="deleteArticle(item.article_id)" size="mini" plain
						style="position: absolute;right: 15px;top: 70px;width: 80px;">Delete</el-button>
				</div>
			</div>

		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.Common.baseUrl,
				mediaUrl: this.Common.mediaUrl,
				query: {
					user_id: localStorage.getItem('U_id')
				},
				tableData: [],
			};
		},
		created() {
			this.getdate();
		},
		methods: {
			// 获取文章列表数据
			getdate() {
				this.$api
					.post('api/Article/getSaveArticles', this.query)
					.then(res => {
						if (res.code == 0) {
							this.tableData = res.data.articles;
							for (let i = 0; i < this.tableData.length; i++) {
								let date = new Date(parseInt(this.tableData[i].ctime) * 1000);
								let Y = date.getFullYear() + '-';
								let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date
								.getMonth() +
									1 + '-';
								let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
								this.tableData[i].ctime = Y + M + D;
							}
						} else {
							this.$message.error(res.msg);
						}


					})
					.catch(err => {
						console.log(err);
					});
			},

			// 增加稿件
			addArticle() {
				this.$router.push('/articleAdd');
			},

			// 跳转暂存文章
			jumpArticle(e) {
				this.$router.push({
					path: 'articleAdd',
					query: {
						id: e
					}
				});
			},

			// 删除暂存文章
			deleteArticle(e) {
				// 二次确认删除
				this.$confirm('Are you sure you want to delete?', 'Tip', {
						type: 'warning'
					})
					.then(() => {
						this.$api
							.post('api/Article/delSaveArticle', {
								article_id:e
							})
							.then(res => {
								if (res.code == 0) {
									this.$message.success('Deletion succeeded!');
									this.getdate();
								} else {
									this.$message.error(res.msg);
								}
							})
							.catch(err => {
								console.log(err);
							});
					})
					.catch(() => {});
			},

			// 时间
			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;
			},

		},
		filters: {
			// 文章类型
			ellipsis(value) {
				let frag = '';
				switch (value) {
					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;
			},

		},
		computed: {

		}

	};
</script>

<style scoped>
	.container {
		color: #333;
	}

	.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;
	}

	.el-table .hasChange-row {
		background-color: #ffebe8;
	}

	.mangu_list {
		color: #333;
		margin: 0 0 20px 0;
		font-size: 14px;
		/* position: relative; */
		border-radius: 5px;
		border: 2px solid #EBEEF5;
		background-color: #fff;

	}

	/* .mangu_list:hover {
	    border: 2px solid rgba(0,102,153,.3);
	} */

	.mangu_list .man_title {
		margin: 2px 100px 10px 0;
		font-weight: bolder;
		letter-spacing: -0.5px;
		font-size: 16px;
		cursor: pointer;
		display: inline-block;
		line-height: 18px;
	}

	.mangu_list .man_title:hover {
		text-decoration: underline;
		color: #006699
	}

	.mangu_list .man_state {
		position: absolute;
		right: -1px;
		top: -1px;
		border: 1px solid #fff;
		color: #fff;
		text-align: center;
		padding: 6px 18px;
		letter-spacing: -0.5px;
		border-top-right-radius: 3px;
		/* border-top-left-radius: 3px; */
	}

	.mangu_list .man_progess {
		padding: 15px 20px;
		border-top: 1px solid #5a90e126;

	}

	.mangu_list .man_progess i {
		margin: 0 5px 0 0;
	}


	.mangu_list .man_progess>a>b {
		margin-left: 5px;
		color: #5a90e1;
		text-decoration: underline;
	}

	.mangu_list .man_progess>a>b:hover {
		color: #006699;
	}

	.mangu_list .man_btn {
		/* color: #006699; */
		position: absolute;
		bottom: 25px;
		right: 25px;
		font-size: 15px;
	}

	.mangu_list .man_btn>span {
		/* text-decoration: underline; */
	}

	.mangu_list .man_btn>span:hover {
		text-decoration: underline;
		cursor: pointer;
		color: #06374e;
	}


	.mangu_list .man_btn i {
		margin: 0 8px 0 0;
	}

	.mangu_list .man_btn font {
		margin: 0 18px;
	}
</style>
