<template>
    <input ref="file" type="file" name="file" id style="display:none" :accept="accept" />
</template>
<script>
import * as fileInfo from "@/utils/file";
export default {
    props: {
        limit: Number,
        mediaType: String,
        acceptType: String,
        toUrl: {
            type: Boolean,
            default: true,
        },
        failString:String,
        limitFailStr:String
    },
    computed: {
        accept() {
            if (this.acceptType) {
                return this.acceptType;
            }
            return fileInfo.mediaMimes[this.mediaType]
                .map((item) => this.mediaType + "/" + item)
                .join(",");
        },
    },
    mounted() {
        this.$el.addEventListener("change", (e) => {
            if (!window.FileReader) {
                this.$alert({content: '无法上传' });
                e.target.value = "";
                return;
            }

            if (e.target.files.length === 0) {
                e.target.value = "";
                return;
            }

            this.file = e.target.files[0];

            // if(this.name === this.file.name){
            //      e.target.value = "";
            //      return
            // }

            if (!fileInfo.checkMediaMime(this.mediaType, this.file.name)) {
                e.target.value = "";
                if (this.failString) {
                    return this.$alert({
                        content: `“${this.file.name}”`+this.failString
                    });
                }
                return this.$alert({
                    content: '不支持该文件格式'
                });
            }
            if (this.limit > 0) {
                if (!fileInfo.checkSizeLimitFree(this.file.size, this.limit)) {
                    e.target.value = "";
                    if (this.limitFailStr) {
                        return this.$alert({
                            content:`“${this.file.name}”` + this.limitFailStr
                        });
                    }
                    return this.$alert({
                        content:`文件大小不能超过${this.limit}MB`,
                    });
                }
            } else if (
                !fileInfo.checkSizeLimit(this.mediaType, this.file.size)
            ) {
                e.target.value = "";
                if (this.limitFailStr) {
                    return this.$alert({
                        content:`“${this.file.name}”` + this.limitFailStr
                    });
                }
                return this.$alert({
                    content:`上传文件太大，不能超过${fileInfo.mediaMaxSize[this.mediaType]}MB`
                });
            }
            if (this.toUrl) {
                const reader = new FileReader();
                reader.readAsDataURL(this.file);
                reader.onload = (e) => {
                    this.name = this.file.name;
                    this.type = this.file.type;
                    this.size = this.file.size;
                    this.mime = fileInfo.getMime(this.file.name);
                    this.dataURL = fileInfo.base64ToDataURL(e.target.result);
                    this.base64 = e.target.result;
                    this.$emit("file-change", this);
                };
            } else {
                this.$emit("file-change", this);
            }

            e.target.value = "";
        });
    },
    beforeDestroy() {
        // this.clear();
    },
    methods: {
        click() {
            this.$el.click();
        },
        clear() {
            this.dataURL && window.URL.revokeObjectURL(this.dataURL);
            this.name = null;
            this.type = null;
            this.size = null;
            this.file = null;
            this.dataURL = null;
            this.base64 = null;
            this.poster = null;
        },
        upload() {},
    },
};
</script>