<template>
  <div class="login-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
          ref="loginFormRef"
          :model="loginForm"
          :rules="rules"
          size="large"
        >
          <el-form-item prop="factoryCode">
            <el-input
              v-model="loginForm.factoryCode"
              placeholder="请输入工厂编码"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><Box /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="account">
            <el-input v-model="loginForm.account" placeholder="请输入账号">
              <template #prefix>
                <el-icon class="el-input__icon"><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              show-password
              placeholder="请输入密码"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              :loading="loading"
              style="width: 100%"
              size="large"
              type="primary"
              @click="handleLogin"
              >登录</el-button
            >
          </el-form-item>
          <el-form-item>
            <div style="width: 100%; text-align: right">
              <a
                href="/user/reset"
                style="text-decoration: none; color: #409eff"
                >忘记密码</a
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="footer-container">
      <span>2024 @Copyright</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { User, Box, Lock } from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue'
import { LoginReq } from '@/types/api/auth'
import type { FormInstance, FormRules } from 'element-plus'
import useUserStore from '@/store/user'
const loginFormRef = ref<FormInstance>()

const loginForm = reactive<LoginReq>({
  factoryCode: '',
  account: '',
  password: '',
})
const loading = ref(false)

const rules = reactive<FormRules<LoginReq>>({
  factoryCode: [{ required: true, message: '请输入工厂编码', trigger: 'blur' }],
  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})
const userStore = useUserStore()
onMounted(() => {
  const saveCode: string | null = localStorage.getItem('factory_code')
  loginForm.factoryCode = saveCode ?? ''
})
const handleLogin = async () => {
  try {
    await loginFormRef.value?.validate()
  } catch {
    return
  }
  // 登录逻辑
  try {
    loading.value = true
    await userStore.login(loginForm)
    if (loginForm.factoryCode) {
      localStorage.setItem('factory_code', String(loginForm.factoryCode))
    }
  } catch (error) {
    // showError(error)
  } finally {
    loading.value = false
  }
}
</script>
<style lang="scss" scoped>
.login-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>
