<template>
  <div class="login">
    <LoginLeftView></LoginLeftView>

    <div class="right-wrap">
      <div class="top-right-wrap">
        <div class="btn theme-btn" @click="toggleTheme">
          <i class="iconfont-sys">
            {{ isDark ? '&#xe6b5;' : '&#xe725;' }}
          </i>
        </div>
        <ElDropdown @command="changeLanguage" popper-class="langDropDownStyle">
          <!--<div class="btn language-btn">-->
          <!--  <i class="iconfont-sys icon-language">&#xe611;</i>-->
          <!--</div>-->
          <!--<template #dropdown>-->
          <!--  <ElDropdownMenu>-->
          <!--    <div v-for="lang in languageOptions" :key="lang.value" class="lang-btn-item">-->
          <!--      <ElDropdownItem-->
          <!--        :command="lang.value"-->
          <!--        :class="{ 'is-selected': locale === lang.value }"-->
          <!--      >-->
          <!--        <span class="menu-txt">{{ lang.label }}</span>-->
          <!--        <i v-if="locale === lang.value" class="iconfont-sys icon-check">&#xe621;</i>-->
          <!--      </ElDropdownItem>-->
          <!--    </div>-->
          <!--  </ElDropdownMenu>-->
          <!--</template>-->
        </ElDropdown>
      </div>
      <div class="header">
        <ArtLogo class="icon" />
        <h1>{{ systemName }}</h1>
      </div>
      <div class="login-wrap">
        <div class="form">
          <h3 class="title">{{ $t('login.title') }}</h3>
          <p class="sub-title">{{ $t('login.subTitle') }}</p>
          <ElForm
            ref="formRef"
            :model="formData"
            :rules="rules"
            @keyup.enter="handleSubmit"
            style="margin-top: 25px"
          >
            <!-- Mock 账号选择（仅在开发模式且使用 Mock 时显示） -->
            <ElFormItem prop="account" v-if="false">
              <ElSelect v-model="formData.account" @change="setupAccount" class="account-select">
                <ElOption
                  v-for="account in mockAccounts"
                  :key="account.key"
                  :label="account.label"
                  :value="account.key"
                >
                  <span>{{ account.label }}</span>
                </ElOption>
              </ElSelect>
            </ElFormItem>
            <ElFormItem prop="username">
              <ElInput :placeholder="$t('login.placeholder[0]')" v-model.trim="formData.username" />
            </ElFormItem>
            <ElFormItem prop="password">
              <ElInput
                :placeholder="$t('login.placeholder[1]')"
                v-model.trim="formData.password"
                type="password"
                show-password
                radius="8px"
                autocomplete="off"
              />
            </ElFormItem>

            <div class="forget-password">
              <ElCheckbox v-model="formData.rememberPassword">{{
                $t('login.rememberPwd')
              }}</ElCheckbox>
              <!--<RouterLink :to="RoutesAlias.ForgetPassword">{{ $t('login.forgetPwd') }}</RouterLink>-->
            </div>

            <div style="margin-top: 30px">
              <ElButton
                class="login-btn"
                type="primary"
                @click="handleSubmit"
                :loading="loading"
                v-ripple
              >
                {{ $t('login.btnText') }}
              </ElButton>
            </div>
          </ElForm>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import AppConfig from '@/config'
  import { LanguageEnum, SystemThemeEnum } from '@/enums/appEnum'
  import { useI18n } from 'vue-i18n'
  import { useSettingStore } from '@/store/modules/setting'
  import { useUserStore } from '@/store/modules/user'
  import { useTheme } from '@/composables/useTheme'
  import { useLogin } from '@/composables/useLogin'

  defineOptions({ name: 'Login' })

  const { locale } = useI18n()
  const settingStore = useSettingStore()
  const userStore = useUserStore()
  const { isDark, systemThemeType } = storeToRefs(settingStore)

  // 使用登录 Composable
  const { formRef, formData, rules, loading, mockAccounts, setupAccount, handleLogin } = useLogin()

  const systemName = AppConfig.systemInfo.name

  // 处理提交
  const handleSubmit = async () => {
    await handleLogin()
  }

  // 切换语言
  const changeLanguage = (lang: LanguageEnum) => {
    if (locale.value === lang) return
    locale.value = lang
    userStore.setLanguage(lang)
  }

  // 切换主题
  const toggleTheme = () => {
    let { LIGHT, DARK } = SystemThemeEnum
    useTheme().switchThemeStyles(systemThemeType.value === LIGHT ? DARK : LIGHT)
  }
</script>

<style lang="scss" scoped>
  @use './index';
</style>
