<template>
  <el-dialog
    center
    :title="$t('ftlOne.message.dialog.title')"
    :visible.sync="visible"
    append-to-body
    :model="false"
    @closed="
      () => {
        $emit('preventHiddenDropdown');
      }
    "
  >
    <header class="dialog__title">{{ messageDetail.title }}</header>
    <ElDivider></ElDivider>
    <div v-html="messageDetail.content" v-loading="loading"></div>
    <footer class="mt15" :class="[hasAttachments ? 'f-s-c' : 'f-c-e']">
      <el-dropdown v-if="hasAttachments">
        <el-button>{{ $t("ftlOne.message.button.download") }}</el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="item in messageDetail.immAttachments"
              :key="item.fileDownloadUrl"
              @click="() => downloadFile(item.fileDownloadUrl)"
            >
              {{ item.fileName }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-button @click="visible = false">{{
        $t("ftlOne.massage.button.cancel")
      }}</el-button>
    </footer>
  </el-dialog>
</template>

<script>
import axios from "axios";

const token = localStorage.getItem("token") || "";
const requestHeader = {
  Authorization: `Bearer ${token}`,
}; // 请求头

export default {
  props: {
    authBaseUrl: {
      type: String,
      default: "https://gateway-staging.ftlapp.io",
    },
  },
  emits: ["preventHiddenDropdown"],
  data() {
    return {
      visible: false,
      messageDetail: {},
      loading: false,
    };
  },
  computed: {
    apiBaseUrl() {
      return `${this.authBaseUrl}/api/xpush/imm/userMessage/getUserMsgInfo`;
    },
    hasAttachments() {
      return (
        this.messageDetail.immAttachments &&
        this.messageDetail.immAttachments.length !== 0
      );
    },
  },
  methods: {
    downloadFile(url) {
      url && window.open(url, "_blank");
    },
    open(msgId){
      this.getMessageDetail(msgId);
      this.visible = true;
    },
    async getMessageDetail(msgId) {
      try {
        this.loading = true;
        const res = await axios.get(this.apiBaseUrl, {
          headers: requestHeader,
          params: { msgId },
        });
        if (res && res.data) this.messageDetail = res.data;
      } catch (e) {
        console.log(e);
      } finally {
        this.loading = false;
      }
    }, // 获取消息详情
  },
};
</script>

<style scoped>
.dialog__title {
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  margin-bottom: 20px;
}
</style>
