<template>
  <el-drawer
    v-model="drawerVisible"
    :destroy-on-close="true"
    :with-header="false"
    size="800"
    title="消息详情"
  >
    <div class="message-detail">
      <h3>{{ messageObj.title }}</h3>
      <p style="word-break: break-word;">{{ messageObj.content }}</p>
      <div class="img-container">
        <el-image
          v-for="(item, index) in messageObj.photoLists"
          :initial-index="index"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="messageObj.photoLists"
          :src="item"
          :zoom-rate="1.2"
          class="img-box"
          fit="cover"
        />
        <!--        <img-->
        <!--          v-for="(item, index) in messageObj.photoLists"-->
        <!--          :key="index"-->
        <!--          :src="getImgUrl(item)"-->
        <!--          class="img-box"-->
        <!--          object-fit="cover"-->
        <!--        />-->
      </div>
      <div
        v-if="messageObj?.fileLists?.length > 0"
        class="message-time download-btn"
        @click="downloadFile(messageObj.fileLists[0].path)"
      >
        相关附件下载
      </div>

      <div class="message-time">创建时间: {{ messageObj.created }}</div>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import {getMessageDetail} from "@/api/message";

const drawerVisible = ref(false);

const messageObj = ref<any>({});

const getImgUrl = (url: string) => {
  return `${import.meta.env.VITE_APP_UPLOAD_URL}${url}`;
};
//192.168.101.4:9000/jgfile/2024/10/30/5175213819500.jpg
const handleOpenDrawer = (id: string) => {
  drawerVisible.value = true;
  getMessageDetail(id).then((res) => {
    messageObj.value = res.data;
  });
};

const handleCloseDrawer = () => {
  drawerVisible.value = false;
};

const downloadFile = (url: string) => {
  // 根据链接获取后缀名
  const suffix = url.split(".").pop();

  const link = document.createElement("a"); // 创建一个链接元素
  // link.href = url;
  link.href = import.meta.env.VITE_APP_UPLOAD_URL + url;
  link.setAttribute("download", `${messageObj.value.title}.${suffix}`); // 可以设置你要下载的文件名和扩展名
  document.body.appendChild(link);
  link.click(); // 模拟点击下载
  link.remove(); // 下载后移除链接元素
};

defineExpose({handleOpenDrawer, handleCloseDrawer});
</script>

<style lang="scss" scoped>
.message-detail {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.img-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 20px;
  justify-content: start;
}

.img-box {
  width: 200px;
  height: 200px;
  display: block;
  margin-right: 10px;
  margin-top: 10px;
  border-radius: 4px;
}

.download-btn {
  cursor: pointer;
}

.message-time {
  font-size: 12px;
  color: #999;
  width: 100%;
  text-align: start;
  margin-top: 20px;
}
</style>
