<template>
  <div class="uploadWrapper">
    <div class="btnUpload">
      <div id="picker" class="form-control-focus">点击选择文件上传</div>
    </div>
    <div id="thelist" class="uploader-list">
      <ul>
        <li v-for="(item, index) in fileList">
          <a @click="removeFile(item, index)"><span title="点击移除">{{item.name}}</span></a>
          <el-progress
                v-if="item.percentage!=0"
                :text-inside="true"
                :stroke-width="14"
                :percentage="item.percentage"
                status="success"
              ></el-progress>
        </li>
      </ul>
    </div>
    <el-button type="primary" @click="import_data_collect()">开始同步</el-button>
    <!-- <div class="button-discuss" @click="import_data_collect">开始同步</div> -->
  </div>
</template>
<script>
import $ from "jquery";
import WebUploader from "webuploader";
import "webuploader/dist/webuploader.css";
export default {
  props: ['fileType'],
  data() {
    return {
      fileList: [],
    };
  },
  mounted() {
    var _self = this;
    //必须先注销原来的，否则服务会执行多次
    WebUploader.Uploader.unRegister("uploadBigFile");
    //监听分块上存过程中的三个时间点
    WebUploader.Uploader.register(
      {
        "name": "uploadBigFile",
        // 在文件发送之前执行
        "before-send-file": "beforeSendFile",
        // 在文件分片（如果没有启用分片，整个文件被当成一个分片）后，上传之前执行
        "before-send": "beforeSend",
        // 在文件所有分片都上传完后，且服务端没有错误返回后执行
        "after-send-file": "afterSendFile",
      },
      {
        //时间点1:所有分块进行上存之前触发该方法,即当每个文件开始上传第一个分块前就调用该方法
        beforeSendFile: function (file) {
          //定义一个异步对象
          var deferred = WebUploader.Deferred();
          uploader
            .md5File(file, 0, 3 * 1024 * 1024)
            .progress((percentage) => {
              _self.getProgressBar(file, percentage);
            })
            .then((val) => {
              file.md5 = val;
              file.uid = WebUploader.Base.guid();
              // 判断文件是否上传过，是否存在分片，断点续传
              $.ajax({
                type: "POST",
                url: "api/rest/upload/check",
                async: false,
                data: {
                  fileMd5: val,
                },
                success: function (data) {
                  var resultCode = data.data;
                  //  文件已经上传过,忽略上传过程，直接标识上传成功；
                  if (resultCode === -1) {
                    uploader.skipFile(file);
                    file.pass = true;
                    _self.getProgressBar(file, 1);
                  } else {
                    //文件没有上传过，下标为0 文件上传中断过，返回当前已经上传到的下标
                    file.indexcode = resultCode;
                  }
                },
                error: function () {},
              });
              //获取文件信息后进入下一步
              deferred.resolve();
            });
          return deferred.promise();
        },
        //时间点2：如果有分块上传，则每个分块上传之前调用此函数
        //用于文件的续传
        beforeSend: function (block) {
          var indexchunk = block.file.indexcode;
          var deferred = WebUploader.Deferred();
          if (indexchunk > 0) {
            if (block.chunk > indexchunk) {
              //分块不存在，重新发送该分块内容
              deferred.resolve();
            } else {
              //分块存在，跳过
              deferred.reject();
            }
          } else {
            //分块不存在，重新发送该分块内容
            deferred.resolve();
          }
          //返回Deferred的Promise对象。
          return deferred.promise();
        },
        //时间点3:一个文件的所有分片上传成功后，调用该方法,让后台合并所有分片
        //该方法的在uploader.on("success")方法前执行。
        afterSendFile: function (file) {
          //如果所有分块上传成功，则通知后台合并分块
          $.ajax({
            type: "POST",
            url: "api/rest/upload/merge",
            data: {
              fileName: file.name,
              fileMd5: file.md5,
              fileType: _self.fileType
            },
            success: function (data) {
                if(data.code == 9000){
                  _self.$message.success("成功数据"+data.data + "条数据");
                }else{
                  _self.$message.warning(data.message);
                }
            },
            error: function () {},
          });
        },
      }
    );
    //创建实例
    var uploader = WebUploader.create({
        pick: {
            id: '#picker',
            label: '点击选择文件'
        },
        duplicate: true,//去重， 根据文件名字、文件大小和最后修改时间来生成hash Key
        swf: 'WebUploader/uploader.swf',
        chunked: true,
        chunkSize: 10 * 1024 * 1024, // 10M 每个分片的大小限制
        threads: 3,
        server: 'api/rest/upload/part',
        // auto: true,
        // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
        disableGlobalDnd: true,
        fileNumLimit: 1024,
        fileSizeLimit: 50 * 1024 * 1024 * 1024,//50G 验证文件总大小是否超出限制, 超出则不允许加入队列
        fileSingleSizeLimit: 10 * 1024 * 1024 * 1024 //10G 验证单个文件大小是否超出限制, 超出则不允许加入队列
    });
    // 当有文件被添加进队列的时候触发
    uploader.on("fileQueued", function (file) {
      console.log("添加", file);
      _self.fileList.push({name: file.name, id: file.id, percentage: 0});
    });
    /**
     * 当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
     */
    uploader.onUploadBeforeSend = function (obj, data) {
      //console.log("onUploadBeforeSend");
      var file = obj.file;
      data.md5 = file.md5 || "";
      data.uid = file.uid;
    };
    /**
     * 上传过程中，一直会执行该方法
     */
    uploader.on("uploadProgress", function (file, percentage) {
      _self.getProgressBar(file, percentage);
    });
    /**
     * 文件上传成功后，就在该文件对应的位置上，显示上传成功，file.id,作为上传文件位置标签的id,
     */
    uploader.on("uploadSuccess", (file) => {});
    /**
     * 发生错误时
     */
    uploader.on("uploadError", function (file) {});
    /**
     * 不管所有分片发送成功或者失败都会执行该方法
     */
    uploader.on("uploadComplete", function (file) {
  
    });
    //设置全局变量
    this.uploader = uploader;
  },
  methods: {
    import_data_collect() {
      this.uploader.upload();
    },
    removeFile(item, index) {
      this.uploader.removeFile(item.id);
      this.fileList.splice(index, 1);
    },
    getProgressBar(file, percentage) {
      let item = this.fileList.find(e=>e.id == file.id);
      item && (item.percentage = Math.floor(percentage * 100 * 100) / 100);
    }
  },
};
</script>
<style lang="scss" scope>
  .uploadWrapper {
    height: 100%;
  }
  
  #picker > div:nth-child(2){
    width: 126px !important;
    height: 40px !important;
  }

  .btnUpload{
    height: 50px;
  }

  #thelist{
    height: auto;
    overflow-y: auto;
    max-height: calc(100% - 40px);
  }

  #thelist a{
    text-decoration: underline;
    cursor: pointer;
    font-size: 18px;
  }

  #thelist li {
    /* 去掉li前面的小圆点 */
    list-style: none;
    margin: 10px 0px;
  }

  .button-discuss {
    width: 100px;
    height: 30px;
    line-height: 30px;
    float: left;
    font-size: 14px;
    margin-top: 5px;
    margin-left: 20px;
    text-align: center;
    cursor: pointer;
    background-image: url(../../assets/img/yqjc/40.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
</style>
