<template>
  <div class="col-md-12 col-sm-9 content" style="margin-top: 20px;">
    <div class="news-title">{{ newsInfo.title }}</div>
    <div class="news-time">{{ newsInfo.createDate }}</div>
    <div class="content-news" v-html="toHtml(newsInfo.content)"></div>
    <div class="content-news" v-html="toHtml(newsInfo.content1)"></div>
    <div class="content-news" v-html="toHtml(newsInfo.content2)"></div>
    <div class="content-news" v-html="toHtml(newsInfo.content3)"></div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      newsId: ''
    }
  },
  computed: {
    ...mapGetters([
      'newsInfo'
    ])
  },
  created() {
    this.newsId = this.$route.params.id
    // console.log(this.newsId, '文章ID')
    this.getNewsDetail(this.newsId)
  },

  mounted() {

  },

  methods: {
    ...mapActions({
      getNewsDetail: 'news/getNewsInfo'
    }),

    toHtml(content) {
      if (!content) return ''
      return content.replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&amp;/g, "&")
        .replace(/&quot;/g, '"')
        .replace(/&apos;/g, "'");
    }
  }
}
</script>


<style scoped>
  .news-title {
    font-size: 3.2rem;
    text-align: center;
    margin-bottom: 20px;
  }

  .news-time {
    text-align: center;
    margin-bottom: 10px;
  }

  /* .content-news p img {
    width: auto;
    height: auto;
  } */
</style>

