<script setup>
import { ref, reactive, watch } from 'vue'
import { Plus, Delete } from '@element-plus/icons-vue'

const props = defineProps({
    width:{
        type:String,
        default:'120px'
    },
    height:{
        type:String,
        default:'120px'
    },
    imgUrl:{
        type:String,
        default:''
    },
    text:{
        type:String,
        default:'点击上传图片'
    },
    uploadHint:{
        type:String,
        default:''
    }
})

let uploadKey = ref(0)

const emits = defineEmits(['upload','remove','showImage'])
function handleUploadImg(file) {
    emits('upload', file)
}
function handleRemove() {
    emits('remove')
}
function showImage(){
    emits('showImage',[props.imgUrl])
}
</script>

<template>
    <el-upload action="" accept="image/*" :http-request="handleUploadImg" :show-file-list="false"
        :key="uploadKey">
        <div class="upload-box" :style="{'width':props.width,'height':props.height}">
            <template v-if="!imgUrl.length">
                <el-icon :size="24"><Plus /></el-icon>
                <p class="form-hint">{{ text }}</p>
            </template>
            <template v-else>
                <img class="upload-img" :src="imgUrl" alt="配图">
                <span class="upload-mask" @click.stop="showImage">
                    <span class="mask-icon" @click.stop="handleRemove">
                        <el-icon :size="24"><Delete /></el-icon>
                    </span>
                </span>
            </template>
        </div>
    </el-upload>
    <span class="upload-hint" v-if="props.uploadHint.length">{{ props.uploadHint }}</span>
</template>

<style scoped lang="scss">
.el-upload {
    flex-wrap: wrap;
    .upload-box {
        position: relative;
        /* width: 120px;
        height: 120px; */
        background-color: #F5F7F9;
        border: 1px dashed #DCDFE6;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 4px;
        overflow: hidden;

        &:hover {
            border: 1px dashed #3375e1;

            .upload-mask {
                opacity: 1;
            }
        }
        .form-hint {
            margin-top: 10px;
            font-size: 12px;
            color: #999999;
        }

        .upload-img,
        .upload-mask {
            width: 100%;
            height: 100%;
        }
        .upload-mask {
            position: absolute;
            left: 0;
            top: 0;
            cursor: default;
            text-align: center;
            color: #fff;
            opacity: 0;
            font-size: 20px;
            background-color: rgba(0, 0, 0, .5);
            transition: opacity .3s;
            z-index: 2;
            line-height: 120px;
            .mask-icon {
                cursor: pointer;
            }
        }
    }
}
.upload-hint{
    display: block;
    width:100%;
    color:#DCDCDC;
    font-size: 12px;
}
</style>
