<template>
  <Upload
    ref="upload"
    :show-upload-list="false"
    :default-file-list="defaultList"
    :on-success="handleSuccess"
    :format="myConfig.fileType"
    :disabled="disabled"
    :max-size="fileSize"
    :data="headers"
    :on-format-error="handleFormatError"
    :on-exceeded-size="handleMaxSize"
    :before-upload="handleBeforeUpload"
    multiple
    type="drag"
    :class="uploadClass"
    :action="uploadUrl"
  >
    <slot name="btn"></slot>
  </Upload>
</template>
<script>
export default {
    name: 'uploadbox',
    data() {
        return {
            defaultList: [],
            fileSize: 2048,
            myConfig: {},
            uploadUrl: '',
            disabled: false,
        };
    },
    props: {
        config: {
            type: Object,
            default: null,
        },
        headers: {
            type: Object,
            default: null,
        },
        readOnly:{
            type:Boolean,
            default:false
        }
    },
    computed: {
        uploadClass () {
            if (this.disabled) {
                return 'efuture-upload-disabled';
            } else {
                return '';
            }
        }
    },
    created() {
        this.myConfig = Object.assign({}, this.myConfig, this.config);
        if (this.myConfig.fileSize !== undefined) {
            this.fileSize = 1024 * Number(this.myConfig.fileSize);
        }
        this.uploadUrl = this.myConfig.uploadfile;
    },
    methods: {
        handleSuccess(res, file) {
            if (res.data && res.data.length > 0) {
                if (res.data[0].filekey) {
                    file.filekey = res.data[0].filekey;
                } else {
                    if (res.data[0].fileKey) {
                        file.filekey = res.data[0].fileKey;
                    }
                }
            }

            this.$emit('success', res);
        },
        handleFormatError(file) {
            let type = this.myConfig.fileType.join(',');
            this.alert('文件[' + file.name + ']的格式不正确，请上传格式为(' + type + ')的文件');
        },
        handleMaxSize(file) {
            this.alert(
        '文件[' +
          file.name +
          ']的文件大小不允许超过' +
          this.myConfig.fileSize +
          'M'
      );
        },
        handleBeforeUpload() {
            if (!this.myConfig.multiSelect) {
                const check = this.$refs.upload.fileList.length < this.myConfig.fileNum;
                if (!check) {
                    this.alert('上传的文件数量过多，请先删除部分已上传文件再上传');
                }
                return check;
            } else {
                return true;
            }
        },
        delFile(filekey) {
            const index = this.$refs.upload.fileList.findIndex(el => el.filekey === filekey);
            if (index > -1) {
                this.$refs.upload.fileList.splice(index, 1);
            }
        },
        onClick() {
            let flag = true;
            if (this.$parent.$parent.$parent.checkPara) {
                flag = this.$parent.$parent.$parent.checkPara();
            }
            if (flag) {
                if (this.config.onOpenChange) {
                    this.config.onOpenChange(true);
                }
            }
           
            if (flag) {
                if (this.$refs.upload.$refs && this.$refs.upload.$refs.input) {
                     this.$refs.upload.$refs.input.click();
                }
            } 
            return flag;
        },
    },
    watch: {
        config: {
            handler(data) {
                if (this.readOnly || data.readOnly) {
                    this.disabled = true;
                } else {
                    this.disabled = false;
                }
            },
            deep: true,
            immediate: true,
        },
        readOnly(value) {
            if (value || this.config.readOnly) {
                this.disabled = true;
            } else {
                this.disabled = false;
            }
        }
    },
};
</script>
