<template>
  <section class="login-container">
    <el-form class="login-form" ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
      <div class="title-container">
        <h3 class="title">用户登录</h3>
      </div>
      <el-form-item prop="account">
        <el-input
          v-model="loginForm.account"
          placeholder="请输入用户名"
          name="account"
          type="text"
          clearable>
          <template #prefix>
            <el-icon class="el-input__icon"><def-icon icon="user" /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          placeholder="请输入密码"
          name="password"
          type="password"
          @keyup.enter="submitForm"
          clearable>
          <template #prefix>
            <el-icon class="el-input__icon"><def-icon icon="lock" /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-checkbox
        v-model="loginForm.isRemember"
        label="记住我"
        @keyup.enter="submitForm"></el-checkbox>
      <div class="form-btn">
        <el-button type="primary" size="large" @click="submitForm">登录</el-button>
        <el-button size="large" @click="resetForm">重置</el-button>
      </div>
      <h1 style="margin: 20px 0">{{ loginForm }}</h1>
    </el-form>
  </section>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus/es'
import { useUserStore } from '@/store/user'
import { useCrypto } from '@/utils'

const userStore = useUserStore()
// 定义数据
const loginForm = ref(
  { ...userStore.loginForm } || {
    account: '',
    password: '',
    isRemember: false
  }
)
// 获取登录表单实例
const loginFormRef = ref<FormInstance>()
// 登录表单验证规则
const loginFormRules = reactive<FormRules>({
  account: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, message: '用户名长度必须大于3', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 3, message: '密码长度必须大于3', trigger: 'blur' }
  ]
})
// 密码解密
const passwordDecrypt = () => {
  loginForm.value.password &&
    (loginForm.value.password = useCrypto.decrypt(loginForm.value.password, 'user'))
}
// 登录前解密
passwordDecrypt()

// 提交登录
const submitForm = () => {
  if (!loginFormRef.value) return
  loginFormRef.value.validate((valid, fields) => {
    if (valid) {
      // 登录时解密
      // passwordDecrypt()
      // 登录
      userStore.loginAction(loginForm.value)
    } else {
      console.log('error login!', fields)
    }
  })
}
// 重置表单
const resetForm = () => {
  if (!loginFormRef.value) return
  loginFormRef.value.resetFields()
  loginForm.value = {
    account: '',
    password: '',
    isRemember: false
  }
}
</script>

<style scoped lang="scss">
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
$cursor: #fff;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;
  position: relative;

  .login-form {
    @include posCenterXY;
    top: 40%;
    width: 520px;
    max-width: 100%;
    //padding: 160px 35px 0;
    //margin: 0 auto;
    overflow: hidden;
    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        color: $light_gray;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }
    ::v-deep(.el-form-item) {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
      margin-bottom: 20px;
      .el-input {
        display: inline-block;
        height: 47px;
        .el-input__wrapper {
          width: 100%;
          background: transparent;
          border: none;
          padding: 0 20px;
          .el-input__inner {
            -webkit-appearance: none;
            color: $light_gray;
            height: 47px;
            caret-color: $cursor;
          }
        }
      }
    }
    .el-checkbox {
      color: $light_gray;
      padding-left: 10px;
      margin-bottom: 20px;
    }
    .form-btn {
      @include flexRowSa;
      .el-button {
        flex: 1;
        &:first-of-type {
          margin-right: 15%;
        }
      }
    }
  }
}
</style>
