<template>
  <div class="aqdt-show-container">
    <div class="aqdt-show-content">
      <div class="header-title">
        <div>{{ row.name }}</div>
        <el-divider></el-divider>
        <div class="tag-container">
          <div class="tag-item" :class="{ 'active': currTag == 1 }" @click="tagClick(1)">
            文档正文
          </div>
          <div class="tag-item" :class="{ 'active': currTag == 2 }" @click="tagClick(2)">
            文档附件({{ fileList.length || 0 }})
          </div>
          <div class="tag-item" :class="{ 'active': currTag == 3 }" @click="tagClick(3)">
            阅读状态 {{ readArr.length ? `(${readArr.length})` : '' }}
          </div>
        </div>
      </div>

      <!-- 正文内容  -->
      <div v-if="currTag == 1" class="content-container">
        <div class="top-content">
          <div>发布时间：{{ row.issuedTime }}</div>
        </div>
        <div class="title-text-container">
          <div class="title-text">{{ row.name }}</div>
        </div>
        <div class="creator">
          <span>撰稿人：{{ row.writer }}</span>
          <span style="display: inline-block;margin-left: 30px;">创建部门：{{ row.deptName }}</span>
        </div>
        <div class="content-text-container">
          <div class="content-text" v-html="row.content"></div>
        </div>
      </div>

      <!-- 附件内容  -->
      <div v-if="currTag == 2" class="file-container">
        <div class="file-item" v-for="(item, index) in fileList" :key="index" @click="downLoad(item)">
          <div class="file-name">{{ item.name }}</div>
        </div>
      </div>
      <div v-if="currTag == 3">
        <receive :receiveId="receiveId" />
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getApi } from '@/api/tobAcco_api.js';
import { getItem } from "@/utils/storage";
import receive from "./Components/receive.vue"

const receiveId = ref()
const route = useRoute();

const row = ref({});
const imgList = ref([]);
const currTag = ref(1);
/**文件列表 */
const fileList = ref([])
const readArr = ref([])
/** 是否是发布人员*/
const issuedUser = ref(false) // 520052010020152
receiveId.value = route.params?.id
const createAndClickLink = (downloadUrl, fileName) => {
  return new Promise((resolve, reject) => {
    const xhr = new window.XMLHttpRequest();
    xhr.open("GET", downloadUrl, true);
    xhr.responseType = "blob";
    xhr.onload = () => {
      const url = window.URL.createObjectURL(xhr.response);
      const a = document.createElement("a");
      a.href = url;
      a.download = fileName;
      // 使用 setTimeout 延迟点击操作
      setTimeout(() => {
        a.click();
        window.URL.revokeObjectURL(url); // 释放资源
        resolve(); // 解决 Promise
      }, 0);
    };
    xhr.onerror = () => {
      reject(new Error("文件下载失败"));
    };
    xhr.send();
  });
};
const getImg = (item) => {

  const ids = item.file ? item.file.split(',') : []

  fileList.value = [];
  ids.forEach((item) => {
    if (item == "" || item == null) return;
    getApi({}, `/mosty-base/minio/file/download/${item}`).then((res) => {
      fileList.value.push({
        name: res.originalName,
        id: res.id,
        url: res.url,
        suffix: res.suffix
      });
      //去重
      let map = new Map();
      for (let item of fileList.value) {
        map.set(item.id, item);
      }
      fileList.value = [...map.values()];
    });
  });
}
const downLoad = (item) => {
  handleDownload(item);
  // fileList.value.forEach((file) => {
  // });
}

const handleDownload = (file) => {
  if (file.response) {
    window.open(`/mosty-api/mosty-base/minio/image/download/${file.response.data}`, "_blank");
  } else {
    // window.open(file.url, "_blank");
    createAndClickLink(file.url, file.name);
  }
};
const tagClick = (tag) => {

  currTag.value = tag;
}
/** 设置已读状态 */
const setRead = ()=>{
  if(!route.params.id) return
  getApi({ id: route.params.id }, "/mosty-jcgl/noticeController/lookNoticeInfo")
}
onMounted(() => {
  const { params } = route;
  receiveId.value = params.id
  setRead()
  // let row = {};
  try {
    let currRow = JSON.parse(params.row);
    currRow = currRow || {};
    issuedUser.value = currRow.issuedUserId == getItem("USERID").toString();
    row.value = {
      name: currRow.name || currRow.title,
      // title: currRow.title,
      deptName: currRow.deptName,
      writer: currRow.writer,
      issuedTime: currRow.issuedTime,
      content: currRow.content,
      file: currRow.file,
      // otherFile
    }
    getImg(row.value);
  } catch (error) {
    //
  }
})
</script>

<style lang="scss" scoped>
.aqdt-show-container {
  background-color: #fff;
  color: #000;
  padding: 10px;

  .aqdt-show-content {
    height: calc(100vh - 155px);
    padding: 15px;
    // border: 1px solid #ebeef5;
    overflow-y: auto;

    .tag-container {
      display: flex;

      .tag-item {
        padding: 8px 15px;
        font-size: 16px;
        cursor: pointer;

        &.active {
          color: var(--el-color-primary);
          border-bottom: 2px solid var(--el-color-primary);
        }
      }

      .read-state {
        padding: 8px 15px;
        font-size: 16px;
        color: red;
      }

      .header-read {
        color: green;
      }
    }

    .content-container {
      margin-top: 30px;
      border: 1px solid #222;

      .top-content {
        padding: 10px;
      }

      .title-text-container {
        text-align: center;
        border-top: 1px solid #222;

        .title-text {
          padding: 10px;
          font-weight: bolder;
          font-size: 26px;
        }
      }


      .creator {
        padding: 4px;
        font-size: 14px;
        font-weight: bolder;
        text-align: center;
        color: #444;
        border-top: 1px solid #222;
      }

      .content-text-container {
        padding: 10px;
        border-top: 1px solid #222;
        // min-height: 500px;
        min-height: calc(100vh - 391px);
      }
    }

    .file-container {
      // border: 1px solid #222;
      color: #000;

      .file-item {
        font-size: 16px;
        padding: 10px;
        cursor: pointer;
        // color: rgb(0, 140, 255);
        border-bottom: 1px solid #faf9f9;

        &:hover {
          color: #008cff;
        }
      }
    }
  }
}
</style>
