<template>
	<div v-if="article" class="article-public">
		<div class="time" v-text="articleTime" @click="isCreatedAt = !isCreatedAt"></div>
		<markdown-view class="content" :content="article.data" />
		<comment
			v-if="SettingMapper.is(SettingKey.ENABLE_COMMENT) && article.showComment"
			:bizType="CommentBizType.ARTICLE"
			:bizId="article.id!"
			:titleStickyOffset="80"
			:canComment="article.canComment"
		/>
	</div>
</template>

<script lang="ts" setup>
import { ArticleView, CommentBizType, MarkdownView, SettingKey, SettingMapper, Time } from "timi-web";
import { Comment } from "timi-tdesign-pc";

const props = defineProps<{
	article?: ArticleView<any>,
}>();
const { article } = toRefs(props);

const isCreatedAt = ref<boolean>(false);

const articleTime = computed(() => {
	if (article.value) {
		if (isCreatedAt.value || !article.value.updatedAt) {
			return "发布于 " + Time.toPassedDateTime(article.value.createdAt);
		} else {
			return "编辑于 " + Time.toPassedDateTime(article.value.updatedAt);
		}
	}
	return "";
});

</script>

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

	.time {
		text-align: center;
		margin: 1rem 0 2rem 0;
	}

	.content {
		width: calc(100% - 2rem);
		padding: .5rem 1rem;
	}
}
</style>
