<template>
<div><slot></slot></div>
</template>

<script>
// import '/static/webuploader.min'
import Cookie from 'js-cookie'

// http://git.gengmei.cc/backend/gm-upload/blob/master/gm_upload/consts.py
const UPLOAD_TYPE = '26'

export default {
    props: {
        uploadType: {
            type: String,
            default: UPLOAD_TYPE
        },
        size: {
            type: Number,
            default: 1 * 1024 * 1024
        }
    },

    mounted () {
        let uploader = WebUploader.create({
            pick: {
                multiple: false,
                id: this.$el
            },
            swf: '/static/Uploader.swf',
            server: '/api/file/upload',
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,png',
                mimeTypes: 'image/gif,image/jpg,image/jpeg,image/png'
            },
            auto: true,
            fileSizeLimit: this.size,
            formData: {
                'uploadType': this.uploadType,
                'csrfmiddlewaretoken': Cookie.get('csrftoken') || ''
            }
        })

        uploader.on('uploadSuccess', (file, res) => {
            uploader.reset()
            if (res.error === 0) {
                this.$emit('upload-img', res)
                this.$emit('uploaded', res.data, file)
            } else {
                this.$emit('error', {type: 'SERVER_ERROR', reason: res.message})
            }
        })

        uploader.on('error', (type) => {
            if (type === 'Q_EXCEED_SIZE_LIMIT') {
                this.$emit('error', {type: 'EXCEED_SIZE_LIMIT', reason: '图片过大'})
            }
        })

        uploader.on('uploadError', (file, reason) => {
            this.$emit('error', {type: 'UP_ERROR', reason})
        })
    }
}
</script>