<template>
    <div>
        <el-upload
                :action=action
                list-type="picture-card"
                :http-request="httpRequest"
                :limit="limit"
                :file-list="fileList"
                :on-exceed="exceed"
                :on-success="success"
                :headers="{token: token}"
                :multiple="multiple"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';

    export default {
        name: "elx-upload",
        props: {
            limit: null,
            multiple: {
                type: Boolean,
                default: true
            },
            fileList: {
                type: Array,
                default: []
            },
            value: [Array, String]
        },

        data() {
            const upload = this.$service.common.upload();

            return {
                action: upload.url,
                list: [],
                index: 0,
                // 图片展示
                dialogImageUrl: '',
                dialogVisible: false,
            };
        },
        computed: {
            ...mapGetters(['token'])
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
            },
            httpRequest(params) {
                const file = params.file
                this.getBase64(file).then(res => {
                    this.$service.common.uploadImg({content: res}).then(subRes => {
                        params.onSuccess(subRes)
                    });
                });
            },
            handleRemove(file, fileList) {
                this.$emit('handleRemove', {file, fileList})
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl =file.showBBGG|| file.url;
                this.dialogVisible = true;
            },
            exceed() {
                this.$message(`不能超过${this.limit}`)
            },
            success(response, file, fileList) {
                this.$emit('update:fileList', fileList)
                this.$emit('success', {response, file, fileList})
            },
            getBase64(file) {
                return new Promise(function (resolve, reject) {
                    let reader = new FileReader();
                    let imgResult = '';
                    reader.readAsDataURL(file);
                    reader.onload = function () {
                        imgResult = reader.result;
                    };
                    reader.onerror = function (error) {
                        reject(error);
                    };
                    reader.onloadend = function () {
                        resolve(imgResult);
                    };
                });
            }
        },
    }
</script>

<style scoped>

</style>