<template>
    <Upload
        ref="upload"
        :show-upload-list="showList"
        :data="posData"
        :on-success="handleSuccess"
        :format="formateAry"
        :max-size="maxSize"
        :on-format-error="handleFormatError"
        :on-exceeded-size="handleMaxSize"
        :before-upload="handleBeforeUpload"
        :on-error="handleError"
        :on-remove="handleRemove"
        :multiple="multiple"
        type="drag"
        :headers="headers"
        :action="uploadAction"
        :style="uploadStyle"
    >
        <div :style="iconDivStyle">
            <img class="show_img" :style="imgStyle" v-show="value != null && value.length > 0" :src="imgScr"/>
            <Icon v-show="value == null || value.length == 0" :type="iconType" :style="iconStyle"/>
        </div>
    </Upload>
</template>

<script>
    //上传文件的混合
    import UploadFileMixins from "../../../ctlMixins/UploadFileMixins";
    import { AssertUtils,StorageUtils} from "goingutils";

    export default {
        name: "go-img-upload-view",
        mixins: [UploadFileMixins],
        data: () => {
            const token = StorageUtils.getSessionItem("sessionId");
            return {
                headers:{
                    "Blade-Auth": `bearer ${token}`,
                    Authorization: `Basic c2FiZXI6c2FiZXJfc2VjcmV0`
                },
                showList: true,
                formateAry: ['jpg', 'jpeg', 'png', 'gif']
            };
        },
        methods:{
            //显示上传进度list
            beforeUpload()
            {
                this.showList = true;
                return true;
            },
            //隐藏上传进度list
            afterUploadFile(){
                //如果不是多选
                if(!this.multiple){
                    this.$refs.upload.clearFiles();
                }
                this.showList = false;
            }
        },
        computed: {
            imgScr() {
                if (AssertUtils.isNotEmpty(this.value)) {
                    //如果图片id不为空 则展示图片
                    return this.showImage(this.value);
                } else {
                    return "";
                }
            }
        },
        mounted() {
            this.uploadList = this.$refs.upload.fileList;
        },
        watch: {}
    };
</script>
