<script setup lang="ts">
import { useRouter } from 'vue-router'
const dialogVisible = ref(false)
const router = useRouter()

const openDialog = () => {
  dialogVisible.value = true
}
const handleChangePassword = () => {
  dialogVisible.value = false
  router.push({
    name: 'Reset Password',
    query: {
      firstLogin: 't'
    }
  })
}
defineExpose({
  openDialog
})
</script>

<template>
  <el-dialog v-model="dialogVisible" top="25vh" :width="480" class="error-tips" :center="true">
    <img style="margin-bottom: 18px" src="../image/first-login-tips-icon.png" alt="" />
    <p class="blod-tips">Update your password</p>
    <p>
      To make your account secure, please create a new password to replace the temporary password
      you were given in the email.
    </p>
    <template #footer>
      <el-button
        class="el-button--dark"
        @click="handleChangePassword"
        style="height: 40px; padding: 8px 30px"
        >Change Password</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>
