<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-calendar"></i> Manuscript email list
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container_state" v-loading="loading">
			<div class="em_list">
				<div v-for="(item, index) in emaiList">
					<p class="mesEmail">
						<span>To:</span>{{item.email}}
						<span>Time:</span>{{formatDate(item.ctime)}}
					</p>
					<p v-html="item.content"></p>
					<p v-if="item.attachment!=''" class="em_file">
						Attachment :
						<a :href="'/public/enclosure/'+item.attachment" target="_blank">
							<img src="../../assets/img/icon_0.png">
							File
							<i class="el-icon-download download"></i>
						</a>
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				mediaUrl: this.Common.mediaUrl,
				articleId: this.$route.query.id,
				emaiList: [],
			};
		},
		created: function() {
			this.getData();
		},
		computed: {

		},
		methods: {
			//获取数据
			getData() {
				this.$api
					.post('api/Email/getEmailsByArticle', {
						article_id: this.articleId
					})
					.then(res => {
						if (res.code == 0) {
							this.emaiList = res.data.emails;
						} else {
							this.$message.error(res.msg);
						}
					})
					.catch(err => {
						this.$message.error(err);
					});
			},

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

		}
	};
</script>


<style scoped>
	.em_list {
		margin: 10px;
	}

	.em_list>div {
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		padding: 20px;
		margin: 0 0 25px 0;
		position: relative;
	}

	.em_list>div .mesEmail {
		position: absolute;
		top: 10px;
		right: 20px;
	}

	.em_list>div .mesEmail>span {
		color: #aaa;
		margin: 0 5px 0 20px;
	}

	.em_list>div .em_file {
		border-top: 1px solid #ddd;
		margin: 20px 0 0 0;
		padding: 15px 0 0 0;
	}

	.em_list>div .em_file a {
		color: #333;
		font-weight: bold;
	}

	.em_list>div .em_file img {
		margin: 0 10px 0 15px;
		vertical-align: bottom;
	}

	.em_list>div .em_file i {
		margin: 0 0 0 5px;
		color: #006699;
		font-weight: bold;
	}
</style>
