<script lang="ts" setup>
import { ref } from 'vue'

const show = ref(false)

const stys = {
  'width': '424px',
  'height': '192px',
  '--n-padding-bottom': '0px',
  '--n-padding-left': '0px',
  'background': 'linear-gradient(132deg, rgba(255, 255, 255, 0.32) 21%, rgba(152, 172, 255, 0.14) 100%)',
  'border-radius': '4px',
  'box-shadow': '0px 12px 48px 16px rgba(0, 0, 0, 0.03)',
  'backdrop-filter': ' blur(10px)',
}

function showModal() {
  show.value = true
}

function closeModal() {
  show.value = false
}

defineExpose({
  showModal,
  closeModal,
})
</script>

<template>
  <n-modal v-model:show="show" :mask-closable="false" transform-origin="center">
    <n-card :style="stys" :bordered="false" role="dialog" aria-modal="true">
      <div class="wrapper">
        <svg-icon size="90" name="robot2" />
        <span style="margin-top: 24px;">正在处理中，请勿离开当前页面！</span>
      </div>
    </n-card>
  </n-modal>
</template>

<style lang="less" scoped>
.wrapper {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
