<template>
  <NuxtLayout name="default" :categories="categoryTree">
    <Head>
      <Title>{{ articleData.title }}</Title>
      <Meta name="keywords" :content="articleData.keywords" />
      <Meta name="description" :content="articleData.contentDigest" />
    </Head>
    <div class="content-wrap">
      <div class="content">
        <ArticlePreview :data="articleData"/>
        <!-- 附件 -->
        <div v-if="attachments.length > 0" class="attachment-wrap">
          <h4>本文附件</h4>
          <ul>
            <li v-for="attach of attachments" :key="attach.uid">
              <a :href="$getAttachURL(attach.fileKey, attach.name)" target="_blank">
                <el-icon><Document /></el-icon>
                <span>{{ attach.name }}</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </NuxtLayout>
</template>

<script>
import { definePageMeta } from '#imports'
import { useRoute } from 'vue-router'
import { Document } from '@element-plus/icons-vue'
import ArticlePreview from '@/components/cms/ArticlePreview'
import { fetchTemplateData } from '@/api/cms/template'
import { strictPackage } from '@/utils/util'

export default {
  components: { ArticlePreview, Document },
  async setup () {
    // 去掉默认布局
    definePageMeta({
      layout: false,
    })
    const route = useRoute()
    const data = strictPackage(await fetchTemplateData({
      path: '/article/[articleUid].vue',
      parameters: {
        articleUid: route.params.articleUid,
        mode: route.query.mode
      }
    }))
    return {
      // 栏目树
      categoryTree: data.CATEGORIES_TREE,
      // 文章数据
      articleData: data.ARTICLE_DETAIL,
      // 附件列表
      attachments: data.ARTICLE_DETAIL.attachments == null ?
        [] : JSON.parse(data.ARTICLE_DETAIL.attachments)
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/style/variables";

.content-wrap {
  background: var(--color-white);
  padding: var(--gap-midele);
  .content {
    border: 1px solid var(--border-color);
    // 附件
    .attachment-wrap {
      border-top: 1px solid var(--border-color);
      border-radius: 10px;
      h4 {
        color: var(--primary-color-dark);
        margin: 0;
      }
      ul {
        margin-top: 10px;
        li {
          padding: 3px 0;
          a {
            display: flex;
            align-items: center;
            color: var(--primary-color);
            &:hover {
              color: var(--primary-color-light);
            }
            .el-icon {
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
}

@media (max-width: $--mobile-max-width) {
  .content-wrap {
    padding: 10px;
    .content {
      .attachment-wrap {
        padding: 10px 20px;
        ul {
          margin-top: 8px;
          li {
            padding: 2px 0;
            a {
              .el-icon {
                margin-right: 3px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
