<template>
  <div
    class="news-detail-page"
    style="margin-top:1.87733rem;">
    <Head/>
    <div class="main-padding">
      <div>
        <h1 class="news-detail-name">{{ detail.title }}</h1>
        <div class="news-detail-time flex-aic">
          <img
            src="https://mgmt.dfangche.com/xxfccn/image/1/article/1559698961339.jpeg"
            style="width: 17px;height: 17px;margin-right: 7px;">
          {{ detail.addTime.substring(0, 10) }}</div>
        <div
          class="content-detail"
          v-html="detail.text"/>
        <div class="more-news flex-aic-jcb">
          <div class="more-news-l">
            推荐咨讯
          </div>
          <router-link
            :to="{ path: 'news'}"
            class="more-news-r">更多</router-link>
        </div>
        <ul>
          <router-link
            v-for="item in hotList"
            :to="{ path: 'newsDetailHot', query:{id: item.id }}"
            :key="item.id"
            class="flex-jcb"
            style="margin-bottom: 20px;">
            <img
              :src="item.coverImage"
              class="news-img-list">
            <div class="news-list">
              <div class="ellipsis2 news-list-title">{{ item.title }}</div>
              <div class="epitome news-list-time flex-aic">
                <img
                  :src="item.coverImage"
                  style="width: 17px;height: 17px;margin-right: 7px;">
                {{ item.addTime.substring(0, 10) }}</div>
            </div>
          </router-link>
        </ul>
      </div>
    </div>
    <go-top/>
    <Footer/>
  </div>
</template>

<script>
  import axios from '../../plugins/axios'
  import Head from "~/components/head";
  import DetailBanner from '~/components/detailBanner'
  import GoTop from "~/components/goTop";
  import Footer from "~/components/footer";

  export default {
    components: {
      Head,
      DetailBanner,
      GoTop,
      Footer
    },
    data() {
      return {};
    },
    async asyncData({ route }) {
      const { data } = await axios.get('/api/uccn/article/app/unauth/one?id='+route.query.id+"&urlType=1");
      let detail = data.data;
      let tempBannerData = await axios.get('/api/uccn/article/app/unauth/three?type=1&number=3&id='+route.query.id);
      let hot = tempBannerData.data.data;
      return {detail: detail, hotList: hot}
    },
    created() {},
    methods: {},
  };

</script>

<style lang="scss">
  @import "../../assets/styles/mixin";

  .news-detail-page {
    font-size: px2rem(26px);
    .news-detail-name{
      font-size: 17px;
      font-weight: bold;
    }
    .news-detail-time{
      padding: 15px 0 20px 0;
      border-bottom: 1px solid #dfdfdf;
      color: #999;
      font-size: 13px;
    }
    .news-img-list{
      width: 92px;
      height: 75px;
      border-radius: 3px;
    }
    .news-list {
      border-bottom: 1px solid #dfdfdf;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 13px;
      padding-bottom: 13px;
    }
    .news-list-title{
      margin-bottom: 15px;
      font-size: 15px;
    }
    .news-list-time{
      font-size: 13px;
      color: #999;
    }
    .more-news{
      margin: 17px 0;
      .more-news-l{
        font-size: 17px;
        font-weight: bold;
      }
      .more-news-r{
        font-size: 14px;
        color: #999;
      }
    }
  }

</style>
