<template>
    <el-upload
        :ref="opts.id"
        :headers="opts.headers"
        :action="opts.action"
        :accept="opts.accept"
        :limit="opts.limit"
        :multiple="opts.multiple"
        :auto-upload="opts.autoUpload"
        :show-file-list="opts.showFileList"
        :fileList="fileList"
        :data="getOptData()"
        :before-upload="beforeUpload"
        :on-change="onChange"
        :on-success="doSuccess"
        :on-progress="onProgress"
        :on-error="opts.onError"
    >
        <template v-if="!$slots.default">
            <el-button type="primary">点击上传</el-button>
        </template>
        <slot></slot>
    </el-upload>
</template>

<script>
import { handleDefaultParams } from 'ap-util/util/ObjectUtil'

export default {
    name: 'ApUpload',
    props: {
        options: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            fileList: [],
            opts: {}
        }
    },
    watch: {
        opts: {
            handler(value) {
                // 深度监听，opts有修改，对应修改父组件options参数
                this.$emit('update:options', this.opts)
            },
            deep: true
        }
    },
    created() {
        // 上传文件类型限制
        switch (this.options.acceptType) {
            case 'image':
                this.options.accept = 'image/png, image/jpeg, image/jpg'
                break
            case 'excel':
                this.options.accept = '.xlsx, xls'
                break
        }

        let uploadRef = 'ApUpload' + new Date().getTime()

        // 初始化组件前修改默认参数
        this.opts = handleDefaultParams(this.options, {
            id: uploadRef,
            headers: {
                token: this.$store.getters.token
            },
            action: '/apm/fs/upload',
            accept: '',
            limit: 1,
            autoUpload: true,
            showFileList: false,
            multiple: false,
            data: {},     // 上传时附带的额外参数
            name: 'file', // 上传的文件字段名
            onSuccess() {
            },
            onError() {
            },
            beforeUpload(file) {
                return true;
            },
            onProgress(event, file, fileList) {
            },
        })
    },
    methods: {
        // 获取上传参数
        getOptData() {
            let dataRes = {}
            let params = this.opts.data
            if (typeof params === 'function') {
                dataRes = params()
            } else {
                dataRes = params || {}
            }
            return dataRes
        },
        beforeUpload(file) {
            return this.opts.beforeUpload(file);
        },
        onChange(file, fileList) {
            this.fileList = fileList
        },
        onProgress(event, file, fileList) {
            this.opts.onProgress(event, file, fileList)
        },
        doSuccess(response, file, fileList) {
            // 清除历史记录，防止第二次不能上传
            this.$refs[this.opts.id].clearFiles()
            this.opts.onSuccess(response, file, fileList)
        },
        submit() {
            console.log(this.$refs)
            this.$refs[this.opts.id].submit();
        }
    }
}
</script>

<style scoped>

</style>
