<template>
  <div class="new-destail">
    <h3
      style="width: 100%;
		text-align: center;
		line-height: 1.5;
    font-size: 18px;
    font-weight: 600;
    margin: 15px 0;
		"
    >{{info.noticeTitle}}</h3>
    <span
      style="
		width: 100%;
    text-align: center;
    color: #808080;
    line-height: 1.5;
    font: 13px/1.6 Arial,sans-serif,Tahoma,Roboto,'Source Code Pro';
		"
    >发布时间：{{info.createTime}}</span>
    <span @click="toNowsTable(info.noticeId)" class="gd-news">更多新闻...</span>
    <el-divider></el-divider>
    <div v-html="info.noticeContent" style="padding: 20px;"></div>

    <div style="
      position: fixed;
      bottom: 10px;
      right: 10px;
        ">
      <!-- <el-tooltip class="item" effect="dark" content="前往首页" placement="top">
        <el-button
          type="primary"
          style="
          width: 50px;
          height: 50px;
          font-size: 25px;
          z-index: 100;
          "
          icon="el-icon-back"
          @click="toTableClick"
          circle
        ></el-button>
      </el-tooltip> -->
    </div>
  </div>
</template>
<script>
import { getNotice } from "@/api/system/notice";
export default {
  name: "NewDestail",
  data() {
    return {
      info: {}
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let noticeId = this.$router.currentRoute.query.newId;
      this.getNewsList(noticeId);
    },
    getNewsList(id) {
      getNotice(id)
        .then(response => {
          this.info = response.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    toNowsTable(id) {
      console.log(id);
      this.$router.push({ path: "/news", query: { newId: id } });
    },
    toTableClick() {
      this.$router.push({ path: "/" });
    }
  },
  watch: {
    $route: {
      handler() {
        let noticeId = this.$route.query.newId;
        if (noticeId || noticeId === 0) {
          this.getNewsList(noticeId);
        }
      },
      deep: true
    }
  }
};
</script>
<style lang="scss">
.new-destail {
  padding: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  height: auto;
  .el-divider--horizontal {
    margin: 15px 0;
  }
  .gd-news {
    margin-top: 5px;
  }
  .gd-news:hover {
    color: #1890ff;
    cursor: default;
  }
}
</style>
