<template>
    <a-form-model-item :label="attr.name" :prop="attr.alias">
        <a-upload
            name="file"
            :multiple="true"
            :action="uploadUrl"
            :accept="fileType"
            :headers="headers"
            :file-list="fileList"
            list-type="picture"
            :beforeUpload="beforeUpload"
            :disabled="disabled"
            :remove="remove"
            @change="handleChange"
        >
            <a-button><a-icon type="upload" />点击上传</a-button>
        </a-upload>
    </a-form-model-item>
</template>

<script>
import config  from "../../config/config";
import auth from "../../utils/auth";
export default {
    name: "mix-image",
    model: {
        prop: "modelVal",
        event: 'change'
    },
    props: {
        modelVal: "",
        attr: {
            type: Object,
            default: () => {
            }
        }
    },
    data(){
        return {
            user: null,
            uploadUrl: config.upload_url,
            headers: {
                "Authorization": "Bearer " + this.user.token
            },
            fileList: [],
            setting: {
                is_allow_null: false,
                allow_image_type: [],
                image_width: 100,
                image_height: 100
            },
            fileType: "",
            disabled: false
        }
    },
    created() {
        this.user = auth.getUser();
        this.setting = this.attr.setting
        this.setDisable(this.attr.display)
        if (this.setting.allow_image_type) {
            let fileType = this.setting.allow_image_type.map(v => {
                return v = '.' + v
            })
            this.fileType = fileType.join(',')
        }
    },
    methods: {
        setDisable(display) {
            if (display === 'r' || display === 'v') {
                this.disabled = true;
            } else if (display === 'h') {
                this.textType = 'hidden';
            } else if (display === 'w') {
                this.disabled = false;
            }
        },
        beforeUpload(file, fileList){
            if (file.size > 16 * 1024 * 1024) {
                this.$message.error('文件不可超过16M');
                return false;
            }
        },
        handleChange(info) {
            let self = this
            let fileList = [...info.fileList];
            fileList = fileList.slice(-1);
            fileList = fileList.map(file => {
                if (file.response) {
                    file.url = file.response.result.url;
                    self.$emit('change',  file.url)
                }
                return file;
            });
            this.fileList = fileList;
            if (info.file.status === 'done') {
                this.$message.success(`${info.file.name} 文件上传成功`);
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} 文件上传失败`);
            }
        },
        remove(file){
            this.$emit('change',  '')
        }
    }
}
</script>

<style scoped>

</style>
