<!--  -->
<template>
  <div v-if="isShow" class="absolute inset-0 w-full h-full overflow-hidden z-[3] bg-[rgba(255,255,255,0.8)]">
    <div class="flex flex-col justify-center items-center absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <wd-loading :color="theme.colors.primary" />
      <div class="mt-[2rpx] text-[25rpx]">
        {{tip}}
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import WdLoading from "@/uni_modules/wot-design-uni/components/wd-loading/wd-loading.vue";
import {theme} from "@/config/theme";

const props = defineProps({
  tip: {
    type: String,
    default() {
      return "加载中...";
    },
  },
  maskBackground: {
    type: String,
    default() {
      return "rgba(255, 255, 255, 0.8)";
    },
  },
  loadingColor: {
    type: String,
    default() {
      return "rgba(255, 255, 255, 1)";
    },
  },
  textColor: {
    type: String,
    default() {
      return "rgba(255, 255, 255, 1)";
    },
  },
});

const isShow = ref(false);
const show = () => {
  isShow.value = true;
};
const hide = () => {
  isShow.value = false;
};
defineExpose({
  show,
  hide,
  isShow,
});
</script>

