<template>
  <section class="login-container main-color-bg">
    <el-form
      class="login-form"
      ref="loginFormRef"
      :validate-on-rule-change="false"
      :model="loginForm"
      :rules="loginFormRules">
      <div class="title-container">
        <h3 class="title font-color">{{ $t('login.title') }}</h3>
        <NavbarLocale class="locale-container" effect="light" />
      </div>
      <el-form-item prop="account">
        <el-input
          v-model="loginForm.account"
          :placeholder="$t('login.placeholderAccount')"
          name="account"
          type="text"
          clearable>
          <template #prefix>
            <def-icon class="font-color" icon="user" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          :placeholder="$t('login.placeholderPassword')"
          name="password"
          type="password"
          @keyup.enter="submitForm"
          clearable>
          <template #prefix>
            <def-icon class="font-color" icon="lock" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item class="checkbox-container" prop="isRemember">
        <el-checkbox
          v-model="loginForm.isRemember"
          :label="$t('login.passwordRemember')"
          @keyup.enter="submitForm"></el-checkbox>
      </el-form-item>
      <div class="form-btn">
        <el-button type="primary" size="large" @click="submitForm">
          {{ $t('login.buttonLogin') }}
        </el-button>
        <el-button size="large" @click="resetForm">{{ $t('login.buttonReset') }}</el-button>
      </div>
      <h1 style="margin: 20px 0">{{ loginForm }}</h1>
    </el-form>
  </section>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus/es'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus/es'
// import { useLayoutStore } from '@/store/layout'
import { useUserStore } from '@/store/user'
import { useThemeStore } from '@/store/theme'
import { storeToRefs } from 'pinia'
import NavbarLocale from '@/layout/components/LayoutHeader/components/HeaderNavbar/components/NavbarLocale.vue'

const { t, locale } = useI18n()

// const layoutStore = useLayoutStore()
const userStore = useUserStore()
const themeStore = useThemeStore()

// const { mainColor, fontColor, fontColorActive } = storeToRefs(themeStore)
const { fontColor, fontColorActive } = storeToRefs(themeStore)

const loginForm = reactive({
  account: '',
  password: '',
  isRemember: false
})
// 获取登录表单实例
const loginFormRef = ref<FormInstance>()

/* 特殊处理表单验证规则国际化 */
watch(
  () => locale.value,
  () => {
    loginFormRules.account[0].message = t('login.ruleAccountNotNull')
    loginFormRules.account[1].message = t('login.ruleAccountMessage')
    loginFormRules.password[0].message = t('login.rulePasswordNotNull')
    loginFormRules.password[1].message = t('login.rulePasswordMessage')
  }
)
// 登录表单验证规则
const loginFormRules: any = reactive<FormRules>({
  account: [
    { required: true, message: t('login.ruleAccountNotNull'), trigger: 'blur' },
    { min: 3, message: t('login.ruleAccountMessage'), trigger: 'blur' }
  ],
  password: [
    {
      required: true,
      message: t('login.rulePasswordNotNull'),
      trigger: 'blur'
    },
    { min: 3, message: t('login.rulePasswordMessage'), trigger: 'blur' }
  ]
})

// 提交登录
const submitForm = () => {
  if (!loginFormRef.value) return
  loginFormRef.value.validate(async (valid) => {
    if (valid) {
      // 登录
      await userStore.loginAction(loginForm)
      // 获取当前用户菜单（权限）
      // await layoutStore.setCurrentUserMenuAction()
    } else {
      ElMessage.error(t('login.messageError'))
    }
  })
}
// 重置表单
const resetForm = () => {
  loginFormRef.value?.resetFields()
}
</script>

<style scoped lang="scss">
//$bg: v-bind(mainColor);
$light_gray: v-bind(fontColor);
$cursor: v-bind(fontColorActive);
.login-container {
  position: relative;
  //background-color: $bg;
  overflow: hidden;
  width: 100%;
  min-height: 100%;
  .login-form {
    @include posCenterXY;
    top: 40%;
    //padding: 160px 35px 0;
    //margin: 0 auto;
    overflow: hidden;
    width: 520px;
    max-width: 100%;
    .title-container {
      position: relative;
      .title {
        margin: 0 auto 40px;
        //color: $light_gray;
        font-size: 26px;
        text-align: center;
        font-weight: bold;
      }
      :deep(.locale-container) {
        position: absolute;
        top: 20px;
        right: 0;

        @include hoverOpacity;
        .wrapper {
          padding: 0;
          .def-icon {
            font-size: 28px;
            color: $light_gray;
          }
        }
      }
    }
    :deep(.el-form-item) {
      margin-bottom: 20px;
      color: #454545;
      background: rgb(0 0 0 / 0.1);
      border: 1px solid rgb(255 255 255 / 0.1);
      border-radius: 5px;
      &.checkbox-container {
        background: transparent;
        border: none;
        .el-checkbox {
          color: $light_gray;
        }
      }
      .el-input {
        display: inline-block;
        height: 47px;
        .el-input__wrapper {
          padding: 0 20px;
          width: 100%;
          background: transparent;
          border: none;
          .el-input__inner {
            height: 47px;
            color: $light_gray;
            appearance: none;
            caret-color: $cursor;
          }
        }
      }
      .def-icon {
        font-size: 16px;
        //display: flex;
        //width: 100px;
      }
    }
    .form-btn {
      @include flexRowSa;
      .el-button {
        flex: 1;
        &:first-of-type {
          margin-right: 15%;
        }
      }
    }
  }
}
</style>
