<template>
  <div id="signin" v-loading="loading">
    <div class="title">
      <i class="el-icon-lock"></i>
      <span v-t="'forget.title'"></span>
    </div>
    <el-form :model="params" :rules="rules" ref="paramsFormRef" label-width="0" class="form">
      <el-form-item prop="email">
        <el-input
          class="m-input"
          :prefix-icon="Message"
          v-model.trim="params.email"
          :placeholder="$t('forget.form')"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" class="s-btn" @click="send">
          {{ $t('forget.forget') }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button class="s-btn" @click="cancel">
          {{ $t('forget.cancel') }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed, getCurrentInstance, inject } from 'vue'
  import { useRouter } from 'vue-router'
  import { useI18n } from 'vue-i18n'
  import { Message } from '@element-plus/icons-vue'
  import Service from '@/service/login'
  import Config from '@/config'

  const { Code } = Config
  const router = useRouter()
  const { t } = useI18n()
  const { proxy } = getCurrentInstance()

  // 引入全局弹窗
  const pigeon = inject('pigeon')

  // 响应式数据
  const loading = ref(false)
  const params = reactive({
    email: '',
  })

  const paramsFormRef = ref()

  // 验证规则
  const rules = reactive({
    email: [
      {
        validator: (rule, value, callback) => {
          if (Config.Pattern.Email.test(value)) {
            callback()
          } else {
            callback(new Error(t('vaildate.email.format')))
          }
        },
        trigger: 'blur',
      },
    ],
  })

  // 方法
  const send = async () => {
    if (!paramsFormRef.value) return

    try {
      const valid = await paramsFormRef.value.validate()
      if (!valid) return

      const res = await Service.forgetPwd(params)
      if (res.code === Code.StatusOK) {
        loading.value = true
        // 使用自定义消息组件
        pigeon.MessageOK(res.msg)
        setTimeout(() => {
          loading.value = false
          router.push({ path: '/signin' }).catch((err) => console.log(err))
        }, 1000)
      } else {
        pigeon.MessageError(res.msg)
      }
    } catch (error) {
      console.error('发送失败:', error)
    }
  }

  const cancel = () => {
    router.push({ path: '/signin' }).catch((err) => console.log(err))
  }
</script>

<style lang="scss" scoped>
  #signin {
    width: 540px;
    height: auto;
    margin: auto;
    border-top: 2px solid;
    @include border_red_1();
    @include bg_white();
    .title {
      padding: 32px 0;
      margin-bottom: 30px;
      font-size: 24px;
      font-weight: bolder;
      i {
        margin-right: 10px;
      }
    }
    .form {
      padding: 20px 80px;
      .forget {
        text-align: center;
        text-decoration: underline;
        margin: 100px 0;
        @include font_red_1();
        font-weight: bold;
        a {
          @include font_red_1();
        }
      }
      .words {
        // margin-top: 20px;
        text-align: left;
        line-height: 24px;
        a {
          margin-left: 1em;
          @include font_main();
        }
      }
      .s-btn {
        width: 100%;
      }
    }
  }
</style>

<style lang="scss">
  #signin {
    .el-input__wrapper {
      border: none;
      border-bottom: 1px solid;
      border-radius: 0;
      box-shadow: none;
      @include border_gray_1();
    }
    .el-form-item {
      margin-bottom: 40px;
    }
    .el-form-item__content {
      line-height: initial !important;
    }
    .el-input__prefix,
    .el-input__suffix {
      @include font_gray_content_1();
    }
    .s-btn.el-button--danger {
      @include bg_red_1();
    }
  }
</style>
