<template>
    <div class="loading-container" v-if="show">
        <l-dot-spinner size="60" speed="0.9" :color="color" ></l-dot-spinner>
    </div>
</template>

<script setup name="HtfxLoading">

const props = defineProps({
    color: {
        type: String,
        default: "rgba(15,54,117,1)"
    }
})

const show = ref(false);

const showLoading = () => {
    show.value = true;
    document.body.style.overflow = "hidden";
    document.addEventListener("touchmove", () => { }, true);
};
const hideLoading = () => {
    show.value = false;
    var mo = function (e) {
        e.preventDefault();
    };
    document.body.style.overflow = "";
    document.removeEventListener("touchmove", mo, true);
};

onMounted(() => { });

defineExpose({
    show,
    showLoading,
    hideLoading,
});
</script>

<style scoped>
.loading-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background-color: rgba(255, 255, 255, .9);
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>