<template>
    <el-upload
        class="avatar-uploader"
        :action="uploadUrl"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :on-error="handleAvatarError"
        :before-upload="beforeAvatarUpload"
    >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-popover placement="right" title width="250" trigger="hover">
            <div class="popover-content">
                <img :src="popoverImg" width="250" alt />
            </div>
            <i
                class="el-icon-plus avatar-uploader-icon"
                @mouseenter="showMask"
                @mouseleave="showMask"
                slot="reference"
            ></i>
        </el-popover>
        <div class="mask" v-show="uploadNew">
            <p>点击上传新图片</p>
        </div>
        <div class="avatar-cont">
            <b class="icon-plus"></b>
            <span>点击添加</span>
            <span>{{ title }}</span>
        </div>
    </el-upload>
</template>

<script>
export default {
    name: "filesUpload",
    props: {
        uploadUrl: String,
        popoverImg: String,
        imageUrl: String,
        title: String
    },
    data() {
        return {
            uploadNew: false
        };
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.$emit("success", res, file);
        },
        handleAvatarError() {
            this.$emit("error");
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type.substring(0, 5) === "image";
            const isLt2M = file.size / 1024 / 1024 < 5;

            if (!isJPG) {
                this.$message.error("上传图片支持jpg、png、jpeg!");
            } else if (!isLt2M) {
                this.$message.error("上传图片大小不能超过 5MB!");
            } else {
                this.$emit("before", file);
            }
            return isJPG && isLt2M;
        },
        showMask() {
            if (this.imageUrl) {
                this.uploadNew = !this.uploadNew;
            }
        }
    }
};
</script>

<style lang="less" scoped>
.avatar-uploader {
    overflow: hidden;
    position: relative;
    float: left;
    width: 270px;
    height: 168px;
    margin-right: 30px;
    border: 1px dashed #f0f4ff;
    border-radius: 6px;
    background: #f0f4ff;
    img {
        position: relative;
        z-index: 8;
    }
    .avatar-uploader-icon {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        width: 270px;
        height: 168px;
        &::before {
            content: "";
        }
    }
    .avatar-cont {
        position: absolute;
        left: 0;
        top: 0;
        width: 270px;
        height: 168px;
        span {
            display: block;
            line-height: 24px;
            font-size: 14px;
        }
        .icon-plus {
            display: block;
            width: 50px;
            height: 50px;
            margin: 30px auto 18px;
            background: url(~assets/images/icon-plus.png) no-repeat;
            background-size: 50px 50px;
        }
    }
    .avatar {
        width: 270px;
        height: 168px;
        display: block;
    }
    .mask {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
        width: 270px;
        height: 168px;
        line-height: 168px;
        text-align: center;
        background: rgba(0, 0, 0, 0.5);
        p {
            color: #ffffff;
        }
    }
    .example-mask {
        position: absolute;
        left: 0;
        bottom: -210px;
        z-index: 6;
        width: 270px;
        height: 168px;
        border-radius: 6px;
        background: #e4dde5;
        &::before {
            content: "";
            position: absolute;
            top: -20px;
            left: 60px;
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #e4dde5;
            border-left: 10px solid transparent;
        }
    }
}
</style>
