<template>
    <div class="ps-uploader-image">
        <div
            class="ps-upload-img--item"
            v-for="(item, index) in currentFileList"
            :key="index"
        >
            <img :src="item.url" />
            <div class="ps-upload-model">
                <i
                    class="el-icon-delete"
                    @click="operaDeleteImage(index)"
                ></i>
            </div>
        </div>

        <el-upload
            v-if="currentFileList.length < limit"
            :action="action"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleSuccess"
            :before-upload="beforeAvatarUpload"
            :on-remove="handleRemove"
            :limit="limit"
            :data="data"
            :name="fileName"
        >
            <div class="ps-upload-img--item">
                <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
        </el-upload>
        <div class="ps-upload-content">
            <template v-if="$slots.tip">
                <slot name="tip"></slot>
            </template>
            <template v-else>
                {{ showFileTypeConent }}
            </template>
        </div>
    </div>
</template>

<script>
export default {
    name: "PsUploadImage",
    props: {
        limit: {
            type: Number,
            default: 1,
        },
        size: {
            type: Number,
            default: 2,
        },
        fileType: {
            type: Array,
            default: () => ["png", "jpg", "jpeg"],
        },
        action: {
            type: String,
            default: "",
        },
        headers: {
            type: Object,
            default: () => {},
        },
        data: {
            type: Object,
            default: () => {},
        },
        fileName: {
            type: String,
            default: null,
        },

        successCode: {
            type: String,
            default: "0000",
        },
        fileList: {
            type: Array,
            default: () => [{ url: "123213213123" }],
        },
    },
    data() {
        return {
            imageType: [
                { key: "png", type: "image/png" },
                { key: "jpg", type: "image/jpg" },
                { key: "jpeg", type: "image/jpeg" },
                { key: "gif", type: "image/gif" },
            ],
            imgList: [],
        };
    },

    computed: {
        showFileTypeConent() {
            return `仅支持 ${this.fileType.join(
                " / "
            )} 类型的文件，单个文件大小最大为${this.size}MB，最多上传${
                this.limit
            }张`;
        },
        currentFileList: {
            get: function () {
                return this.fileList;
            },
            set: function () {},
        },
    },

    methods: {
        beforeAvatarUpload(file) {
            console.log(file);
            let imageTypeArr = [];
            this.fileType.forEach((el) => {
                this.imageType.forEach((vals) => {
                    if (el === vals.key) {
                        imageTypeArr.push(vals.type);
                    }
                });
            });
            const isIMAGE = imageTypeArr.join(",").indexOf(file.type) > -1;
            const isLt2M = file.size / 1024 / 1024 < this.size;

            if (!isIMAGE) {
                this.$message.error(
                    `上传图片只能是 ${this.fileType.join("/")} 格式!`
                );
                return false;
            }
            if (!isLt2M) {
                this.$message.error(`上传图片大小不能超过 ${this.size}MB!`);
                return false;
            }
            return isIMAGE && isLt2M;
        },
        handleSuccess(res, file, fileList) {
            if (res.code == this.successCode) {
                this.$emit("success", res.data, file, fileList);
            } else {
                this.currentFileList = fileList.findIndex(
                    (item) => item.uid !== file.uid
                );
                if (res.msg) {
                    this.showErrorMsg(res.msg);
                } else {
                    this.showErrorMsg("上传失败");
                }
                this.$emit("error", res, file, this.currentFileList);
            }
        },
        operaDeleteImage(index) {
            this.currentFileList.splice(index, 1);
            this.$emit("change", this.currentFileList);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
    },
};
</script>

<style>
.ps-uploader-image {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.ps-uploader-image .ps-upload-img--item {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 16px 16px 0;
    width: 160px;
    height: 160px;
    font-size: 20px;
    color: #999999;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #dcdfe6;
}

.ps-uploader-image .ps-upload-img--item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.ps-uploader-image .ps-upload-content {
    width: 100%;
    font-size: 12px;
    color: #666666;
}

.ps-upload-model {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.ps-uploader-image .ps-upload-img--item:hover .ps-upload-model {
    display: flex;
}

.ps-upload-model i {
    font-size: 14px;
    color: #ffffff;
    cursor: pointer;
}

.ps-uploader-image .el-upload-list--picture-card .el-progress {
    display: none;
}
</style>
