<template>
    <div class="upload-image">
        <el-upload :headers="$getElUploadHeaders()"  list-type="picture-card"
            :action="uploadUrl"
            :data="{ customerId: customerId }"
            :file-list="fileList"
            :limit="limit"
            :on-success="(res, file) => handleImgSuccess(res, file)"
            :on-error="(res, file) => handleImgError(res, file)"
            :on-remove="(res) => handleImgRemove(res)"
            :on-exceed="(res) => handleImgExceed(res)"
            :before-upload="(file) => beforeImgUpload(file)"
            accept="image/jpg,image/jpeg,image/png">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        limit: {
            type: Number,
            default: 3
        },
        rowIndex: {
            type: Number,
            default: 0
        },
        defaultFileList: {
            type: Array
        }
    },
    watch: {
        defaultFileList: {
            handler (newVal) {
                newVal.forEach(item => {
                    item.url = item.fileUrl
                })
                this.fileList = newVal
            },
            deep: true,
            immediate: true          
        }

    },
    data () {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            uploadUrl: `${window.SITE_CONFIG['apiURL']}/oss/file/uploadqrcodeV2`,
            customerId: localStorage.getItem("customerId"),
            fileList: [],
            imageUrls: []
        }
    },
    created() {
        console.log('xxxxxx', this.rowIndex)
    },
    methods: {
        handleRemove(file) {
            const delFile = file.url
            this.fileList.forEach((item, key) => {
                if (delFile == item.url) {
                    this.fileList.splice(key, 1)
                }
            })
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        beforeImgUpload(file) {
            // console.log(file)
        },
        handleImgExceed(res) {
            console.log(res)
            this.$message({
              type: "warning",
              message: `文件数量最多不超过${this.limit}个`,
            })
        },
        handleImgRemove(file) {
            console.log("handleImgRemove", file)
        },
        handleImgSuccess(res, file) {
            // console.log("handleImgSuccess", res, file)
            if (res.code === 0 && res.msg === "success") {
                this.fileList.push(file)
                this.$emit('change', this.fileList, this.rowIndex)
            } else {
                this.$message.error(res.msg)
            }
        },

        handleImgError(res, file) {
            console.log(res)
        },
    }
}
</script>
<style lang="scss" scoped>
.upload-image {
    // min-width: 120px;
    // height: 80px;
}
/deep/ .el-upload--picture-card {
    width: 60px;
    height: 60px;
    line-height: 70px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item {
    width: 60px;
    height: 60px;
}
</style>
