<template>
    <article class="article-detail">
		<header v-if="!isAboutRoute" class="header">
			<div class="relative">
				<t-button
					class="back"
					theme="default"
					variant="text"
					content="返回"
					@click="router.back()"
				>
					<template #icon>
						<icon class="icon" name="ARROW_1_W" />
					</template>
				</t-button>
				<div class="title">
					<h4
						v-if="article"
						class="value selectable clip-text"
						v-text="article.title"
					></h4>
				</div>
				<t-button
					class="comment"
					theme="default"
					variant="text"
					content="评论"
				>
					<template #icon>
						<icon class="icon" name="MESSAGE" />
					</template>
				</t-button>
			</div>
		</header>
        <component :is="template" :article="article" />
    </article>
</template>

<script lang="ts" setup>
import { ArticleAPI, ArticleView, Icon } from "timi-web";
import ArticleAbout from "@/components/article/template/ArticleAbout.vue";
import ArticleMusic from "@/components/article/template/ArticleMusic.vue";
import ArticlePublic from "@/components/article/template/ArticlePublic.vue";
import ArticleSoftware from "@/components/article/template/ArticleSoftware.vue";
import { type Component } from "vue";

const route = useRoute();
const router = useRouter();

const article = ref<ArticleView<any>>();
const template = ref<Component | null>(null);
const templates: Record<string, Component> = {
	ABOUT: ArticleAbout,
	MUSIC: ArticleMusic,
	PUBLIC: ArticlePublic,
	SOFTWARE: ArticleSoftware
};
const isAboutRoute = computed(() => route.name === "About");

watch(article, () => {
	if (article.value) {
		const key = isAboutRoute.value ? "ABOUT" : article.value.type;
		template.value = markRaw(templates[key]);
	}
});

onMounted(async () => {
	const id = isAboutRoute.value ? 1 : route.params.id as any as number;
	article.value = await ArticleAPI.view(id);
});
</script>

<style lang="less" scoped>
.article-detail {

	.header {
		top: 49px;
		z-index: 3;
		position: sticky;
		background: rgba(255, 255, 255, .8);
		border-bottom: 1px solid var(--td-component-border);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);

		.relative {
			position: relative;

			.icon {
				margin-right: 2px;
			}

			.back {
				padding: 0 9px;
			}

			.title {
				top: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
				position: absolute;
				text-align: center;
				line-height: 2rem;

				.value {
					margin: 0 auto;
					display: block;
					max-width: calc(100% - 120px - 10px);
				}
			}

			.comment {
				top: 0;
				right: 0;
				height: 100%;
				padding: 0 9px;
				position: absolute;
				line-height: 2rem;
			}
		}
	}
}
</style>
