<template>
  <div
    class="new-destail"
    v-loading="loading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <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>
    <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: "NewsTableDetails",
  props: {
    newId: {
      type: [Number, String]
    }
  },
  data() {
    return {
      info: {},
      loading: false
    };
  },
  created() {
    this.loading = true;
  },
  methods: {
    getNewsList(id) {
      getNotice(id)
        .then(response => {
          this.loading = false;
          this.info = response.data;
        })
        .catch(err => {
          this.loading = false;
          console.log(err);
        });
    },
    toTableClick() {
      this.$router.push({ path: "/" });
    }
  },
  watch: {
    newId: {
      handler() {
        this.loading = true;
        let noticeId = this.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;
  }
}
</style>
