<template>
  <div class="file-view">
    <div class="file-title">{{ title }}</div>
    <div class="file-list">
      <div
        v-for="(item, index) in fileList"
        :key="'file' + index"
        @click="uploadFile(item.url)"
      >
        <img :src="filerIcon(item.url)" alt="" />
        <div class="file-name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "文件列表",
    },
    fileList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    /**
     *     文件下载或者预览
     */
    uploadFile(url) {
      let baseUrl = process.env.VUE_APP_BASE_API + url;
      const link = document.createElement("a");
      link.href = baseUrl;
      link.style.display = "none";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    /**
     * 图标过滤
     */
    filerIcon(url) {
      let typeName = url.substr(url.lastIndexOf("."));
      let icon = "";
      if (typeName == ".pdf") {
        icon = require("@/assets/images/pdf@2x.png");
      }
      if (typeName == ".ppt" || typeName == ".pptx") {
        icon = require("@/assets/images/ppt@2x.png");
      }
      if (typeName == ".docx" || typeName == ".doc") {
        icon = require("@/assets/images/doc@2x.png");
      }
      if (typeName == ".xlsx" || typeName == ".xls") {
        icon = require("@/assets/images/excel@2x.png");
      }
      if (typeName == ".txt") {
        icon = require("@/assets/images/text@2x.png");
      }
      return icon;
    },
  },
};
</script>

<style lang="scss" scoped>
.file-view {
  .file-title {
    color: #303133;
    font-weight: bold;
    font-size: 13px;
    margin: 10px;
  }
  .file-list {
    display: flex;
    align-items: center;
    border: 1px solid #e6ebf5;
    padding: 10px;
    & > div {
      margin-right: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      img {
        height: 40px;
        width: 32px;
      }
      .file-name {
        font-size: 12px;
        text-align: center;
        width: 100px;
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 文本超出容器宽度时显示省略号 */
        white-space: nowrap; /* 文本强制不换行，显示为单行 */
        margin-top: 3px;
      }
    }
  }
}
</style>
