<template>
  <div>
    <tab-nav active="3"></tab-nav>
    <div class="main-content news-detail">
      <div class="back" @click="back">&lt;返回</div>
      <!-- <div class="date">{{ formatDate(data.created_at) }}</div> -->
      <div class="date">{{ data.created_at }}</div>
      <h1 class="title">{{ data.title }}</h1>
      <div v-html="data.content"></div>
    </div>
    <div class="related">
      <h2 class="title">相关推荐</h2>
      <news-item v-for="item in list" :item="item" :key="item.id"></news-item>
      <div class="more"><nuxt-link to="/about/news">查看更多</nuxt-link></div>
    </div>
  </div>
</template>

<script>
import TabNav from '@/components/about/TabNav'
import NewsItem from '@/components/about/NewsItem'
export default {
  components: { TabNav, NewsItem },
  data() {
    return {
      data: {},
      list: []
    }
  },
  computed: {
    pid() {
      return this.$route.params.id
    }
  },
  async fetch() {
    // 新闻详情
    this.data = await this.$axios.get(`/api/cms/api/v1/article/${this.$route.params.id}/detail`).then(res => res.data)
    // 相关推荐
    const params = { project_id: process.env.projectId, type_tag: 'article_news', page:1, limit: 3 }
    this.list = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
  },
  methods: {
    formatDate(value) {
      const date = new Date(value.replace(/\-/g, '/'))
      return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    },
    back() {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss">
.news-detail {
  padding: 0.2rem 0.15rem;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
  .back {
    font-size: 0.1rem;
    cursor: pointer;
  }
  .date {
    margin-top: 0.15rem;
    font-size: 0.1rem;
    color: #9b9b9b;
  }
  .title {
    margin: 0.1rem 0;
    padding: 0 0 0.1rem;
    border-bottom: 1px solid #e6e6e6;
  }
  img {
    display: block;
    max-width: 100%;
    height: auto !important;
    margin: 0 auto;
  }
}
.related {
  margin: 0 0.15rem;
  .title {
    padding: 0.2rem 0;
    font-size: 0.14rem;
    color: #333;
  }
  .more {
    margin: 0.1rem auto 0.2rem;
    width: 0.82rem;
    height: 0.2rem;
    font-size: 0.1rem;
    line-height: 0.2rem;
    text-align: center;
    border: 1px solid #d3d3d3;
    border-radius: 0.04rem;
  }
}
</style>
