<script lang="ts" setup>
import {computed, onMounted, onUnmounted, ref} from "vue";

const currentPost = ref<IPost | null>(null)

const onOpenPost = (e: IPost) => {
  currentPost.value = e;
}

const onClosePost = () => {
  currentPost.value = null
}

const thumbUrl = computed(() => {
  if (currentPost.value && currentPost.value.fields.thumb.value) {
    return currentPost.value.fields.thumb.value
  }
  return getAssetURL(`${Math.floor(Math.random() * (7 - 1 + 1)) + 1}.jpg`)
})

onMounted(() => {
  emitter.on('openPost', onOpenPost)
})

onUnmounted(() => {
  emitter.off('openPost', onOpenPost)
})
</script>

<template>
  <div v-if="currentPost" class="fixed top-0 right-0 bottom-0 left-0 z-20 bg-black bg-opacity-60">
    <div class="container mx-auto my-10 max-h-full overflow-hidden overscroll-y-contain rounded-3xl bg-white">
      <!-- 标题栏 -->
      <div class="relative w-full border-b-2 border-b-gray-200">
        <!-- 文章头图 -->
        <div class="min-h-52">
          <img :src="thumbUrl" alt="" class="max-h-64 w-full object-cover object-center"/>
        </div>
        <!-- 预览标题 -->
        <div
            class="absolute top-0 right-0 left-0 h-12 truncate bg-black bg-opacity-60 pr-16 pl-8 text-white backdrop-blur-3xl py-1.5">
          <span :title="currentPost.title" class="text-3xl font-bold">
            文章预览 /
          </span>
        </div>
        <!-- 关闭按钮 -->
        <div
            class="absolute top-0 right-2 flex h-9 w-9 cursor-pointer items-center justify-center rounded-full text-white transition-all my-1.5 hover:bg-gray-200 hover:text-black"
            @click="onClosePost"
        >
          <font-awesome-icon :icon="['fas', 'xmark']" class="p-2"/>
        </div>
      </div>
      <!-- 正文 -->
      <div class="container overflow-y-auto p-8 h-[60vh] preview" v-html="currentPost.digest"></div>
    </div>
  </div>
</template>

<style lang="scss">
.preview {
  h1 {
    @apply mb-2 border-l-8 border-l-blue-400 text-3xl font-bold;
  }

  h2 {
    @apply mb-2 border-l-4 border-l-blue-400 text-2xl font-bold;
  }

  h3 {
    @apply mb-2 border-l-2 border-l-blue-400 text-xl font-bold;
  }

  h4 {
    @apply text-lg font-bold;
  }

  h5 {
    @apply text-sm font-bold;
  }

  ul {
    @apply line-clamp-1;
  }
}
</style>