<script setup lang="ts">
const dialogVisible = ref(false)

const openDialog = () => {
  dialogVisible.value = true
}
const emit = defineEmits<{
  forgetPassword: []
}>()
const handleForgetPassword = () => {
  emit('forgetPassword')
  dialogVisible.value = false
}
defineExpose({
  openDialog
})
</script>

<template>
  <el-dialog v-model="dialogVisible" top="25vh" :width="480" class="error-tips" :center="true">
    <img style="margin-bottom: 8px" src="../image/error-tips.png" alt="" />
    <p class="blod-tips">Oops, too many tries!</p>
    <p>You have exceeded the maximum number of password attempts.</p>
    <p>
      Please try again in 5 minutes or click <a @click="handleForgetPassword">Forget Password</a> to
      reset.
    </p>
    <template #footer>
      <el-button
        class="el-button--dark"
        @click="dialogVisible = false"
        style="height: 40px; padding: 8px 30px"
        >OK</el-button
      >
    </template>
  </el-dialog>
</template>

<style lang="scss">
.error-tips {
  text-align: center;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 32px 32px 24px;
    text-align: center;
  }
  .blod-tips {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  p {
    & > a {
      text-decoration: underline;
      color: var(--color-theme);
      cursor: pointer;
    }
  }
  &.el-dialog--center .el-dialog__footer {
    padding-right: 0;
  }
}
</style>
