<template>
  <el-form
    ref="loginRef"
    :model="loginForm"
    :rules="loginRules"
  >
    <el-form-item prop="username">
      <el-input
        v-model.trim="loginForm.username"
        type="text"
        size="large"
        auto-complete="off"
        placeholder="账号"
      >
        <template #prefix><svg-icon
          icon-class="user"
          class="el-input__icon input-icon"
        /></template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model.trim="loginForm.password"
        type="password"
        size="large"
        auto-complete="off"
        placeholder="密码"
        @keyup.enter="handleLogin"
      >
        <template #prefix><svg-icon
          icon-class="password"
          class="el-input__icon input-icon"
        /></template>
      </el-input>
    </el-form-item>
    <el-form-item prop="code">
      <captcha ref="codeRef" v-model="loginForm.code" v-model:uuid="loginForm.uuid" @keyup.enter="handleLogin" />
    </el-form-item>
    <el-form-item style="height: 20px;">
      <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
      <el-button style="margin-left: auto;" type="primary" link @click="forgetPassword">忘记密码</el-button>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button
        :loading="loading"
        size="large"
        type="success"
        style="width: 100%;border:0"
        @click.prevent="handleLogin"
      >
        <span v-if="!loading">登 录</span>
        <span v-else>登 录 中...</span>
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>

import { onMounted, ref } from 'vue'
import Cookies from 'js-cookie'
import { decrypt, encrypt } from '@/utils/jsencrypt'
import { getCurrentInstance } from '@vue/runtime-core'
import useUserStore from '@/store/modules/user'
import Captcha from './captcha'

const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const emit = defineEmits(['submit', 'forgetPassword'])
const loading = ref(false)

onMounted(() => {
  if (import.meta.env.DEV) {
    loginForm.value.username = 'admin'
    loginForm.value.password = '123456'
  }
})

const loginForm = ref({
  username: '',
  password: '',
  rememberMe: false,
  code: '',
  uuid: ''
})

const loginRules = {
  username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
  password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
  code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
}

function handleLogin() {
  proxy.$refs['loginRef'].validate((valid) => {
    if (valid) {
      loading.value = true
      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
      if (loginForm.value.rememberMe) {
        Cookies.set('username', loginForm.value.username, { expires: 30 })
        Cookies.set('password', encrypt(loginForm.value.password), { expires: 30 })
        Cookies.set('rememberMe', loginForm.value.rememberMe, { expires: 30 })
      } else {
        // 否则移除
        Cookies.remove('username')
        Cookies.remove('password')
        Cookies.remove('rememberMe')
      }
      // 调用action的登录方法
      userStore
        .login(loginForm.value)
        .then(() => {
          emit('submit')
        })
        .catch(() => {
          loading.value = false
          // 重新获取验证码
          proxy.$refs['codeRef'].getCode()
        })
    }
  })
}

function getCookie() {
  const username = Cookies.get('username')
  const password = Cookies.get('password')
  const rememberMe = Cookies.get('rememberMe')
  loginForm.value = {
    username: username === undefined ? loginForm.value.username : username,
    password: password === undefined ? loginForm.value.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
  }
}

function forgetPassword() {
  emit('forgetPassword')
}
getCookie()

</script>

<style lang="scss" scoped>

</style>