<template>
  <div class="message-view">
    <span class="title">{{ viewObj.msgTitle }}</span>
    <span class="time">{{ viewObj.publishTime }}</span>
    <div class="content">
      <MegaEditor
        v-model="viewObj.msgContent"
        :container-id="`upgrade-intro6`"
        :height="500"
        :toolbar-config="{ toolbarKeys: [] }"
        :editor-config="{ readOnly: true, placeholder: '' }"
      />
    </div>
    <div class="footer">
      <ul>
        <li v-for="(item, index) in fileList" :key="index">
          <a-icon type="paper-clip" />
          <a :href="item.url" :download="item.name">{{ item.name }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { fetchFileUrlDownload } from "@/utils/file";
import { RichTextEditor as MegaEditor } from "@mega-design/ui-vue";
import ApiConstant from "@/api/ApiConstant";

export default {
  components: { MegaEditor },
  data() {
    return {
      viewObj: {
        msgTitle: "",
        publishTime: "",
        msgContent: "",
      },
      fileList: [],
    };
  },
  watch: {
    "$route.query": {
      handler({ id }) {
        this.getDetail(id);
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    getDetail(id) {
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/center/get-by-id/${id}`)
        .then((res) => {
          if (res.data?.data?.msgTitle) {
            this.viewObj = res.data.data;
            if (this.viewObj.isRead === "N") {
              this.$EventBus.$emit("isInit");
            }
            if (this.viewObj.attachment !== "0") {
              const arr = this.viewObj.attachment?.split(";");
              arr?.forEach((item) => {
                this.fileList.push({
                  name: item.split(",")[0],
                  url: fetchFileUrlDownload(item.split(",")[1], this),
                });
              });
            }
          }
        });
    },
  },
};
</script>
<style lang="less" scoped>
.message-view {
  padding: 30px;
  .title {
    display: block;
    text-align: center;
    font-size: 20px;
    color: #000;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .time {
    display: block;
    text-align: center;
    color: #ccc;
    margin-bottom: 10px;
  }
  .footer {
    border-top: 1px solid #ccc;
    margin-top: 30px;
    padding-top: 20px;
    ul li {
      line-height: 32px;
    }
  }
}
</style>
