<script lang="ts" setup>
import { ref } from 'vue';
import { useConfig } from '@/store/modules/asideConfig'

const emit = defineEmits<{
  (e: 'closeCallback', value: any),
}>()


const show = ref(false)

const stys = {
  'width': '424px',
  'height': '232px',
  '--n-padding-bottom': '20px',
  '--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
  emit('closeCallback', true)
}

function closeOnlyModal() {
  show.value = false
}

defineExpose({
  showModal,
  closeModal,
  closeOnlyModal,
})

const configStore = useConfig()
const percent = ref(0);

configStore.$subscribe(() => {
  percent.value = configStore.getTimeNum;
});

</script>

<template>
  <n-modal v-model:show="show" :mask-closable="false" :show-mask="false" transform-origin="center">
    <n-card :style="stys" :bordered="false" role="dialog" aria-modal="true">
      <svg-icon size="15" name="close" @click="closeModal" style="position:absolute; right:6px;top:6px;cursor: pointer;"/>
      <div class="wrapper">
        <svg-icon size="90" name="robot2" />
        <span style="margin-top: 24px;">正在查重中</span>
      </div>
      <div style="padding: 0 20px;">
        <n-progress type="line" :percentage="percent" :show-indicator="false"/>
      </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>
