<template>
  <div class="ace-file-uploader-sfc" v-loading="loading">
    <DownloadOrPreviewRecords ref="DownloadOrPreviewRecords" :fileId="recordFileId" :type="recordType" />

    <ace-iframe-view ref="preview" :isFullScreen="true" :src="previewUrl"></ace-iframe-view>

    <Uploader
      ref="uploader"
      :size="size"
      :configuration-key="configurationKey"
      :form-id="formId"
      :allow-upload="allowFileUpload"
      :allow-download="allowFileDownload"
      :allow-delete="allowDelete"
      :max-secret-level="maxSecretLevel"
      :default-secret-level="defaultSecretLevel"
      :appName="appName"
      @fileAdded="fileAdded"
      @fileDeleting="fileDeleting"
      @fileDeleteError="fileDeleteError"
      @fileDeleted="fileDeleted"
      @spaceAllocating="spaceAllocating"
      @spaceAllocated="spaceAllocated"
      @spaceAllocateError="spaceAllocateError"
      @uploadProgress="uploadProgress"
      @uploadComplete="uploadComplete"
      @uploadSuccess="uploadSuccess"
      @uploadError="uploadError"
      @uploadFinished="uploadFinished"
      @initError="initError"
      @initSuccess="initSuccess"
      @error="error"
    >
    </Uploader>

    <div class="custom-upload-box" ref="uploadBox">
      <template v-if="fileList.length > 0">
        <draggable
          v-model="fileList"
          dragClass="dragClass"
          itemKey="sortIndex"
          handle=".handle"
          ghostClass="ghostClass"
          chosenClass="chosenClass"
          forceFallback="true"
          animation="500"
          @start="onDraggableStart"
          @end="onDraggableEnd"
        >
          <transition-group class="file-group-box">
            <div class="custom-upload__file" v-for="file in fileList" :key="file.id" @click="downloadFile(file)" :style="fileItemStyle">
              <!--  -->
              <div class="file-info-box">
                <el-popover popper-class="ace-file-uploader-sfc__file-info__popper" class="file-info__popper-content" placement="bottom-start" trigger="hover" :open-delay="500">
                  <!-- :popper-options="{ offset: [10, 20] }" -->

                  <div style="font-size: 12px" class="text-container">
                    <p>
                      文件名称：<span>{{ file.fileName }}</span>
                    </p>
                    <p>
                      文件大小：<span>{{ file.fileSize }}B</span>
                    </p>
                    <p v-if="isEnableSecretLevel()">
                      文件密级：<span>{{ file.secretLevelText }}</span>
                    </p>
                    <p>
                      上传时间：<span>{{ file.uploadTime }}</span>
                    </p>
                    <p>
                      上传人员：<span>{{ file.uploaderName }}</span>
                    </p>
                    <div style="margin-top: 8px">
                      <el-button size="mini" @click="viewDownloadRecord(file)">查看下载记录</el-button>
                      <el-button size="mini" @click="viewPreviewRecord(file)">查看预览记录</el-button>
                    </div>
                  </div>

                  <template slot="reference">
                    <div class="custom-upload__container">
                      <i :class="getIcon(file) + ' custom-upload__file-icon file-icon'"></i>
                      <i class="custom-upload__file-icon acefont ace-icon-tuozhuai handle-icon handle"></i>

                      <div class="custom-upload__file-content-box">
                        <div class="file-name">
                          {{ file.fileName }}
                        </div>

                        <div class="file-info">
                          <el-progress v-if="file.status === 'uploadProgress'" :percentage="file.percentage" style="width: 150px; font-size: 12px"></el-progress>
                          <el-link v-if="showPreview(file)" icon="el-icon-view" @click.stop style="margin-right: 12px" @click="previewFile(file)"> 预览 </el-link>
                          <el-link v-if="allowFileDelete && file.needReview !== 2" @click.stop style="margin-right: 12px" icon="el-icon-delete" @click="deleteFile(file)"> 删除 </el-link>

                          <span class="file-detail-info-box" v-if="!file.status || (file.status !== 'uploadProgress' && file.status !== 'fileDeleting')" @click.stop>{{ file.fileSizeText }} </span>

                          <span class="file-detail-info-box" v-if="(!file.status || (file.status !== 'uploadProgress' && file.status !== 'fileDeleting')) && isEnableSecretLevel()">{{
                            file.secretLevelText
                          }}</span>

                          <span class="file-detail-info-box" v-if="file.uploaderName"
                            >由<span class="uploader-name">{{ file.uploaderName }}</span
                            >上传</span
                          >
                          <span class="file-status" @click.stop :title="file.msg">{{ getStatusText(file) }}</span>
                        </div>
                      </div>
                    </div>
                  </template>
                </el-popover>
              </div>
              <!-- <div class="custom-upload__file-action-bar">
                <div class="file-preview-btn custom-upload__file-action-btn" @click.stop v-if="showPreview(file)" @click="previewFile(file)" :style="previewBtnStyle">预览</div>
                <div class="file-delete-btn custom-upload__file-action-btn" @click.stop v-if="allowFileDelete && file.needReview !== 2" @click="deleteFile(file)">删除</div>
            </div> -->
            </div>
          </transition-group>
        </draggable>
      </template>
    </div>
  </div>
</template>

<script>
import Uploader from "./Uploader";
import DownloadOrPreviewRecords from "./DownloadOrPreviewRecords.vue";
import draggable from "vuedraggable";

const previewFileTypes = ["pdf", "doc", "docx", "txt", "xlsx", "xls", "ppt", "pptx", "jpg", "jpeg", "wps", "png", "et", "dps"];
export default {
  name: "AceFileUploader",
  components: {
    Uploader,
    DownloadOrPreviewRecords,
    draggable,
  },
  props: {
    colNum: {
      type: Number,
    },
    appName: {
      type: String,
      default: "",
    },
    defaultSecretLevel: {
      type: Number,
      default: function () {
        return 0;
      },
    },
    configurationKey: {
      type: String,
      default: function () {
        return "";
      },
    },
    formId: {
      type: String,
      default: function () {
        return "";
      },
    },
    allowUpload: {
      type: Boolean,
      default: function () {
        return true;
      },
    },
    //允许文件预览
    allowPreview: {
      type: Boolean,
      default: function () {
        return true;
      },
    },
    allowDownload: {
      type: Boolean,
      default: function () {
        return true;
      },
    },
    allowDelete: {
      type: Boolean,
      default: function () {
        return true;
      },
    },
    maxSecretLevel: {
      type: Number,
      default: function () {
        return 1;
      },
    },
    refresh: {
      type: Function,
      default: function () {
        this.load();
      },
    },
    size: {
      type: String,
      default: "small",
    },
    maxPreviewSize: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      recordType: "DOWNLOAD",
      recordFileId: "",
      fileList: [],
      oldFileList: [],
      secretLevels: [],
      percentage11: 0,
      icons: {
        jpg: "ace-icon-file-image",
        bmp: "ace-icon-file-image",
        png: "ace-icon-file-image",
        gif: "ace-icon-file-image",
        jpe: "ace-icon-file-image",
        ico: "ace-icon-file-image",
        jpeg: "ace-icon-file-image",
        psd: "ace-icon-file-image",
        tif: "ace-icon-file-image",
        tiff: "ace-icon-file-image",
        dib: "ace-icon-file-image",
        art: "ace-icon-file-image",
        doc: "ace-icon-file-word",
        docx: "ace-icon-file-word",
        dot: "ace-icon-file-word",
        docm: "ace-icon-file-word",
        dotm: "ace-icon-file-word",
        pdf: "ace-icon-file-pdf",
        xla: "ace-icon-file-excel",
        xlam: "ace-icon-file-excel",
        xlc: "ace-icon-file-excel",
        xld: "ace-icon-file-excel",
        xlk: "ace-icon-file-excel",
        xll: "ace-icon-file-excel",
        xlm: "ace-icon-file-excel",
        xls: "ace-icon-file-excel",
        xlsb: "ace-icon-file-excel",
        xlsm: "ace-icon-file-excel",
        xlsx: "ace-icon-file-excel",
        xlt: "ace-icon-file-excel",
        xltm: "ace-icon-file-excel",
        xltx: "ace-icon-file-excel",
        xlw: "ace-icon-file-excel",
        pot: "ace-icon-file-ppt",
        potm: "ace-icon-file-ppt",
        potx: "ace-icon-file-ppt",
        ppa: "ace-icon-file-ppt",
        ppam: "ace-icon-file-ppt",
        pps: "ace-icon-file-ppt",
        ppsm: "ace-icon-file-ppt",
        ppsx: "ace-icon-file-ppt",
        ppt: "ace-icon-file-ppt",
        pptm: "ace-icon-file-ppt",
        pptx: "ace-icon-file-ppt",
        qt: "ace-icon-video",
        ts: "ace-icon-video",
        tts: "ace-icon-video",
        vbk: "ace-icon-video",
        wm: "ace-icon-video",
        wmv: "ace-icon-video",
        wmx: "ace-icon-video",
        wmp: "ace-icon-video",
        wvx: "ace-icon-video",
        "3g2": "ace-icon-video",
        "3gv": "ace-icon-video",
        "3gp": "ace-icon-video",
        "3gp2": "ace-icon-video",
        "3gpp": "ace-icon-video",
        asf: "ace-icon-video",
        asr: "ace-icon-video",
        asx: "ace-icon-video",
        avi: "ace-icon-video",
        div: "ace-icon-video",
        dv: "ace-icon-video",
        flv: "ace-icon-video",
        ivf: "ace-icon-video",
        lsf: "ace-icon-video",
        lsx: "ace-icon-video",
        m1v: "ace-icon-video",
        m2t: "ace-icon-video",
        m2ts: "ace-icon-video",
        m2v: "ace-icon-video",
        m4v: "ace-icon-video",
        mod: "ace-icon-video",
        mov: "ace-icon-video",
        movie: "ace-icon-video",
        mp2: "ace-icon-video",
        mp2v: "ace-icon-video",
        mp4: "ace-icon-video",
        mp4v: "ace-icon-video",
        mpa: "ace-icon-video",
        mpe: "ace-icon-video",
        mpeg: "ace-icon-video",
        mpg: "ace-icon-video",
        mpv2: "ace-icon-video",
        mqv: "ace-icon-video",
        mts: "ace-icon-video",
        nsc: "ace-icon-video",
        aa: "ace-icon-audio",
        aac: "ace-icon-audio",
        aax: "ace-icon-audio",
        ac3: "ace-icon-audio",
        adt: "ace-icon-audio",
        adts: "ace-icon-audio",
        aif: "ace-icon-audio",
        aifc: "ace-icon-audio",
        aiff: "ace-icon-audio",
        au: "ace-icon-audio",
        caf: "ace-icon-audio",
        cdda: "ace-icon-audio",
        gsm: "ace-icon-audio",
        m3u: "ace-icon-audio",
        m3u8: "ace-icon-audio",
        m4a: "ace-icon-audio",
        m4b: "ace-icon-audio",
        m4p: "ace-icon-audio",
        m4r: "ace-icon-audio",
        mid: "ace-icon-audio",
        midi: "ace-icon-audio",
        mp3: "ace-icon-audio",
        pls: "ace-icon-audio",
        ra: "ace-icon-audio",
        ram: "ace-icon-audio",
        rmi: "ace-icon-audio",
        rpm: "ace-icon-audio",
        sd2: "ace-icon-audio",
        smd: "ace-icon-audio",
        smx: "ace-icon-audio",
        smz: "ace-icon-audio",
        snd: "ace-icon-audio",
        wav: "ace-icon-audio",
        wave: "ace-icon-audio",
        wax: "ace-icon-audio",
        wma: "ace-icon-audio",
        tgz: "ace-icon-file-zip",
        z: "ace-icon-file-zip",
        zip: "ace-icon-file-zip",
        "7z": "ace-icon-file-zip",
        gz: "ace-icon-file-zip",
        rar: "ace-icon-file-zip",
        asm: "ace-icon-file-code-2",
        html: "ace-icon-file-code-2",
        htm: "ace-icon-file-code-2",
        xml: "ace-icon-file-code-2",
        java: "ace-icon-file-code-2",
        json: "ace-icon-file-code-2",
        c: "ace-icon-file-code-2",
        cpp: "ace-icon-file-code-2",
        h: "ace-icon-file-code-2",
        aspx: "ace-icon-file-code-2",
        jsp: "ace-icon-file-code-2",
        asmx: "ace-icon-file-code-2",
        ashx: "ace-icon-file-code-2",
        ascx: "ace-icon-file-code-2",
        cs: "ace-icon-file-code-2",
        js: "ace-icon-file-code-2",
        css: "ace-icon-file-code-2",
        csv: "ace-icon-file-text",
        ini: "ace-icon-file-text",
        txt: "ace-icon-file-text",
        text: "ace-icon-file-text",
        config: "ace-icon-file-text",
      },
      previewUrl: "",
      webUploader: null,
    };
  },

  methods: {
    /**
     * @start="onDraggableStart" @end="onDraggableEnd"
     */
    onDraggableStart() {
      this.oldFileList = this.fileList;
    },
    onDraggableEnd() {
      //如果文件列表为空则不需要重新排序
      if (this.fileList.length === 0) {
        return;
      }
      this.loading = true;

      this.$http({
        method: "post",
        url: this.$refs.uploader.adornUrl("fileInfo/updateSortIndex"),
        data: {
          configurationKey: this.configurationKey,
          formId: this.formId,
          appId: this.$refs.uploader.appName,
          sortItems: this.fileList.map((item, index) => ({
            id: item.yfId,
            // id: item.id,
            sortIndex: index + 1,
          })),
        },
      }).then(({ data }) => {
        if (data.code !== 40000) {
          //如果请求出错则回退至旧列表
          this.fileList = this.oldFileList;
          this.$message.error(data.msg);
        }
        this.loading = false;
      });
    },
    /**
     * 查看预览记录
     */
    viewPreviewRecord(file) {
      this.recordType = "PREVIEW";
      this.recordFileId = file.id;
      this.$nextTick(() => {
        this.$refs.DownloadOrPreviewRecords.init();
      });
      //   console.log("查看预览记录", file);
    },
    /**
     * 查看下载记录
     */
    viewDownloadRecord(file) {
      this.recordType = "DOWNLOAD";
      this.recordFileId = file.id;
      this.$nextTick(() => {
        this.$refs.DownloadOrPreviewRecords.init();
      });
    },
    //预览文件
    previewFile(file) {
      const previewUrl = file.getPreviewUrl();
      const pdfUrl = encodeURIComponent(previewUrl);
      let origin = this.$httpRequestUrl ? "http://" + this.$httpRequestUrl : window.location.origin;
      this.previewUrl = `${origin}/pages/pdf-view/index.html?pdfUrl=${pdfUrl}`;
      this.$refs.preview.show();
    },
    //是否显示预览
    showPreview(file) {
      let fileType = this.getFileType(file.fileName);
      //判断上传配置预览文件是否 webUploader.fileUploader.configuration.enablePreview 是否为0（关闭）
      if (this.allowUpload && !this.$refs.uploader.webUploader.fileUploader.configuration.enablePreview) {
        return false;
      }
      //判断文件类是否存在于预览文件类型列表里
      if (fileType) {
        let index = previewFileTypes.findIndex((item) => item === fileType);
        if (index === -1) {
          return false;
        }
      }

      let maxPreviewSize = this.maxPreviewSize ? this.maxPreviewSize : this.$refs.uploader.maxPreviewSize;
      //判断文件大小是否超过最大预览文件大小
      if (file.fileSize > maxPreviewSize) {
        return false;
      }

      //最后决定是否显示预览按钮的是前端props属性allowPreview
      return this.allowPreview;
    },

    isAllowUpload() {
      if (this.webUploader != null) {
        return this.webUploader.configuration.allowUpload && this.allowUpload;
      }
      return false;
    },
    isAllowDownload() {
      if (this.webUploader != null) {
        return this.webUploader.configuration.allowDownload && this.allowDownload;
      }
      return false;
    },
    isEnableSecretLevel() {
      if (this.webUploader != null) {
        return this.webUploader.configuration.enableSecretLevel;
      }
      return false;
    },
    downloadFile(row, event, column) {
      if (row.needReview == 0) {
        row.download();
      } else {
        this.$alert("此文件需要审查后才可下载。", "提示", {
          confirmButtonText: "确定",
        });
      }
    },
    deleteFile(row) {
      row.delete();
    },
    getIcon(file) {
      let ext = this.getFileType(file.fileName);
      if (ext && this.icons[ext]) {
        return "acefont " + this.icons[ext];
      }
      return "acefont ace-icon-file";
      // if (file.fileName !== undefined) {
      //     let index = file.fileName.lastIndexOf(".");
      //     if (index > -1) {
      //         let ext = file.fileName.substr(index + 1);

      //         if (this.icons[ext] !== undefined) {
      //             return "iconfont " + this.icons[ext];
      //         }
      //     }
      // }
      // return "iconfont icon-file-text-fill";
    },
    getFileType(fileName) {
      if (fileName) {
        let index = fileName.lastIndexOf(".");
        if (index > -1) {
          return fileName.substr(index + 1).toLowerCase();
        }
      }
      return null;
    },
    getStatusText(file) {
      //   console.log(file);
      if (file.status !== undefined) {
        switch (file.status) {
          case "fileAdded":
            return "已选择";
          case "fileDeleting":
            return "正在删除...";
          case "fileDeleteError":
            return "删除出错";
          case "fileDeleted":
            return "已删除";
          case "spaceAllocating":
            return "分配空间...";
          case "spaceAllocated":
            return "等待上传...";
          case "spaceAllocateError":
            return "分配空间出错";
          case "uploadSuccess":
            if (file.response !== undefined) {
              if (file.response.code !== 40000) {
                return "上传失败，请删除文件后重新上传。";
              }
            }
            return "上传成功";
        }
      }
      return "";
    },
    fileAdded(file) {
      console.log("添加文件", file);
      this.$set(file, "status", "fileAdded");
      this.$set(file, "percentage", 0);
      this.fileList.push(file);
      this.$emit("fileAdded", file);
    },
    fileDeleting(file) {
      //   console.log("删除文件中", file);
      this.$set(file, "status", "fileDeleting");
      this.$emit("fileDeleting", file);
    },
    fileDeleteError(file, code, msg) {
      this.$set(file, "status", "fileDeleteError");
      this.$set(file, "msg", msg);
      this.$emit("fileDeleteError", file, code, msg);
    },
    fileDeleted(file) {
      //   console.log("删除完毕", file);
      this.$set(file, "status", "fileDeleted");
      const index = this.fileList.indexOf(file);
      if (index > -1) {
        this.fileList.splice(index, 1);
        //重新排序文件
        this.onDraggableEnd();
      }
      this.$emit("fileDeleted", file);
    },
    spaceAllocating(file) {
      this.$set(file, "status", "spaceAllocating");
      this.$emit("spaceAllocating", file);
    },
    spaceAllocated(file) {
      this.$set(file, "status", "spaceAllocated");
      this.$emit("spaceAllocated", file);
    },
    spaceAllocateError(file, code, msg) {
      this.$set(file, "status", "spaceAllocateError");
      this.$set(file, "msg", msg);
      this.$emit("spaceAllocateError", file, code, msg);
    },
    uploadProgress(file, percentage) {
      //   console.log("上传进度", file, percentage);
      this.$set(file, "status", "uploadProgress");
      for (let i = 0; i < this.fileList.length; i++) {
        let f = this.fileList[i];
        if (f.yfId == file.yfId) {
          this.$set(f, "percentage", Math.round(percentage * 100));
          break;
        }
      }
      this.$emit("uploadProgress", file, percentage);
    },
    uploadComplete(file) {
      console.log("上传完毕", file);
      this.$emit("uploadComplete", file);
    },
    uploadSuccess(file, response) {
      console.log("上传成功", file, response);
      this.$set(file, "status", "uploadSuccess");
      //   if (response.code !== 40000) {
      //     this.$set(file, "msg", response.msg);
      //     this.$alert(file.response.msg, "上传失败，请删除文件重新上传。", {
      //       confirmButtonText: "确定",
      //     });
      //   }
      this.$emit("uploadSuccess", file, response);
    },
    uploadError(file, reason) {
      //考虑到错误分两类
      //1.请求成功但服务端返回码非400000   reason返回值为对象  这个时候需要删除文件上传列表里的数据  根据返回的错误信息给用户展示
      //2.请求失败  reason返回值为字符串类型 这个时候也需要删除文件列表  直接告知用户  上传失败，请检查网络后重新尝试上传文件。
      const fileIndex = this.fileList.find((item) => item.yfId === file.yfId);
      this.fileList.splice(fileIndex, 1);
      this.$alert(reason.msg ? `文件“${file.fileName}”上传失败，${reason.msg}。` : `文件“${file.fileName}”上传失败，请检查网络后重新尝试上传文件。`, `上传错误提示`, {
        confirmButtonText: "确定",
      });
      //删除文件列表里对应的文件数据
      // this.$set(file, "status", "uploadError");
      // this.$set(file, "msg", reason);
      this.$emit("uploadError", file, reason);
    },
    uploadFinished() {
      this.$emit("uploadFinished");
    },
    initError(code, msg) {
      this.$emit("initError", code, msg);
    },
    initSuccess(webUploader, files, secretLevels, configuration) {
      this.webUploader = webUploader;
      this.fileList = files.concat();
      console.log("初始化成功，加载文件列表", this.fileList);
      //   this.$nextTick(() => {
      //     this.getUploadBoxWidth();
      //   });
      this.$emit("initSuccess", webUploader, files, secretLevels, configuration);
    },
    error(type, reason) {
      this.$alert(reason, "上传错误提示", {
        confirmButtonText: "确定",
      });
      this.$emit("error", type, reason);
    },
  },
  computed: {
    //文件项的样式
    fileItemStyle() {
      //根据 colNum 来判断文件项的宽度样式
      if (this.colNum > 4) {
        throw new Error("【ace-upload】，colNum 的值不能大于 4");
      }
      let style = { width: "100%" };
      switch (this.colNum) {
        case 2:
          style = { width: `calc((100% - 12px) / 2)` };
          break;
        case 3:
          style = { width: `calc((100% - 24px) / 3)` };
          break;
        case 4:
          style = { width: `calc((100% - 36px) / 4)` };
          break;
      }
      return style;
    },
    /**
     * 预览按钮样式
     */
    previewBtnStyle() {
      //判断是否允许删除
      if (this.allowDelete) {
        return {};
      } else {
        return {
          borderBottom: "none",
        };
      }
    },
    documentClientWidth: {
      get() {
        return this.$store.state.common.documentClientWidth;
      },
      set(val) {
        this.$store.commit("common/updateDocumentClientWidth", val);
      },
    },
    documentClientHeight: {
      get() {
        return this.$store.state.common.documentClientHeight;
      },
      set(val) {
        this.$store.commit("common/updateDocumentClientHeight", val);
      },
    },
    allowFileUpload() {
      return this.allowUpload;
    },
    allowFileDownload() {
      return this.allowDownload;
    },
    allowFileDelete() {
      if (this.webUploader != null) {
        return this.webUploader.configuration.allowDelete && this.allowDelete;
      }
      return false;
    },
  },
};
</script>

<style scoped lang="scss">
@import "../../../../theme-chalk/src/scss/mixi.scss";
//packages\theme-chalk\src\scss\mixi.scss
.ace-file-uploader-sfc {
  .file-group-box {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .custom-upload-box {
    margin-top: 8px;
    overflow: hidden;

    .file-detail-box {
      font-size: 12px;
      > p {
        font-size: 12px;
      }
    }
    .custom-upload__file:hover {
      background-color: $light--content-color;
      .file-icon {
        display: none !important;
      }
      .handle-icon {
        display: block !important;
      }
    }
    .file-info__popper-content {
      width: 100%;
    }

    .custom-upload__file {
      box-sizing: border-box;
      //   float: left;
      //   margin-bottom: 4px;
      cursor: pointer;
      width: 100%;
      overflow: hidden;
      border-radius: 4px;
      font-size: 14px;
      border: 1px solid $light--border-color-2;
      background-color: #fff;
      display: flex;

      .custom-upload__file-action-bar {
        width: 56px;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border-left: 1px solid $light--border-color-2;
        .file-preview-btn {
          border-bottom: 1px solid $light--border-color-2;
          color: $light--color--primary;
          &:hover {
            background-color: $light--color--primary;
            color: #fff;
          }
        }
        .file-delete-btn {
          color: $light--color--danger;
          &:hover {
            background-color: $light--color--danger;
            color: #fff;
          }
        }
        .custom-upload__file-action-btn {
          font-size: 12px;
          flex: 1;
          line-height: normal;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease; // &:hover {
          //   background-color: $light--content-color;
          // }
        }
      }
      .custom-upload__container {
        height: 100%;
        display: flex;
        align-items: center;
        padding: 4px;
        .custom-upload__file-icon {
          text-align: center;
          line-height: 48px;
          height: 48px;
          width: 48px;
          font-size: 24px;
          color: $light--color--primary;
        }
        .file-icon {
          display: block;
        }
        .handle-icon {
          display: none;
          color: #757575;
        }
        .custom-upload__file-content-box {
          display: flex;
          flex-direction: column;
          overflow: hidden;
          height: 100%;
          justify-content: center; //   width: calc(100% - 48px);
          flex: 1;
        }
      }

      .file-info-box {
        width: 100%;
        display: flex;
        overflow: hidden;
      }
      .file-detail-info-box {
        color: $light--color--text-5;
      }

      .file-name {
        width: 100%;
        font-size: 14px;
        line-height: 21px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        color: $light--color--text-2;
      }
      .file-info {
        margin-top: 4px;
        line-height: 21px;
        font-size: 14px;
        color: $light--color--text-3;
        .file-detail-info-box {
          margin-right: 12px;
          .uploader-name {
            color: $light--color--text-3;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.ace-file-uploader-sfc__file-info__popper {
  /* margin-top: 6px !important; */
  /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
  .text-container {
    > p {
      display: flex;
      margin-bottom: 4px;
      > span {
        display: block;
        max-width: 300px;
      }
    }
  }
}
</style>
