<script setup lang="ts">
import svgLight from '@/assets/svg/light.svg';
import svgDark from '@/assets/svg/dark.svg';
import { reactive, toRaw, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { viewTransitionTheme } from 'antdv-pro-layout';
import { useRouter, useRoute } from 'vue-router';
import useI18n from '@/hooks/useI18n';
import useUserStore from '@/store/modules/user';
import useAppStore from '@/store/modules/app';
import useLayoutStore from '@/store/modules/layout';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { getCaptchaImage } from '@/api/auth';
import {
  loginSourceState,
  fnClickLoginSource,
} from '@/views/login/hooks/useLoginSource';
const { t, changeLocale, optionsLocale } = useI18n();
const layoutStore = useLayoutStore();
const appStore = useAppStore();
const router = useRouter();
const route = useRoute();

let state = reactive({
  /**表单属性 */
  from: {
    /**账号 */
    username: '',
    /**密码 */
    password: '',
    /**验证码 */
    code: '',
    /**验证码uuid */
    uuid: '',
  },
  /**表单提交点击状态 */
  fromClick: false,
  /**验证码状态 */
  captcha: {
    /**验证码开关 */
    enabled: false,
    /**验证码图片地址 */
    codeImg: '',
  },
  /**验证码点击状态 */
  captchaClick: false,
});

/**表单验证通过 */
function fnFinish() {
  state.fromClick = true;
  // 发送请求
  useUserStore()
    .fnLogin(toRaw(state.from))
    .then(res => {
      if (res.code === RESULT_CODE_SUCCESS) {
        message.success(t('views.login.loginSuccess'), 1);
        /**登录后重定向页面 */
        const redirectPath = route.query?.redirect || '/index';
        router.push({ path: redirectPath as string });
      } else {
        message.error(`${res.msg}`, 3);
      }
    })
    .finally(() => {
      state.fromClick = false;
      // 刷新验证码
      if (state.captcha.enabled) {
        state.from.code = '';
        fnGetCaptcha();
      }
    });
}

/**
 * 获取验证码
 */
function fnGetCaptcha() {
  if (state.captchaClick) return;
  state.captchaClick = true;
  getCaptchaImage()
    .then(res => {
      if (res.code !== RESULT_CODE_SUCCESS) {
        message.warning({
          content: `${res.msg}`,
          duration: 3,
        });
        return;
      }
      const { enabled, img, uuid } = res.data;
      state.captcha.enabled = Boolean(enabled);
      if (state.captcha.enabled) {
        state.captcha.codeImg = img;
        state.from.uuid = uuid;
      }
      if (res.data?.text) {
        state.from.code = res.data.text;
      }
    })
    .finally(() => {
      state.captchaClick = false;
    });
}

/**
 * 国际化翻译转换
 */
function fnLocale() {
  let title = route.meta.title as string;
  if (title.indexOf('router.') !== -1) {
    title = t(title);
  }
  appStore.setTitle(title);
}

/**改变主题色 */
function fnClickTheme(e: any) {
  viewTransitionTheme(isDarkMode => {
    layoutStore.changeConf('theme', isDarkMode ? 'light' : 'dark');
  }, e);
}

/**改变多语言 */
function fnChangeLocale(e: any) {
  changeLocale(e.key);
}

onMounted(() => {
  fnLocale();
  fnGetCaptcha();
});
</script>

<template>
  <a-card :bordered="false" class="login-card">
    <div class="title">
      {{ t('common.title') }}
    </div>
    <a-form :model="state.from" name="stateFrom" @finish="fnFinish">
      <a-form-item
        name="username"
        :rules="[
          {
            required: true,
            min: 2,
            max: 30,
            message: t('valid.userNamePlease'),
          },
        ]"
      >
        <a-input
          v-model:value="state.from.username"
          size="large"
          :placeholder="t('valid.userNameHit')"
          :maxlength="30"
        >
          <template #prefix>
            <UserOutlined class="prefix-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
        name="password"
        :rules="[
          {
            required: true,
            min: 5,
            max: 26,
            message: t('valid.passwordPlease'),
          },
        ]"
      >
        <a-input-password
          v-model:value="state.from.password"
          size="large"
          :placeholder="t('valid.passwordHit')"
          :maxlength="26"
        >
          <template #prefix>
            <LockOutlined class="prefix-icon" />
          </template>
        </a-input-password>
      </a-form-item>

      <a-row v-if="state.captcha.enabled">
        <a-col :span="16">
          <a-form-item
            name="code"
            :rules="[
              {
                required: true,
                min: 1,
                message: t('valid.codePlease'),
              },
            ]"
          >
            <a-input
              v-model:value="state.from.code"
              size="large"
              :placeholder="t('valid.codeHit')"
              :maxlength="6"
            >
              <template #prefix>
                <RobotOutlined class="prefix-icon" />
              </template>
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-image
            :alt="t('valid.codeHit')"
            style="cursor: pointer; border-radius: 2px"
            width="100px"
            height="40px"
            :preview="false"
            :src="state.captcha.codeImg"
            @click="fnGetCaptcha"
          />
        </a-col>
      </a-row>

      <a-button
        block
        type="primary"
        size="large"
        html-type="submit"
        :loading="state.fromClick"
      >
        {{ t('views.login.loginBtn') }}
      </a-button>

      <template v-if="loginSourceState.list.length > 0">
        <a-divider :plain="true">
          {{ t('views.login.otherMethod') }}
        </a-divider>
        <a-row
          justify="center"
          align="middle"
          :wrap="false"
          :gutter="16"
          style="margin-top: 18px"
        >
          <a-col v-for="s in loginSourceState.list" :key="s.uid">
            <a-tooltip placement="top">
              <template #title>{{ s.name }}</template>
              <a-button
                type="text"
                shape="circle"
                @click="fnClickLoginSource(s)"
              >
                <template #icon>
                  <a-avatar v-if="s.icon" :src="s.icon" :alt="s.name" />
                  <a-avatar v-else :alt="s.name">{{ s.name }}</a-avatar>
                </template>
              </a-button>
            </a-tooltip>
          </a-col>
        </a-row>
      </template>

      <a-row justify="end" align="middle" style="margin-top: 18px">
        <a-col :span="12" v-if="appStore.registerUser">
          <a-button
            type="link"
            target="_self"
            :title="t('views.login.registerBtn')"
            @click="() => router.push({ name: 'Register' })"
          >
            {{ t('views.login.registerBtn') }}
          </a-button>
        </a-col>
        <a-col :span="3" v-if="appStore.i18nOpen">
          <a-dropdown trigger="click" placement="bottomRight">
            <a-button type="text">
              <template #icon> <TranslationOutlined /> </template>
            </a-button>
            <template #overlay>
              <a-menu @click="fnChangeLocale">
                <a-menu-item v-for="opt in optionsLocale" :key="opt.value">
                  {{ opt.label }}
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-col>
        <a-col :span="3">
          <a-tooltip placement="bottomRight">
            <template #title>{{ t('loayouts.rightContent.theme') }}</template>
            <a-button type="text" @click="fnClickTheme">
              <template #icon>
                <img
                  v-if="layoutStore.proConfig.theme === 'dark'"
                  :src="svgDark"
                  class="theme-icon"
                />
                <img v-else :src="svgLight" class="theme-icon" />
              </template>
            </a-button>
          </a-tooltip>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>

<style lang="less" scoped>
.login-card {
  width: 368px;
  min-width: 260px;
  margin: 0 auto;
  margin-left: 60%;
  border-radius: 6px;

  & .title {
    text-align: left;
    margin-bottom: 18px;
    color: #141414;
    font-weight: 600;
    font-size: 18px;
  }
  & .prefix-icon {
    color: #8c8c8c;
    font-size: 16px;
  }
}

[data-theme='dark'] .login-card {
  & .title {
    color: #999;
  }
}

@media (max-width: 992px) {
  .login-card {
    margin: 0 auto;
  }
}
</style>
