<template>
  <div id="newDetail">
     <!-- <img
      v-show="mobileCheck"
      :src="require('@/assets/mobile/nav.png')"
      class="nav_btn"
      alt=""
      srcset=""
      @click="showNav = true"
    />
    <MoblieNav v-show="showNav" :mobile-check="mobileCheck" /> -->
    <Nav
      v-show="!mobileCheck"
      :active-index="1"
      @toViewSwiper="toViewSwiper"
    ></Nav>
    <div class="news-container">
      <div class="nav">
        <div class="back" @click="goNews()">
          返回
        </div>
        <div class="new-time-container">
          <div class="new-time">
            {{ res.time ? res.time : "" }}
          </div>
        </div>
        <ul class="news-nav">
          <li>
            首页
          </li>
          <li class="next">
            新闻
          </li>
          <li class="next">{{ res.type_text }}</li>
        </ul>
      </div>
      <div class="news-detail-container">
        <div id="news-header" class="news-header">
          <div class="news-tab">{{ res.type_text }}</div>
          <div class="news-title">
            {{ res.title }}
          </div>
        </div>
        <img v-if="res.img" :src="res.img" alt="top" class="news-header-img" />
        <div
          ref="newsEditor"
          class="news-editor"
          v-html="res.description"
        ></div>
      </div>
      <ul class="news-flip">
        <li v-if="res.prev_id" class="news-prev" @click="goDetail(res.prev_id)">
          上一篇
        </li>
        <li v-if="res.next_id" class="news-next" @click="goDetail(res.next_id)">
          下一篇
        </li>
      </ul>
    </div>
    <img alt="top" class="news-toTop" @click="goTop()" />
  </div>
</template>

<script>
import { getNewsDetail } from "../api/data.js";

export default {
  components: {
    // MoblieNav: () => import("../components/m-nav.vue"),
    Nav: () => import("../components/nav.vue"),
  },
  async asyncData({ route }) {
    const data = await getNewsDetail({
      id: route.query.id,
    }).then();
    const res = data.data;
    return { res };
  },
  data() {
    return {
      mobileCheck: false,
    };
  },
  mounted() {
    if (
      navigator.userAgent.match(/Android/i) ||
      navigator.userAgent.match(/webOS/i) ||
      navigator.userAgent.match(/iPad/i) ||
      navigator.userAgent.match(/iPhone/i) ||
      navigator.userAgent.match(/iPod/i)
    ) {
      this.mobileCheck = true;
    }
  },
  methods: {
    goNews(type) {
      if (type) {
        this.$router.push({ name: "news", params: { type, mNav: true } });
      } else {
        this.$router.push({ name: "news", params: { mNav: true } });
      }
    },
    goHome() {
      this.$router.push({ name: "index", params: { id: 0 } });
    },
    goDetail(id) {
      window.location.href = window.location.href.split("?")[0] + "?id=" + id;
    },
    goTop() {
      document
        .getElementById("news-header")
        .scrollIntoView({ behavior: "smooth" });
    },
    toViewSwiper(index) {
      this.$router.push({ name: "index", params: { id: index } });
    },
  },
};
</script>

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