<script setup>
import { onMounted, ref } from 'vue';
import { usePromiseStore } from '@/storage/promiseStorage';

const prop = defineProps([
    'width', 'height', 'top', 'left', 'name'
]);

const isShow = ref(false);
const exitMask = ref(false);

const promiseDelayed = new Promise((resolve, reject) => {
    setTimeout(resolve, 1000, 'promiseDelayed')
});
const sendRequestAll = usePromiseStore();
onMounted(async () => {
    try {
        const nameTemp = 'get' + prop.name.charAt(0).toUpperCase() + prop.name.slice(1)
        if (sendRequestAll[nameTemp]) {
            setTimeout(() => {
                Promise.race([sendRequestAll[nameTemp](), promiseDelayed]).then((res) => {
                    if (res === 'promiseDelayed') {
                        isShow.value = true;
                        exitMask.value = true;
                        sendRequestAll[nameTemp]().then((res) => {
                            isShow.value = false;
                            exitMask.value = false;
                        })
                    }
                });
            }, 100);
        };
    } catch (err) {
    console.error(err);
}
});
</script>

<template>
    <div class='test'
        :style="{ '--var-index-main': 100, '--var-width-main': prop.width + 'px', '--var-height-main': prop.height + 'px', '--var-top-main': prop.top - 8 + 'px', '--var-left-main': prop.left - 8 + 'px' }">
        <div :class="{ 'mask': exitMask }"></div>
        <div :class="{ 'loading': true, 'is-show': isShow }">
            <slot name='animation'></slot>
        </div>
    </div>
</template>


<style scoped>
.loading {
    position: absolute;
    display: none;
    left: calc(var(--var-width-main)/2 - 15px);
    top: calc(var(--var-height-main)/2 - 15px);
    z-index: calc(var(--var-index-main) + 1);
}

.is-show {
    display: block;
}

.mask {
    z-index: var(--var-index-main);
    position: absolute;
    left: 0;
    top: 0;
    width: var(--var-width-main);
    height: var(--var-height-main);
    font-size: 16px;
    /* IE9以下不支持rgba模式 */
    background-color: rgba(0, 0, 0, 0.2);
    /* 兼容IE8及以下 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
}

.test {
    position: absolute;
    left: 0;
    top: 0;
}
</style>