
<template>
    <label :class="bem()" :title="title">
        <input type="file" :multiple="multiple" :accept="accept" @change="onFileChange">
        <span>{{label || title}}</span>
    </label>
</template>
<script>
import { componentMixin, createComponentName } from '../_utils/component';
class FileWrap {
    constructor(file) {
        this.rawFile = file;

        this.name = file.name;
        this.type = file.type;
        this.size = file.size;
        this.result = null;
    }

    readAs(type = 'blob') {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            const file = this.rawFile;
            const fnNamesMap = {
                default: 'readAsArrayBuffer',
                datauri: 'readAsDataURL',
                text: 'readAsText',
            };

            reader.onload = () => {
                this.result = reader.result;

                resolve(this.result);
            };

            reader.onerror = () => {
                reject(new Error('File read error'));
            };

            const fnName = fnNamesMap[type] || fnNamesMap.default;

            reader[fnName](file);
        });
    }

    createURL() {
        const url = URL.createObjectURL(this.rawFile);

        return {
            destroy() {
                URL.revokeObjectURL(url);
            },
            url,
        };
    }

    toJSON() {
        return {
            name: this.name,
            type: this.type,
            size: this.size,
            result: this.result,
        };
    }
}

export default {
    name: createComponentName('file-picker'),
    mixins: [componentMixin],
    props: {
        value: {
            type: Array,
            default() {
                return [];
            },
        },
        multiple: {
            type: Boolean,
            default: false,
        },
        append: {
            type: Boolean,
            default: true,
        },
        accept: {
            type: String,
            default: 'image/jpeg,image/png,image/gif',
        },

        title: {
            type: String,
            default: '上传',
        },
        label: {
            type: String,
            default: '',
        },

        readAs: {
            type: String,
            default: null,
        },
    },
    data() {
        return {
            currentStatus: 1,
            dialogShow: false,
            externalImg: '', // external img url,
            qrcodeInterval: null,
            imgInterval: null,
            qrcode_token: '',
            qrcode_url: '',
            qrcodeOption: {
                size: 148,
            },
            scaned: false, // qrcode scaned,
            imgRquest: null,
        };
    },
    computed: {
        files: {
            get() {
                return this.value;
            },
            set(files) {
                this.$emit('input', files);
            },
        },
    },
    methods: {
        async readFiles(files) {
            const type = this.readAs;

            if (!files) {
                files = this.files;
            }

            await Promise.all(files.map(file => {
                return file.readAs(type);
            }));
        },

        updateFiles(files) {
            const newFiles = [];

            if (this.multiple) {
                if (this.append) {
                    newFiles.push(...this.files);
                }

                newFiles.push(...files);
            }
            else {
                newFiles.push(files[0]);
            }

            this.files = newFiles;
        },

        onFileChange(e) {
            const inp = e.target;
            const files = [...inp.files]
                .map(file => {
                    return new FileWrap(file);
                });

            // Reset input
            inp.value = '';

            const file = files[0];
            if (!file || !file.size) {
                return;
            }

            if (this.readAs) {
                this.readFiles(files);
            }

            this.updateFiles(files);

            this.$emit('change', file, e);
        },
    },
};
</script>
<style lang="less">
@import '../_styles/base.less';

@b: ~'@{prefix}-file-picker';

.@{b} {
    display: inline-block;
    box-sizing: border-box;
    background: none;
    border: 1px solid #52555d;
    border-radius: 36px;
    cursor: pointer;
    color: #35363a;
    padding: 0 36px;
    text-align: center;
    position: relative;
    overflow: hidden;

    &:hover{
        border-color: #005cf9;
        color: #005cf9;
    }

    input{
        cursor: pointer;
        font-size: 44px;
        position: absolute;
        right: 0;
        top: 0;
        opacity: 0;
    }
}
</style>
