<template>
	<div id="container">
		<div class="header my-animation-slide-top">
			<!-- 背景图片 -->
			<el-image
				class="my-el-image poem-image"
				style="position: absolute"
				v-once
				:src="require('@/assets/images/LearningDocument.jpg')"
				fit="cover"
			>
				<div slot="error" class="image-slot"></div>
			</el-image>

			<div class="title">
				<span class="fs-26 p-tb-15 fw-800">{{ articleDetail.title }}</span>
				<div class="ai-center flex">
					<span
						class="Article-tag tag-item ai-center flex"
						@click="clickTagOrClassification('2', articleDetail.classification)"
					>
						<svg
							class="icon"
							aria-hidden="true"
							style="width: 18px; height: 18px; margin-right: 3px"
						>
							<use xlink:href="#icon-biaoqian"></use></svg
						>{{ articleDetail.classification }}</span
					>
					<span class="tag-item ai-center flex">
						<svg
							class="icon"
							aria-hidden="true"
							style="width: 18px; height: 18px; margin-right: 3px"
						>
							<use xlink:href="#icon-naozhong"></use></svg
						>发表于{{ articleDetail.publishDate }}
					</span>
					<span class="tag-item ai-center flex">
						<svg
							class="icon"
							aria-hidden="true"
							style="width: 20px; height: 20px; margin-right: 3px"
						>
							<use xlink:href="#icon-xingyue"></use>
						</svg>
						更新{{ articleDetail.updateDate }}
					</span>
					<span class="tag-item ai-center flex">
						<svg
							class="icon"
							aria-hidden="true"
							style="width: 20px; height: 20px; margin-right: 3px"
						>
							<use xlink:href="#icon-huanjiaowenzhang"></use></svg
						>阅读量：{{ articleDetail.readingQuantity }}
					</span>
				</div>
			</div>
		</div>

		<iframe
			v-if="articleDetail.iframeUrl"
			:src="articleDetail.iframeUrl"
			width="100%"
			:height="height"
		></iframe>
		<component v-else :is="CurrentComponent.component"></component>
	</div>
</template>

<script>
export default {
	data() {
		return {
			htmlSrc: "",
			CurrentComponent: {
				name: "",
				component: null,
			},
			// 文章列表
			articleList: this.$store.getters.articleList,
			// 当前文章详情
			articleDetail: null,
			height: document.documentElement.clientHeight - 300 - 5 + "px;",
		};
	},

	watch: {
		$route: {
			handler: function (route) {
				let name = route.query && route.query.name;
				let id = route.query && route.query.id;
				console.log("name,id", name, id);
				if (name) {
					this.CurrentComponent = {
						name: name,
						component(resolve) {
							require(["./" + name + "/index.vue"], resolve);
						},
					};
				}
				console.log("this.articleList", this.articleList);
				for (const i in this.articleList) {
					this.articleList[i].categoryList.map((category) => {
						if (category.list) {
							category.list.map((article) => {
								if (article.id == id) {
									this.articleDetail = i;
								}
							});
						}
					});
				}
			},
			immediate: true,
		},
	},
	mounted() {
		const that = this;
		window.onresize = function temp() {
			that.height = document.documentElement.clientHeight - 300 - 5 + "px;";
		};
	},
	methods: {
		// 头部 标签 点击 跳转更多
		clickTagOrClassification(typeId, detailsName) {
			this.$router.push({
				path: `/CaseCenter/index`,
				query: { typeId, detailsName },
			});
		},
	},
};
</script>

<style lang="scss" scoped>
#container {
	height: 100%;
	width: 100%;

	.header {
		height: 300px;
		width: 100%;
		font-family: "楷体";
		color: #fff;

		.my-el-image {
			width: 100%;
			height: 100%;
		}

		.title {
			display: flex;
			justify-content: center;
			position: relative;
			height: calc(100%);
			flex-direction: column;
			align-items: center;
			// animation: zoomIn 0.8s ease-in-out;
			padding: 0 50px;

			.tag-item {
				background: #ffffff61;
				padding: 5px 10px;
				border-radius: 5px;
				margin-right: 20px;
			}

			.title-name {
				padding-top: 55px;
			}
		}

		.content {
			padding: 30px 0;
			font-size: 22px;
		}
	}
}
</style>