<template>
    <div> </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, reactive, onUnmounted } from "vue";
import { RouterView, RouterLink } from "vue-router";
import { request, uploadFile } from "@/utils/request";
import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus";
import icon from "@/assets/img/icon.png";
let emit = defineEmits(['fileLoadeState'])
let imggifs = ref(icon);
let visiable = ref(false)
let files = ref([]);
const props = defineProps({ fileurls: Array });
onMounted(() => {
    init();
});
const handleClose = () => {

}
const loadsucess = (data) => {

}
const loaderror = (err) => {

    console.error('An error happened');
}
const init = () => {

    if (props.fileurls === undefined) return;
    files.value = [];
    props.fileurls.forEach(url => {
        let names = url.split("/");
        let name = names[names.length - 1];
        let file = {
            url: url,
            name: name,
            percentage: 0,
        }
        files.value.push(file);
        loader.load(
            url,
            function (xhr) {
                visiable.value = true
                file.percentage = Math.floor(xhr.loaded / xhr.total * 100)
            },
        )
    })
}
const load = (url) => {
    if (!props.fileurls.includes(url)) {
        props.fileurls.push(url);
    }
    init();
}
watch(
    files,
    (newVal, oldVal) => {
     emit("fileLoadeState", newVal);
    },
    {
        deep: true,
        immediate: false,
    }); //深度监视
</script>
<style scoped>
.lodingimg {
    width: 200px;
    height: 150px;

}

.img {
    width: 100%;
    height: 100%;
    margin-top: -40px;
}

.loding {
    width: 100%;
    text-align: center;

    position: absolute;
    bottom: 0;
    text-align: center;
}

.lodgright .el-col {
    padding: 10px 0;

}

.lgleft {
    position: relative;
    overflow: hidden;

}

.lodgright {
    padding: 10px 5px;

}

.lgcoent {
    padding-bottom: 10px;
}
</style>