<template>
    <div class="upload-wrap">
        <el-upload
            v-model:file-list="fileList"
            action="#"
            :limit="3"
            :http-request="uploading"
            :auto-upload="true"
            list-type="picture-card"
            class="upload"
        >
            <el-icon><Plus /></el-icon>
            <template #file="{ file }">
                <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                            <img src="@/assets/images/components/close.png" alt="" />
                        </span>
                    </span>
                </div>
            </template>
        </el-upload>
    </div>
</template>

<script setup>
import { onMounted, ref} from "vue";
import eventBus from "@/api/eventBus";
import { base_img_url2 } from "@/api/config";
import { getFileExt } from "@/utils/util";
import UploadFile from "@/utils/upliadFile";
// import { useStore } from "vuex";

// const props = defineProps({
 
// })

// const store = useStore();
// const miniUserId = store.state.home.miniUserId;
const miniUserId = 81881;

//上传照片
const fileList = ref([]);
const imgArr = ref([])
const uploadFileObj = new UploadFile();
//上传中
const uploading = (option) => {
    let file = option.file;
    let ext = getFileExt(file.name);
    let key = `birdseye-look-mini/${miniUserId}/${new Date().getTime()}.${ext}`;
    uploadFileObj.put(key, file).then((resFilename) => {
        let index = fileList.value.findIndex((item) => item.name == file.name);
        fileList.value[index].url = base_img_url2 + resFilename;
        imgArr.value[index] = resFilename
        eventBus.emit('upload:change',fileList.value)
        eventBus.emit('upload:changeArr',imgArr.value)
    });
};

//删除图片
const handleRemove = (uploadFile) => {
    const index = fileList.value.findIndex((f) => f.uid === uploadFile.uid); // 通过 uid 来识别
    if (index !== -1) {
        fileList.value.splice(index, 1);
        imgArr.value.splice(index, 1);
        eventBus.emit('upload:change',fileList.value)
        eventBus.emit('upload:changeArr',imgArr.value)
    }
};

function uploadReset(){
    fileList.value = []
    imgArr.value = []
}

onMounted(()=>{
    eventBus.off('upload:reset',uploadReset)
    eventBus.on('upload:reset',uploadReset)
})
</script>

<style lang="scss" scoped>
.upload-wrap {
    ::v-deep {
        .el-select__wrapper:hover {
            box-shadow: 0 0 0 1px #dcdfe6 inset;
        }
    }
    .upload {
        position: relative;
        .el-upload-list__item-delete {
            position: absolute;
            display: block;
            right: -8px;
            top: -10px;
            img {
                width: 22px;
            }
        }
        .el-upload-list--picture-card .el-upload-list__item-actions {
            opacity: 1;
            background-color: transparent;
        }
        ::v-deep {
            .el-upload--picture-card {
                width: 70px;
                height: 70px;
            }
            .el-upload-list--picture-card .el-upload-list__item {
                width: 70px;
                height: 70px;
                overflow: visible;
                margin-bottom: 0;
            }
            .el-upload-list--picture-card .el-upload-list__item-thumbnail {
                width: 70px;
                height: 70px;
                object-fit: cover;
            }
        }
    }
}
</style>
