<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-09-04 10:41:39
 * @LastEditors: 无尘
 * @LastEditTime: 2019-10-25 10:52:37
 -->
<template>
  <div class="notice-detail">
    <div class="common-body">
      <arrow-nav-bread :menu-data="menuData" />
      <div class="notice-detail-body">
        <h2>【{{ noticeData.groupName }}】{{ noticeData.title }}</h2>
        <div class="notice-detail-content">
          <div
            class="markdown-content"
            v-html="noticeData.htmlContent" />
        </div>
        <p class="notice-oprate font-14 color-0a1633">
          {{ noticeData.operatorName }}
        </p>
        <p class="notice-date font-14 color-0a1633">
          {{ noticeData.effectiveTime | timeStampToLineYmd }}
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import arrowNavBread from '@/components/nav/arrow-nav-bread.vue';
import { getNoticeDetail } from '@/api/notice';
import errMsg from '@/assets/js/error';
// import marked from 'marked';
/* import MarkdownIt from 'markdown-it';
let marked = new MarkdownIt(); */
export default {
  components: {
    arrowNavBread
  },
  data() {
    return {
      menuData: [
        {
          path: '/noticeList',
          name: '公告列表'
        },
        {
          path: '',
          name: '公告详情'
        }
      ],
      noticeData: {
        groupName: '',
        htmlContent: '',
        title: ''
      }
    };
  },
  mounted() {
    const that = this;
    that.getData();
  },
  methods: {
    getData() {
      const that = this;
      let para = {
        noticeId: that.$route.query.noticeId
      };
      getNoticeDetail(para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            // resData.result.content = marked.render(resData.result.content);
            that.noticeData = resData.result || {};
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
};
</script>
<style lang="less" scoped>
.notice-detail {
  margin: 126px 0 210px 0;
  .common-body {
    width: 1180px;
    margin: 0 auto;
    h2 {
      margin-top: 48px;
      height: 80px;
      line-height: 80px;
      font-size: 24px;
      color: #0a1633;
      border-bottom: 1px solid #c3cad9;
    }
    .markdown-content {
      padding-top: 16px;
      font-size: 14px;
      color: #0a1633;
      line-height: 24px;
      /deep/ .hljs-left {
        text-align: left;
      }
      /deep/ .hljs-center {
        text-align: center;
      }
      /deep/ .hljs-right {
        text-align: right;
      }
    }
    .notice-oprate {
      margin-top: 24px;
      text-align: right;
      line-height: 24px;
    }
    .notice-date {
      margin-top: 8px;
      text-align: right;
      line-height: 24px;
    }
  }
}
</style>
