<template>
  <div class="article">
    <h2>{{ props.article.title }}</h2>
    <slot />
    <div class="content" v-html="props.article.contentHtml"></div>
    <div class="fileDownload" v-if="fileList != ''">
      <p class="title">附件下载:</p>
      <div class="fileBox" :key="file.url" v-for="(file, index) in fileList">
        <span>{{ index + 1 }}.</span>
        <span class="fileName" @click="downloadRes(file.url, file.name)">
          {{ file.name }}</span
        >
      </div>
    </div>
    <slot name="share" />
  </div>
</template>
<script setup name="article">
import { ElMessage } from "element-plus";
import { ref, watch } from "vue";
const fileList = ref([]);
const props = defineProps({
  article: {
    type: Object,
    required: true,
  },
});

watch(
  () => props.article.attachments,
  (val) => {
    getFileList(val);
  }
);

// 获取附件
function getFileList(data) {
  if (data) {
    let fileUrlArr = data.split(",");
    fileUrlArr.map((item) => {
      let file = item.split("/");
      fileList.value.push({
        url: item,
        name: file[file.length - 1],
      });
    });
  }
}
// 下载文件
const downloadRes = async (url, name) => {
  let response = await fetch(url);
  let blob = await response.blob();
  let objectUrl = window.URL.createObjectURL(blob);
  let a = document.createElement("a");
  a.href = objectUrl;
  a.download = name;
  document.body.appendChild(a);
  a.click();
  setTimeout(function () {
    ElMessage.success("文件下载成功");
    document.body.removeChild(a);
  }, 1000);
};
</script>
<style scoped lang="less">
.article {
  h2 {
    font-size: 33px;
    color: #138ee7;
    font-weight: bold;
    text-align: center;
    margin: 35px 0 25px 0;
  }

  .content {
    max-height: 940px;
    margin: 40px auto;
    font-size: 16px;
    color: #333333;
    line-height: 36px;
    overflow: auto;
    padding: 0 5px;
  }

  .fileDownload {
    width: 985px;
    margin: 0 auto;
    font-size: 16px;

    p {
      font-size: 16px;
    }

    .title {
      color: #606266;
      margin-bottom: 5px;
    }

    .fileName {
      cursor: pointer;
      color: #409eff;
    }
  }
  .fileBox {
    margin: 8px 0 8px 24px;
  }
}

/* 滚动条轨道样式 */
::-webkit-scrollbar {
  width: 10px;
  margin-left: 20px;
  background-color: transparent;
  /* 设置滚动条宽度 */
}

:hover::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #2d66a5;
}

/* 滚动条轨道hover状态样式 */
::-webkit-scrollbar-track:hover {
  background-color: #f1f1f1;
  /* 设置轨道hover状态时的背景颜色 */
}

/* 滚动条滑块hover状态样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
  /* 设置滑块hover状态时的背景颜色 */
}
</style>
