<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="actionUrl"
      :file-list="files"
      :headers="header"
      :show-file-list="false"
      :before-remove="beforeRemove"
      :accept="acceptType"
      :on-preview="preview"
      :limit="intLimit"
      :multiple="multiples"
      :on-success="success"
      :on-progress="progress"
      :before-upload="beforeAvatarUpload"
    >
      <el-tooltip placement="right" effect="light">
        <div slot="content">
          附件格式支持：{{accept}}
          <br />附件大小限制：单个文件不超过50MB
          <br />
          <span v-if="multiples">附件个数限制：最多{{intLimit}}个</span>
        </div>
        <el-button size="mini" round icon="el-icon-plus">上传</el-button>
      </el-tooltip>
    </el-upload>
    <el-table
      v-if="filesData.length>0 && !isSimple"
      :data="filesData"
      border
      :style="'width:'+maxWidth+'px ;margin-top :10px;'"
      size="medium"
    >
      <el-table-column label="序号" align="center" type="index" width="70"></el-table-column>
      <el-table-column label="附件名称" min-width="200" align="center">
        <template slot-scope="scope">
          <span class="done-subject" @click="preview(scope.row)">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" align="center" lalign="center" width="100" label="附件类型"></el-table-column>
      <el-table-column prop="bytes" align="center" lalign="center" width="100" label="附件大小"></el-table-column>
      <el-table-column prop="username" align="center" label="上传者" width="120"></el-table-column>

      <el-table-column
        :label="con.desc"
        v-for="con in conf"
        :key="con.name"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-tooltip :disabled="!errors.has('custom-form.'+files[scope.$index].name+' '+con.desc)">
            <div slot="content">必填</div>
            <el-input
              size="small"
              :name="files[scope.$index].name+' '+con.desc"
              v-model="files[scope.$index][con.name]"
              v-validate="con.inputValidate"
              clearable
              :placeholder="'请输入'+con.desc"
            ></el-input>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="260">
        <template slot-scope="scope">
          <el-button @click="up(scope.$index)" size="small" icon="el-icon-arrow-up" plain></el-button>
          <el-button @click="down(scope.$index)" size="small" icon="el-icon-arrow-down" plain></el-button>
          <el-button @click="download(scope.row)" size="small" icon="el-icon-download" plain></el-button>
          <el-button
            @click="beforeRemove(scope.row)"
            type="danger"
            size="small"
            icon="el-icon-delete"
            plain
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <ul v-else class="file-list__wrap">
      <li v-for="(file,index) in filesData" :key="index" class="file-item">
        <i class=" file-icon el-icon-document"></i>
        <p  class="file__name" :class="{'done-subject': previewable}" @click="preview(file)">{{file.name}}</p>
        <i class="file-close__icon el-icon-close" @click="removeFile(file)"></i>
        </li>
    </ul>
    <!-- 预览附件-->
    <FilePreview ref="filePreview" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import req from "@/request.js";
import utils from "@/utils.js";
import FilePreview from "@/components/common/FilePreview.vue";
import { Loading } from "element-ui";
export default {
  props: ["fileVal", "multiples", "accept", "limit", "conf","isSimple"],
  components: { FilePreview },
  data() {
    return {
      src: "",
      files: [],
      fileId: "",
      fileTree: "",
      isChecking: true,
      num: 0,
      list: [],
      filesData: [],
      maxWidth: "100%"
    };
  },
  computed: mapState({
    header: state => {
      return { Authorization: `Bearer ${state.login.currentUser.token}` };
    },
    intLimit: function() {
      if (!this.multiples) return 1;
      return this.limit ? parseInt(this.limit) : 5;
    },
    actionUrl: function() {
      return window.context.portal + "/system/file/v1/upload";
    },
    acceptType: function() {
      if (!this.accept) {
        return "";
      }
      let acceptTypeArr = [];
      for (let i = 0, type; (type = this.accept.split(",")[i++]); ) {
        acceptTypeArr.push("." + type);
      }
      return acceptTypeArr.join(",");
    }
  }),
  watch: {
    files: {
      handler(newVal, oldVal) {
        this.$emit("input", JSON.stringify(newVal));
      },
      deep: true
    }
  },
  methods: {
    //附件下载
    download(file) {
      this.$store.dispatch("menu/downloadFile", file.id);
    },
    //上移按钮
    up(idx) {
      idx = Number.parseInt(idx);
      if (idx < 1) {
        return;
      }
      //table数据改变
      var t = this.filesData[idx - 1];
      this.$set(this.filesData, idx - 1, this.filesData[idx]);
      this.$set(this.filesData, idx, t);

      //boData数据也跟着改变
      var t = this.files[idx - 1];
      this.$set(this.files, idx - 1, this.files[idx]);
      this.$set(this.files, idx, t);
      this.$emit("input", JSON.stringify(this.files));
    },
    //下移按钮
    down(idx) {
      idx = Number.parseInt(idx);
      if (idx >= this.filesData.length - 1) {
        return;
      }
      //table数据改变
      var t = this.filesData[idx + 1];
      this.$set(this.filesData, idx + 1, this.filesData[idx]);
      this.$set(this.filesData, idx, t);

      //boData数据也跟着改变
      var t = this.files[idx + 1];
      this.$set(this.files, idx + 1, this.files[idx]);
      this.$set(this.files, idx, t);
      this.$emit("input", JSON.stringify(this.files));
    },
    preview(files) {
      let obj = {};
      obj.id=files.id;
      obj.name=files.name;
      obj.size=files.size;
      this.$refs.filePreview.preview(obj);
    },
    beforeRemove(file) {
      if (this.isChecking) {
        return this.$confirm(`确定移除 ${file.name}？`).then(() => {
          this.num = 0;
          let value = {};
          if (file.response) {
            value = JSON.parse(file.response.value);
          } else {
            value = file;
            value.fileId = file.id;
          }
          for (var i = 0; i < this.files.length; i++) {
            if (this.files[i].id == value.fileId) {
              this.files.splice(i, 1); //删除数组某一项
            }
          }
          if (JSON.stringify(this.files) == "[]") {
            this.filesData = [];
            this.$emit("input", "");
          } else {
            this.filesData = [];
            for (let i = 0; i < this.files.length; i++) {
              this.filesData.push({
                id: this.files[i].id,
                name: this.files[i].name,
                size: this.files[i].size,
                type: utils.substringType(this.files[i].name, "."),
                bytes: utils.bigDecimal(this.files[i].size),
                username: this.files[i].username
              });
            }
            this.$emit("input", JSON.stringify(this.files));
          }
        });
      } else {
        this.num = 0;
        let value = {};
        if (file.response) {
          value = JSON.parse(file.response.value);
        } else {
          value = file;
          value.fileId = file.id;
        }
        for (var i = 0; i < this.files.length; i++) {
          if (this.files[i].id == value.fileId) {
            this.files.splice(i, 1); //删除数组某一项
          }
        }
        if (JSON.stringify(this.files) == "[]") {
          this.filesData = [];
          this.$emit("input", "");
        } else {
          this.filesData = [];
          for (let i = 0; i < this.files.length; i++) {
            this.filesData.push({
              id: this.files[i].id,
              name: this.files[i].name,
              size: this.files[i].size,
              type: utils.substringType(this.files[i].name, "."),
              bytes: utils.bigDecimal(this.files[i].size),
              username: this.files[i].username
            });
          }
          this.$emit("input", JSON.stringify(this.files));
        }
      }
    },
    //文件上传时
    progress(event, file, fileList) {
      Loading.service("文件上传中");
    },
    //文件上传成功时
    success(response, file, fileList) {
      let loadingInstance = Loading.service("文件上传中");
      this.$nextTick(() => {
        // 以服务的方式调用的 Loading 需要异步关闭
        loadingInstance.close();
      });
      if (this.num == 0) {
        this.list = [];
        for (let i = 0; i < fileList.length; i++) {
          this.list.push(fileList[i]);
        }
      }
      this.num = this.num + 1;
      for (let j = 0; j < this.list.length; j++) {
        if (!this.list[j].raw) {
          for (let i = 0; i < fileList.length; i++) {
            if (this.list[j].name == fileList[i].name) {
              fileList.splice(i, 1);
              break;
            }
          }
        }
      }
      if (this.num == fileList.length) {
        for (let i = 0; i < fileList.length; i++) {
          if (fileList[i].response) {
            let value = JSON.parse(fileList[i].response.value);
            let arrarFile = {};
            arrarFile.id = value.fileId;
            arrarFile.name = value.fileName;
            arrarFile.size = value.size;
            arrarFile.username = JSON.parse(
              sessionStorage.getItem("currentUser")
            ).username;
            this.files.push(arrarFile);
          }
        }
        this.filesData = [];
        for (let i = 0; i < this.files.length; i++) {
          this.filesData.push({
            id: this.files[i].id,
            name: this.files[i].name,
            size: this.files[i].size,
            type: utils.substringType(this.files[i].name, "."),
            bytes: utils.bigDecimal(this.files[i].size),
            username: this.files[i].username
          });
        }
        this.$emit("input", JSON.stringify(this.files));
      }
    },
    // handleChange(file, fileList) {
    //   debugger
    //   if(file.status=="success"){
    //     let value = JSON.parse(file.response.value);
    //     let arrarFile = {};
    //     arrarFile.id = value.fileId;
    //     arrarFile.name = value.fileName;
    //     arrarFile.size = value.size;
    //     this.files.push(arrarFile);
    //     this.$emit("input", JSON.stringify(this.files));
    //   }
    //  },
    getFiles() {
      if (this.files.length == 0) {
        return "";
      } else {
        return this.files;
      }
    },
    beforeAvatarUpload(file) {
      // 文件类型限制
      const name = file.name ? file.name : "";
      const ext = name
        ? name.substr(name.lastIndexOf(".") + 1, name.length)
        : true;
      const isExt = this.accept.indexOf(ext) < 0;
      this.isChecking = !isExt;
      if (isExt) {
        if (this.accept == "false") {
          this.$message.error("请配置可上传文件的格式!");
        } else {
          this.$message.error("上传的附件只能是 " + this.accept + "格式!");
        }
        return !isExt;
      }
    }
  },
  // mounted() {
  //   let _this = this;
  //   debugger
  //   //监听表单提交事件，如果附件上传配置了扩展属性则进行更新
  //   if (this.conf && this.conf.length>0) {
  //     this.$root.$on('bpmFormSubmit', function(value) {
  //       debugger
  //       _this.$store.dispatch("menu/updateFileExtraProp",_this.files);
  //     });
  //   }
  // },
  created() {
    this.$nextTick(function() {
      this.maxWidth = this.$el.offsetWidth;
    });
    setTimeout(() => {
      if (this.fileVal) {
        let value = JSON.parse(this.fileVal);
        for (var i = 0; i < value.length; i++) {
          this.files.push(value[i]);
        }
        for (let i = 0; i < value.length; i++) {
          this.filesData.push({
            id: this.files[i].id,
            name: this.files[i].name,
            size: this.files[i].size,
            type: utils.substringType(this.files[i].name, "."),
            bytes: utils.bigDecimal(this.files[i].size),
            username: this.files[i].username
          });
        }
      }
    }, 100);
    this.$validator = this.$root.$validator;
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/element-variables.scss";
.upload-demo {
  max-width: 570px;
  margin-top: 5px;
}

.done-subject {
  cursor: pointer;
}

.done-subject {
  color: $--theme-color;
}

div[aria-invalid='true'] ::v-deep .el-input__inner, div[aria-invalid='true'] ::v-deep .el-input__inner:focus {
  border-color: #f56c6c;
}
.file-list__wrap{
  list-style: none;
  width: 360px;
  .file-item{
    padding: 0 6px;
    display: flex;
    .file__name{
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 300px;
      margin: 0;
    }
    &:hover{
      cursor: pointer;
      color: #2761ff;
      background: #f5f5f5;
      .file-close__icon{
        display: inline-block;
      }
    }
    .file-icon{
      padding-right: 4px;
      padding-top: 7px;
    }
    .file-close__icon{
      display: none;
      float: right;
      padding-top: 7px;
      margin-left: 10px;
    }
  }
}
</style>


