<template>
    <div class="father w100p">

        <el-upload :accept="accept" :action="actionSync" :headers="headers" :name="name" :data="data" :on-progress="_onProgress"
                   :before-upload="_beforeUpload" :show-file-list="false" :on-success="_onSuccess"
                   class="square60 bd2 rds4 dashed flex ct uploader">
            <div v-if="modelValue" class="abs pd10" :class="$attrs.class">
                <el-image class="w100p h100p" :src="modelValue" fit="contain" />
            </div>
            <div class="text-center flex ct abs" v-else>
                <div>
                    <div class="bIcon-add fz30 gray"></div>
                    <slot></slot>
                </div>
            </div>
        </el-upload>

        <div v-if="percent > 0" class="abs bottom pd3">
            <el-progress :percentage="percent" :show-text="false"></el-progress>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'st-uploader',
        emits:["update:modelValue"],
        inheritAttrs : false ,
        props:{
            modelValue : String ,
            name : {
                type : String,
                default : "file"
            } ,
            action : {
                type : String ,
                required : true
            } ,
            headers : {
                type : Object ,
                default(){
                    return {
                        "X-Auth-Token" : store.getters.localToken
                    }
                }
            } ,
            data : {
                type : Object ,
                default(){
                    return {}
                }
            } ,
            accept : {
                type : String ,
                default : ".jpg,.png.JPG,.PNG,.jpeg,.JPEG"
            },
            maxSize:{
                type : Number ,
                default : 1024 * 100
            },
            sizeLimitMsg:{
                type : String ,
                default : "图片尺寸大小超出限制"
            }
        },
        data() {
            return {
                percent : 0
            }
        },
        computed:{
            actionSync(){
                let domain = import.meta.env.VITE_BASE_URL == "/" ? "" : import.meta.env.VITE_BASE_URL ;
                return `${domain}${this.action}`;
            }
        },

        methods: {

            _onProgress(evt){
                console.log("evt",evt);
                this.percent = evt.percent ;
            },

            _onSuccess(res, uploadFile){
                this.percent = 0 ;
                if(res.code !== 0) {
                    this.$message.error(res.msg);
                    return ;
                }
                this.$emit("update:modelValue" , res.result) ;
            },

            _beforeUpload(file) {
                if (file.size > this.maxSize ) {
                    this.$message.error(this.sizeLimitMsg)
                    return false ;
                }
            }
        }
    }
</script>

<style lang="scss">
    .uploader{
        transition: 0.4s;
        &:hover{
            border-color: $main;
        }
    }
</style>
