<script setup>
import { ref } from 'vue';
import { usePromiseStore } from '@/storage/promiseStorage';
import animation1 from './animation/animation1.vue';

const prop = defineProps([
    'width', 'height', 'top', 'left'
]);
const isShow = ref(false);
const exitMask = ref(false);
// const promise1 = new Promise((resolve, reject) => {
//     setTimeout(resolve, 1000, 'promise 1 resolved');
// });
// const promise2 = new Promise((resolve, reject) => {
//     setTimeout(resolve, 3000, 'promise 2 rejected');
// });

const promiseDelayed = new Promise((resolve, reject) => {
    setTimeout(resolve, 1000, 'promiseDelayed')
});
const sendRequestAll = usePromiseStore();
(async () => {
    try {
        for (let index in sendRequestAll) {
            if (index.slice(0, 1) === '_' || index.slice(0, 1) === '$') {
                continue;
            } else if (typeof (sendRequestAll[index]) === 'string') {
                continue;
            } else if (index.slice(0, 3) === 'set') {

            } else if (index.slice(0, 3) === 'get') {
                setTimeout(() => {
                    Promise.race([sendRequestAll[index](), promiseDelayed]).then((res) => {
                        if (res === 'promiseDelayed') {
                            isShow.value = true;
                            exitMask.value = true;
                            sendRequestAll[index]().then((res) => {
                                isShow.value = false;
                                exitMask.value = false;
                            })
                        }
                    });
                }, 1000);
            }
            console.log(index);
        }
        // let result = await Promise.race([promise1, promise2, promiseDelayed]);
        // if (result === 'promise 1 resolved') {
        //     for(let index in prop){
        //         console.log(prop[index]);
        //     }
        //     isShow.value = true;
        //     exitMask.value = true;
        //     console.log("please wait...")
        // }
        // promise2.then((res) => {
        //     isShow.value = false;
        //     exitMask.value = false;
        //     console.log(res);
        // })
        // console.log(result);

    } 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-left-main) + var(--var-width-main)/2 - 15px);
    top: calc(var(--var-top-main) + 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: var(--var-left-main);
    top: var(--var-top-main);
    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: relative;
}
</style>