<!--
  上传组件
  type: 类型，默认image
  identify: key值，通过val获取
  disabled: 是否可用
  index: 父组件的下标
  imageIndex: 图片下标
  isShow: 图片的显示
 -->
<template>
  <div id="saga-upload">
    <div id="uploadFile">
      <el-upload
        class="upload-file"
        action
        :http-request="uploadAndSubmit"
        :show-file-list="false"
        drag
      >
        <el-button
          size="small"
          :type="isShow ===1 ? 'text':'primary'"
          v-if="!readOnly"
        >点击上传</el-button>
        <span v-if="isShow !== 1 || isShow == undefined">
          <div
            slot="tip"
            class="el-upload__tip"
            v-if="!readOnly"
          >请上传文件</div>
        </span>

      </el-upload>
      <div
        v-if="item && filesArr.length"
        v-for="(item,index) in filesArr"
      >
        <el-button
          type="text"
          @click="download(item.Key)"
        >
          {{delFile(item.Name)}}</el-button>
        <i
          v-if="!readOnly"
          class="el-icon-close delete-icon"
          style="margin-left:10px; cursor:pointer"
          @click="deleteFile(index,item)"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
import tools from "@/utils/scan/tools";

export default {
  props: {
    keysArr: {
      type: [Array, String],
      default: function () {
        return []
      }
    },
    readOnly: {
      type: Boolean,
      default: false
      },
      max: {
        type: [Number, String],
        default: 6
      },
      isShow: {
        type: Number
      },
      contextKey: {
        type: [String, Object]
      },
      defined: null
    },
    data() {
      return {
        filesArr: []
      };
    },
    created() {
      this.fileFalg()
    },
    methods: {
      //判断是否为空
      fileFalg() {
        let type = typeof (this.keysArr)
        if (type == 'string') {
          this.filesArr = [this.keysArr]
          // this.filesArr = JSON.parse(this.keysArr)
        } else {
          this.filesArr = tools.deepCopy(this.keysArr)
        }

        if (!this.keysArr) {
          this.filesArr = []
        }
      },
      //处理地址
      delFile(name) {
        return name.length > 20 ? name.substring(0, 20) + "..." : name
      },

      resetFile() {
        this.filesArr = []
      },


      //点击下载
      download(key) {
        console.log(key)
        window.open("/image-service/common/file_get/" + key + "?systemId=dataPlatform")
      },

      //删除图片
      deleteFile(i, key) {
        this.filesArr.splice(i, 1);
        this.$emit("change", this.filesArr, this.defined);
      },

      //上传
      uploadAndSubmit(item) {
        // var form = document.forms["demoForm"];

        // if (form["file"].files.length > 0) {
        // 寻找表单域中的 <input type="file" ... /> 标签
        // var file = form["file"].files[0];

        let file = item.file;
        // try sending
        let reader = new FileReader();

        let vm = this;

        let fileType = file.name.split(".");
        let type = fileType[fileType.length - 1];
        let key = "&key=" + fileType[0] + file.uid + "." + type
        let CreateTime = tools.formatDate(new Date(file.lastModified))
        reader.onloadstart = function () {
          // 这个事件在读取开始时触发
        };
        reader.onprogress = function (p) {
          // 这个事件在读取进行中定时触发

        };
        reader.onUploadProgress = function (progressEvent) {
          let percent = (progressEvent.loaded / progressEvent.total * 100) | 0
          //调用onProgress方法来显示进度条，需要传递个对象 percent为进度值
          uploader.onProgress({percent: percent})
        }
        reader.onload = function () {
          // 这个事件在读取成功结束后触发
        };
        reader.onloadend = function () {
          // 这个事件在读取结束后，无论成功或者失败都会触发
          if (reader.error) {
          } else {
            // document.getElementById("bytesRead").textContent = file.size;
            // 构造 XMLHttpRequest 对象，发送文件 Binary 数据
            var xhr = new XMLHttpRequest();
            xhr.open(
              /* method */
              "POST",
              /* target url */
              "/image-service/common/file_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true" + key
              /*, async, default to true */
            );
            //xhr.overrideMimeType("application/octet-stream");
            xhr.send(reader.result);
            xhr.onreadystatechange = function () {
              if (xhr.readyState == 4) {
                console.log(xhr)
                if (xhr.status == 200) {
                  let fileObject = {
                    key: key.split("=")[1],
                    type,
                    name: file.name,
                    createTime: CreateTime,
                    systemId: 'dataPlatform'
                  }
                  vm.filesArr.push(fileObject);

                  if(vm.isShow === 1) {
                    let oFile = {}
                    oFile[vm.contextKey] = vm.filesArr
                    vm.$emit("change", oFile, vm.defined);
                  } else {
                    vm.$emit("change", vm.filesArr, vm.defined);
                  }
                } else {
                  this.$message.error(res.data.ResultMsg)
                }
              }
            };
          }
        };
        reader.readAsArrayBuffer(file);
      }
    },
    watch: {
      keysArr: function (val) {
        this.fileFalg()
      }
    }
  };
</script>

<style lang="less">
  #saga-upload {
    .dill-image {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 20px;
    }

    .el-upload-dragger {
      width: 180px;
      height: 180px;
    }

    img {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }

    #uploadFile {
      .upload-file {
        overflow: hidden;

        .el-upload-dragger {
          width: inherit;
          height: inherit;
          border: none;
        }
      }
    }
  }
</style>
