<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_time) }}</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 asyncData({ $axios, params, query }) {
    // 新闻详情
    const data = await $axios.$get(`/api/zws/v1/cms/news/${params.id}`).then(res => res)
    // 相关推荐
    const requestParams = { page: 1, per_page: 2, type: query.type || 74, project_id: 1013 }
    const list = await $axios.$get('/api/zws/v1/cms/news', { params: requestParams }).then(res => res)

    return { data, list }
  },
  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>
