<template>
  <main-layout>
    <i-breadcrumb
      style="text-align: left; padding-left: 20px; height: 40px; line-height: 40px;
                         background-color: #fafafa;"
    >
      当前所在位置：
      <BreadcrumbItem>{{ locationTitle }}</BreadcrumbItem>
    </i-breadcrumb>

    <div style="display: flex; flex-direction: row-reverse;">
      <div style=" margin-top: 20px; margin-right: 20px;">
        <i-button>
          <div class="back-block" @click="goBack">
            <img src="./svgs/back.svg" /> &nbsp;返回列表
          </div>
        </i-button>
      </div>
    </div>

    <div class="site-message-container">
      <h3
        style="font-size:24px;font-weight:500;color:rgba(34,34,34,1);line-height:33px;"
      >
        {{ message.title }}
      </h3>
      <h5
        style="font-size:13px;font-weight:400;color:rgba(153,153,153,1);line-height:18px;margin-top: 16px;margin-bottom: 40px;"
      >
        发布时间: {{ message.publishTime }}
      </h5>
      <div class="site-message-content" v-html="message.content"></div>
    </div>
  </main-layout>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "SiteMessageDetail",
  computed: {
    ...mapState(["user", "siteMessages", "siteMessagesTimeStamp", "menus"]),
    locationTitle() {
      return (
        this.menus.find(
          v =>
            v.link.toUpperCase() ===
            this.$route.path.match(/\/[^/]*/)[0].toUpperCase()
        ) || {}
      ).name;
    },
    message() {
      if (this.siteMessages) {
        return this.siteMessages.find(v => v.id === +this.$route.params.id);
      }
      return null;
    },
  },
  async mounted() {
    await this.getList();
    await this.prepareData();
  },
  async beforeUpdate() {
    await this.prepareData();
  },
  methods: {
    ...mapMutations(["updateSiteMessages", "updateSiteMessagesTimeStamp"]),
    async getList() {
      try {
        const noticeRes = (await this.$http.get(
          "/api/ecs_exam_work/notice/getUserNoticeList?" +
            this.user.id +
            this.siteMessagesTimeStamp
        )).data;
        this.updateSiteMessages(noticeRes);
      } catch (error) {
        console.log(error);
        this.$Message.error({
          content: "获取公告通知异常",
          duration: 15,
          closable: true,
        });
      }
    },
    async prepareData() {
      if (!this.message.hasRead) {
        await this.$http.post(
          "/api/ecs_exam_work/notice/updateNoticeReadStatus?noticeId=" +
            this.message.id
        );
        window._hmt.push(["_trackEvent", "站内消息详情页面", "发送已读成功"]);
        this.updateSiteMessagesTimeStamp(Date.now());
        await this.getList();
      }
    },
    goBack() {
      this.$router.push("/site-message" + location.search);
    },
  },
};
</script>

<style scoped>
.back-block {
  line-height: 16px;
  /* border-radius: 6px;
  border: 1px solid rgba(238, 238, 238, 1); */

  /* padding: 0 10px; */

  display: flex;
  align-items: center;
}

.site-message-container {
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 20px;
  border: 1px solid #eeeeee;
  border-radius: 6px;
}
</style>
