<template>
  <div class="transfer-mask absolute left-0 top-0 wh-full z-10 bg-#FFF-90 h-full w-full" v-if="isShowMask">
    <el-button class="absolute r-4 t-4" type="info" @click="onclose" v-show="!transferLoading">关闭</el-button>
    <div class="wh-full flex-col justify-center items-center">
      <span class="absolute top-0 left-1/2 -translate-x-1/2 mt-2 text-red">数据传输中请不要刷新或关闭页面!!!</span>
      <div class="w-300px h-300px flex-col justify-center items-center" v-if="transferLoading">
        <div class="el-loading-spinner">
          <svg class="circular" viewBox="0 0 50 50">
            <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
          </svg>
        </div>
        <div class="mt-28">
          <div class="text-14px text-#999999">指令下发中请稍后... </div>
        </div>
      </div>
      <template v-else>
        <slot></slot>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">

const emit = defineEmits<{
  'close': []
}>()


defineProps<{
  transferLoading: boolean
}>()
const isShowMask = defineModel<boolean>()
function onclose() {
  emit('close')
}
</script>

<style lang="scss" scoped></style>