<template>
  <div style="background-color: white">
    <Uploader
      ref="uploader"
      :size="size"
      :configuration-key="configurationKey"
      :form-id="formId"
      :allow-upload="allowUpload"
      :allow-download="allowDownload"
      :allow-delete="allowDelete"
      :max-secret-level="maxSecretLevel"
      :default-secret-level="defaultSecretLevel"
      @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="file" v-for="(file, index) in fileList" @click="downloadFile(file)" :key="index">
      <i :class="getIcon(file)" style="position: absolute; left: 0px; top: 1px; line-height: 40px; width: 40px; font-size: 30px"></i>
      <div class="file-name" :title="file.fileName">
        {{ file.fileName }}
      </div>
      <div class="btn-delete">
        <el-button type="text" @click.stop @click="deleteFile(file)" v-if="isAllowDelete()" style="padding-top: 0px; padding-bottom: 0px">删除 </el-button>
      </div>
      <div class="file-info">
        <el-progress v-if="file.status === 'uploadProgress'" :percentage="file.percentage" style="width: 150px; font-size: 12px"></el-progress>
        <span v-if="!file.status || (file.status !== 'uploadProgress' && file.status !== 'fileDeleting')" @click.stop>{{ file.fileSizeText }} </span>
        <span v-if="(!file.status || (file.status !== 'uploadProgress' && file.status !== 'fileDeleting')) && isEnableSecretLevel()">{{ file.secretLevelText }}</span>
        <span class="file-status" @click.stop :title="file.msg"> {{ getStatusText(file) }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Uploader from "./Uploader";

export default {
  name: "AceFileUploaderNoFiles",
  components: {
    Uploader,
  },
  props: {
    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;
      },
    },
    allowDownload: {
      type: Boolean,
      default: function () {
        return true;
      },
    },
    allowDelete: {
      type: Boolean,
      default: function () {
        return true;
      },
    },
    refresh: {
      type: Function,
      default: function () {
        this.load();
      },
    },
    size:{
      type:String,
      default:'small'
    }
  },
  data() {
    return {
      fileList: [],
      secretLevels: [],
      percentage11: 0,
      icons: {
        jpg: "icon-file-image",
        png: "icon-file-image",
        bmp: "icon-file-image",
        gif: "icon-file-image",
        jpe: "icon-file-image",
        ico: "icon-file-image",
        jpeg: "icon-file-image",
        psd: "icon-file-image",
        tif: "icon-file-image",
        tiff: "icon-file-image",
        dib: "icon-file-image",
        art: "icon-file-image",
        doc: "icon-file-word",
        docx: "icon-file-word",
        dot: "icon-file-word",
        docm: "icon-file-word",
        dotm: "icon-file-word",
        pdf: "icon-file-pdf",
        xla: "icon-file-excel",
        xlam: "icon-file-excel",
        xlc: "icon-file-excel",
        xld: "icon-file-excel",
        xlk: "icon-file-excel",
        xll: "icon-file-excel",
        xlm: "icon-file-excel",
        xls: "icon-file-excel",
        xlsb: "icon-file-excel",
        xlsm: "icon-file-excel",
        xlsx: "icon-file-excel",
        xlt: "icon-file-excel",
        xltm: "icon-file-excel",
        xltx: "icon-file-excel",
        xlw: "icon-file-excel",
        pot: "icon-file-powerpoint",
        potm: "icon-file-powerpoint",
        potx: "icon-file-powerpoint",
        ppa: "icon-file-powerpoint",
        ppam: "icon-file-powerpoint",
        pps: "icon-file-powerpoint",
        ppsm: "icon-file-powerpoint",
        ppsx: "icon-file-powerpoint",
        ppt: "icon-file-powerpoint",
        pptm: "icon-file-powerpoint",
        pptx: "icon-file-powerpoint",
        qt: "icon-file-video",
        ts: "icon-file-video",
        tts: "icon-file-video",
        vbk: "icon-file-video",
        wm: "icon-file-video",
        wmv: "icon-file-video",
        wmx: "icon-file-video",
        wmp: "icon-file-video",
        wvx: "icon-file-video",
        "3g2": "icon-file-video",
        "3gv": "icon-file-video",
        "3gp": "icon-file-video",
        "3gp2": "icon-file-video",
        "3gpp": "icon-file-video",
        asf: "icon-file-video",
        asr: "icon-file-video",
        asx: "icon-file-video",
        avi: "icon-file-video",
        div: "icon-file-video",
        dv: "icon-file-video",
        flv: "icon-file-video",
        ivf: "icon-file-video",
        lsf: "icon-file-video",
        lsx: "icon-file-video",
        m1v: "icon-file-video",
        m2t: "icon-file-video",
        m2ts: "icon-file-video",
        m2v: "icon-file-video",
        m4v: "icon-file-video",
        mod: "icon-file-video",
        mov: "icon-file-video",
        movie: "icon-file-video",
        mp2: "icon-file-video",
        mp2v: "icon-file-video",
        mp4: "icon-file-video",
        mp4v: "icon-file-video",
        mpa: "icon-file-video",
        mpe: "icon-file-video",
        mpeg: "icon-file-video",
        mpg: "icon-file-video",
        mpv2: "icon-file-video",
        mqv: "icon-file-video",
        mts: "icon-file-video",
        nsc: "icon-file-video",
        aa: "icon-file-audio",
        aac: "icon-file-audio",
        aax: "icon-file-audio",
        ac3: "icon-file-audio",
        adt: "icon-file-audio",
        adts: "icon-file-audio",
        aif: "icon-file-audio",
        aifc: "icon-file-audio",
        aiff: "icon-file-audio",
        au: "icon-file-audio",
        caf: "icon-file-audio",
        cdda: "icon-file-audio",
        gsm: "icon-file-audio",
        m3u: "icon-file-audio",
        m3u8: "icon-file-audio",
        m4a: "icon-file-audio",
        m4b: "icon-file-audio",
        m4p: "icon-file-audio",
        m4r: "icon-file-audio",
        mid: "icon-file-audio",
        midi: "icon-file-audio",
        mp3: "icon-file-audio",
        pls: "icon-file-audio",
        ra: "icon-file-audio",
        ram: "icon-file-audio",
        rmi: "icon-file-audio",
        rpm: "icon-file-audio",
        sd2: "icon-file-audio",
        smd: "icon-file-audio",
        smx: "icon-file-audio",
        smz: "icon-file-audio",
        snd: "icon-file-audio",
        wav: "icon-file-audio",
        wave: "icon-file-audio",
        wax: "icon-file-audio",
        wma: "icon-file-audio",
        tgz: "icon-file-archive",
        z: "icon-file-archive",
        zip: "icon-file-archive",
        "7z": "icon-file-archive",
        gz: "icon-file-archive",
        rar: "icon-file-archive",
        asm: "icon-file-code",
        html: "icon-file-code",
        htm: "icon-file-code",
        xml: "icon-file-code",
        java: "icon-file-code",
        json: "icon-file-code",
        c: "icon-file-code",
        cpp: "icon-file-code",
        h: "icon-file-code",
        aspx: "icon-file-code",
        jsp: "icon-file-code",
        asmx: "icon-file-code",
        ashx: "icon-file-code",
        ascx: "icon-file-code",
        cs: "icon-file-code",
        js: "icon-file-code",
        css: "icon-file-code",
        csv: "icon-file-text-fill",
        ini: "icon-file-text-fill",
        txt: "icon-file-text-fill",
        text: "icon-file-text-fill",
        config: "icon-file-text-fill",
      },
      webUploader: null,
    };
  },
  methods: {
    isAllowDelete() {
      if (this.webUploader != null) {
        return this.webUploader.configuration.allowDelete && this.allowDelete;
      }
      return false;
    },
    isEnableSecretLevel() {
      if (this.webUploader != null) {
        return this.webUploader.configuration.enableSecretLevel;
      }
      return false;
    },
    downloadFile(row, event, column) {
      row.download();
    },
    deleteFile(row) {
      row.delete();
    },
    getIcon(file) {
      if (file.fileName !== undefined) {
        var index = file.fileName.lastIndexOf(".");
        if (index > -1) {
          var ext = file.fileName.substr(index + 1);
          if (this.icons[ext] !== undefined) {
            return "iconfont " + this.icons[ext];
          }
        }
      }
      return "iconfont icon-file-text-fill";
    },
    getStatusText(file) {
      if (file.status !== undefined) {
        switch (file.status) {
          case "fileAdded":
            return "已选择";
          case "fileDeleting":
            return "正在删除...";
          case "fileDeleteError":
            return "删除出错";
          case "fileDeleted":
            return "已删除";
          case "":
            return "分配空间...";
          case "spaceAllocated":
            return "等待上传...";
          case "spaceAllocateError":
            return "分配空间出错";
          case "uploadSuccess":
            return "上传成功";
        }
      }
      return "";
    },
    fileAdded(file) {
      this.$set(file, "status", "fileAdded");
      this.$set(file, "percentage", 0);
      this.fileList.push(file);
      this.$emit("fileAdded", file);
    },
    fileDeleting(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) {
      this.$set(file, "status", "deleted");
      var index = this.fileList.indexOf(file);
      if (index > -1) {
        this.fileList.splice(index, 1);
      }
      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) {
      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) {
      this.$emit("uploadComplete", file);
    },
    uploadSuccess(file, response) {
      var index = this.fileList.indexOf(file);
      if (index > -1) {
        this.fileList.splice(index, 1);
      }
      this.$set(file, "status", "uploadSuccess");
      this.$emit("uploadSuccess", file, response);
    },
    uploadError(file, reason) {
      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 = [];
      this.$emit("initSuccess", webUploader, files, secretLevels, configuration);
    },
    error(type, reason) {
      this.$alert(reason, "错误信息", {
        confirmButtonText: "确定",
      });
      this.$emit("error", type, reason);
    },
  },
};
</script>

<style scoped>
.file {
  background-color: white;
  width: 320px;
  height: 44px;
  float: left;
  position: relative;
  margin: 0 8px 8px 0;
  border-radius: 3px;
  overflow: visible;
  font-size: 12px;
}

.file-name {
  width: 200px;
  height: 16px;
  font-size: 12px;
  line-height: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  color: #666;
  position: absolute;
  left: 41px;
  top: 4px;
}

.file-info {
  height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  left: 41px;
  top: 21px;
  line-height: 160%;
  overflow: visible;
  font-size: 12px;
}
</style>
