<template>
    <el-upload action="" accept="image/*" :http-request="handleUploadImg" :show-file-list="false"
        :key="uploadKey">
        <div class="upload-box">
            <template v-if="!imgUrl.length">
                <i class="el-icon-plus" style="font-size: 24px;"></i>
                <p class="form-hint">点击上传图片</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">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </template>
        </div>
    </el-upload>
</template>

<script>
    export default {
        props: {
            imgUrl: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                uploadKey: 0
            };
        },
        watch: {
            imgUrl(newVal) {
                //this.uploadKey++
            }
        },
        methods: {
            handleUploadImg(file) {
                this.$emit('upload', file)
            },
            handleRemove() {
                this.$emit('remove')
            },
            showImage(){
                this.$emit('showImage',[this.imgUrl])
            }
        },
    };
</script>

<style scoped lang="scss">
    .el-upload {
        .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;
                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;
                }
            }
        }
    }
</style>