<template>
  <div>
    <app-header effect="light"></app-header>
    <div class="layout-body">
      <div class="body-inner">
        <!-- 文章标题 -->
        <span class="article-title">{{ article.title }}</span>
        <!-- 其他信息 -->
        <div class="article-info">
          <span v-if="article.author">{{ article.author.realName }}</span>
          <span>{{ article.updateTime | dateFormat2 }}</span>
        </div>
        <!-- 分割线 -->
        <el-divider></el-divider>
        <!-- 文章内容 -->
        <div v-html="article.content" class="article-content ql-editor"></div>
        <!-- 文章附件 -->
        <div v-if="article.files && article.files.length" class="article-file">
          <div v-for="(item, index) in article.files" :key="index">
            <el-link icon="el-icon-download" @click="openNewTab(item.url)">
              附件{{ index + 1 }}：{{ item.name }}
            </el-link>
          </div>
        </div>
      </div>
    </div>
    <app-footer></app-footer>
  </div>
</template>

<script>
import loadConfig from '@/mixins/load-config'
import { AppHeader, AppFooter } from '@/layout/components'
import { openNewTab, dateFormat2 } from '@/utils/common'
import { queryById } from '@/api/article'

export default {
  name: 'AnArticle',
  props: {
    id: {
      type: String,
      default: '',
      description: '文章id'
    },
    uuid: {
      type: String,
      default: '',
      description: '文章uuid'
    }
  },
  mixins: [loadConfig],
  components: { AppHeader, AppFooter },
  filters: {
    dateFormat2
  },
  data() {
    return {
      article: {}
    }
  },
  methods: {
    openNewTab,
    getArticle() {
      queryById(this.id, this.uuid).then(res => {
        if (res.data) {
          this.article = res.data
        } else {
          this.$router.push('/error')
        }
      })
    }
  },
  computed: {
    path() {
      return this.$route.path
    }
  },
  watch: {
    path() {
      this.getArticle()
    }
  },
  created() {
    this.getArticle()
  }
}
</script>
