<template>
  <div v-bind="$attrs" v-on="$listeners" class="article-detail">
    <!-- <app-frame v-bind="$attrs" v-on="$listeners" class="article-detail"> -->
    <!-- <template #article> -->
    <div class="article-back" @click="$emit('back')">
      <div class="el-icon-arrow-left"></div>
      <div class="text">返回</div>
    </div>
    <div class="article-time">{{ formatDate(data.start_time) }}</div>
    <h1 class="article-title">{{ data.title }}</h1>
    <div class="article-content" v-html="data.content"></div>
    <ArticleRecommend />
    <!-- </template> -->
    <!-- </app-frame> -->
  </div>
</template>
<script>
import AppFrame from '@/components/AppFrame'
import ArticleRecommend from '@/components/ArticleRecommend'
export default {
  components: { AppFrame, ArticleRecommend },
  data() {
    return {
      data: {}
    }
  },
  async fetch() {
    this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => {
      return res.data
    })
    this.$emit('loaded', this.data)
  },
  methods: {
    formatDate(value) {
      const date = new Date(value * 1000)
      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    }
  }
}
</script>

<style lang="scss">
.is-pc {
  .article-detail {
    width: 1200px;
    margin: 30px auto;
  }
  .article-back {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #999;
    cursor: pointer;
  }
  .article-time {
    font-size: 16px;
    line-height: 100%;
    margin: 35px 0 16px;
    color: #999999;
  }
  .article-title {
    font-size: 32px;
    font-weight: bold;
    color: #141414;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 10px;
  }
  .article-content {
    padding-top: 25px;
    font-size: 14px;
    line-height: 28px;
    color: #333;
  }
}
.is-h5 {
  .article-back {
    display: flex;
    align-items: center;
    font-size: 0.1rem;
    cursor: pointer;
  }
  .article-time {
    margin-top: 0.15rem;
    font-size: 0.1rem;
    color: #9b9b9b;
  }
  .article-title {
    margin: 0.1rem 0;
    padding: 0 0 0.1rem;
    font-size: 0.14rem;
    font-weight: 700;
    color: #333;
    border-bottom: 1px solid #e6e6e6;
  }
  .article-content {
    font-size: 0.12rem;
    line-height: 0.24rem;
  }
}
</style>
