<template>
  <div class="reset-page">
    <div class="user-container">
      <div class="logo-container">
        <img src="../assets/images/logo.png" alt="logo" />
        <div class="logo-title">找回密码</div>
      </div>
      <div class="form-container">
        <el-form
          :model="resetForm"
          ref="resetFormRef"
          :rules="rules"
          size="large"
        >
          <el-form-item prop="factoryNumber">
            <el-input
              placeholder="请输入工厂号"
              v-model="resetForm.factoryNumber"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="iphone">
            <el-input v-model="resetForm.iphone" placeholder="请输入手机号">
              <template #prefix>
                <el-icon class="el-input__icon"><Iphone /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="captcha">
            <div style="width: 100%; display: flex">
              <el-input v-model="resetForm.captcha" placeholder="请输入验证码">
              </el-input>
              <el-button text type="primary">发送验证码</el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              style="width: 100%"
              size="large"
              type="primary"
              @click="handleReset"
              >下一步</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer-container">
      <span>2024 @Copyright</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { User, Iphone } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const resetFormRef = ref<FormInstance>()
interface ResetForm {
  factoryNumber: string
  iphone: string
  captcha: string
}
const resetForm = reactive<ResetForm>({
  factoryNumber: '',
  iphone: '',
  captcha: '',
})

const rules = reactive<FormRules<ResetForm>>({
  factoryNumber: [{ required: true, message: '请输入工厂号', trigger: 'blur' }],
  iphone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
})

const handleReset = async () => {
  try {
    await resetFormRef.value?.validate()
  } catch {
    return
  }
  // 登录逻辑
}
</script>
<style lang="scss" scoped>
.reset-page {
  height: 100%;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.user-container {
  width: 860px;
  height: 600px;
  background-color: #fff;
  padding: 20px;
}

.footer-container {
  text-align: center;
  margin-top: 60px;
  color: #777;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-title {
  font-size: 30px;
  color: #777;
}

.form-container {
  width: 400px;
  margin: 30px auto 0;
}
</style>
