<template>
  <div class="flex items-center justify-center h-screen bg-gray-50">
    <div class="flex w-full sm:w-[32rem] shadow bg-white lg:rounded-lg">
      <div class="w-full pt-6 pb-6 pl-4 pr-4 mx-auto">
        <div class="flex mt-2">
          <img :src="logo" class="w-8 mx-auto" />
        </div>
        <el-divider>找回密码</el-divider>
        <div>
          <el-form ref="form" :model="params" status-icon v-loading.fullscreen.lock="loading" :rules="rules"
            element-loading-background="rgba(0, 0, 0, 0.7)" label-width="70px"
            class="w-11/12 pt-2 mx-auto space-y-8 sm:w-4/5">
            <el-form-item prop="email">
              <el-input v-model="params.email" clearable type="email" autocomplete="off" placeholder="邮箱" size="large"
                :prefix-icon="Message" class="h-12 text-base" />
            </el-form-item>
            <el-form-item prop="code">
              <el-input v-model.number="params.code" clearable autocomplete="off" placeholder="验证码" size="large"
                :prefix-icon="Key" class="h-12 text-base">
                <template #append>
                  <span v-if="isShowTimer" class="font-semibold">{{ timer }}</span>
                  <span v-else class="font-semibold cursor-pointer" @click="sendCodeChange">点击发送验证码</span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="params.password" clearable type="password" autocomplete="new-password" size="large"
                placeholder="密码" show-password :prefix-icon="Lock" class="h-12 text-base" />
            </el-form-item>
            <el-form-item prop="password_confirmation">
              <el-input v-model="params.password_confirmation" clearable type="password" autocomplete="new-password"
                size="large" placeholder="确认密码" show-password :prefix-icon="Lock" class="h-12 text-base" />
            </el-form-item>
          </el-form>
        </div>
        <div class="flex items-center justify-center w-11/12 mx-auto mt-5 sm:w-4/5 aligin-">
          <el-button type="primary" @click="$router.back()" size="large" class="w-5/12 text-xl">
            取消
          </el-button>
          <el-button type="danger" @click="submit(form)" size="large" class="w-5/12 text-xl">
            找回密码
          </el-button>
        </div>

        <div class="w-full mt-8 mb-10 text-sm text-center text-gray-400">{{ $t('system.name') }} @copyright 2018-{{ new
          Date().getFullYear() }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Lock, Message, Key } from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import { useFind } from './find'
import logo from '@/assets/logo.png'
import { sendCode } from '@/api/auth/index'
import { ElMessage } from 'element-plus'
const { params, loading, submit, form, rules } = useFind()
const timer = ref(60)
const isShowTimer = ref(false)
const sendCodeChange = () => {
  const regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
  if (params.value.email && regEmail.test(params.value.email)) {
    sendCode({ email: params.value.email }).then(res => {
      ElMessage.success(res.data.message)
      isShowTimer.value = true
      timer.value = 60
      const timerInterval = setInterval(() => {
        timer.value--
        if (timer.value <= 1) {
          isShowTimer.value = false
          clearInterval(timerInterval)
        }
      }, 1000)
    })
  } else {
    ElMessage.warning('请检查邮箱是否输入正确')
  }
}
// set default color-theme light
onMounted(() => {
  document.querySelector('html')?.setAttribute('class', 'light')
})
</script>

<style lang="scss" scoped>
:deep(.el-form-item__content) {
  margin-left: 0 !important;
}

:deep(.el-divider__text) {
  @apply text-xl text-slate-400;
}
</style>
