<template>
  <Dialog :open="isOpen" @update:open="setOpen">
    <DialogContent
      @pointer-down-outside="(event) => event.preventDefault()"
      @focus-outside="(event) => event.preventDefault()"
      class="max-w-[300px] rounded-4xl bg-[#DDDDDD] p-[14px] md:max-w-[390px]"
      :showCloseButton="false"
    >
      <DialogHeader class="py-2 pl-2">
        <DialogTitle class="text-left text-base md:text-2xl">登录Hi快帐户</DialogTitle>
        <DialogDescription class="text-left text-base text-black md:text-2xl">
          如使用新邮箱地址，将自动为您创建Hi快帐户
        </DialogDescription>
      </DialogHeader>
      <LoginForm @close="isOpen = false" />
    </DialogContent>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import LoginForm from './LoginForm.vue'

const isOpen = ref(false)

const setOpen = (value: boolean) => {
  isOpen.value = value
}

const show = () => {
  isOpen.value = true
}

const hide = () => {
  isOpen.value = false
}

defineExpose({
  show,
  hide,
})
</script>
