<template>
  <el-upload class="custom-upload" drag :action="uploadUrl" :headers="headers" :multiple="multiple" :limit="limit"
             :on-success="onSuccess" :on-remove="onRemove">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
</template>
<script>
  import store from '../../../vuex/store'
  import {FileController} from "../../../assets/file";

  export default {
    name: 'ZyUpload',
    props: {
      limit: {type: Number, default: 1},
      multiple: {type: Boolean, default: false},
      url: {type: String},
      headers: {
        type: Object, default: () => {
          return {
            "Auth-Client-Type": 'browser',
            "Auth-Client-Arch": 'vue.js',
            "Encoded-User": sessionStorage.getItem('userinfo')
          }
        }
      }
    },
    data() {
      return {
        uploadUrl: '',
        fileIds: [],
      }
    },
    created() {
      this.uploadUrl = this.url || store.state.basePath + `/file/transfer/upload`;
    },
    mounted() {
    },
    watch: {},
    computed: {},
    methods: {
      onSuccess(res) {
        if (res && res.status === 0) {
          this.fileIds.push(res.content);
        }
        this.$emit('change', this.fileIds)
      },
      onRemove(file) {
        this.fileIds.splice(this.fileIds.indexOf(file.response.data.id), 1);
        this.$emit('change', this.fileIds)
      },
    },
  }
</script>
<style lang="scss">
  .custom-upload {
    text-align: center;
    ul {
      text-align: left;
      padding: 0 10px;
    }
    .el-upload-dragger {
      height: 140px;
      width: 350px;
      .el-icon-upload {
        margin-top: 20px;
      }
    }
  }
</style>
