<template>
  <Teleport to="body">
    <Transition
      enter-active-class="transition-opacity duration-300 ease-out"
      leave-active-class="transition-opacity duration-300 ease-in"
      enter-from-class="opacity-0"
      leave-to-class="opacity-0"
    >
      <div
        v-if="visible"
        class="fixed inset-0 z-9999 flex items-center justify-center p-4 isolate backdrop-blur-20px"
        @click.stop
        @keydown.stop
      >
        <div class="absolute inset-0 bg-black/45 backdrop-saturate-150" aria-hidden="true" />

        <div
          class="relative bg-white rounded-2xl max-w-full w-90 shadow-[0_8px_30px_rgba(100,116,180,0.16),0_2px_6px_rgba(0,0,0,0.04)]"
        >
          <div class="px-6 py-6">
            <div
              class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-red-50"
            >
              <svg
                class="w-6 h-6 text-red-500"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <circle cx="12" cy="12" r="10" />
                <line x1="12" y1="8" x2="12" y2="12" />
                <line x1="12" y1="16" x2="12.01" y2="16" />
              </svg>
            </div>

            <h3 class="text-center text-base font-600 text-gray-800 leading-6">
              {{ title }}
            </h3>

            <p class="mt-2 text-center text-13px text-gray-500 leading-5">
              {{ messgae }}
            </p>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
const { title = '登录异常' } = defineProps<{
  title?: string
}>()

const messgae =
  '检测到未登录或者登录错误，' + import.meta.env.MODE === 'production'
    ? '请关闭标签页，从企微工作台或分享/消息链接重新打开应用'
    : '请关闭网页或重新打开网页携带code'

const visible = defineModel<boolean>({ default: false })
onMounted(() => {
  visible.value = true
})
</script>
