<script lang="ts" setup>
import { message } from 'ant-design-vue/lib';
import { reactive, onMounted, computed } from 'vue';
import useUserStore from '@/store/modules/user';
import useAppStore from '@/store/modules/app';
import { getCaptchaImage } from '@/api/login';
import { useRouter, useRoute } from 'vue-router';
import useI18n from '@/hooks/useI18n';
import { toRaw } from 'vue';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
const { t, changeLocale } = useI18n();
const appStore = useAppStore();
const router = useRouter();
const route = useRoute();

/**登录后重定向页面 */
const redirectPath =
  (route.query && (route.query.redirect as string)) || '/index';

let state = reactive({
  /**表单属性 */
  from: {
    /**账号 */
    username: 'supervisor',
    /**密码 */
    password: 'rootaa',
    /**验证码 */
    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'), 3);
        router.push({ path: redirectPath });
      } 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 => {
    state.captchaClick = false;
    if (res.code != 1) {
      message.warning(`${res.msg}`, 3);
      return;
    }
    state.captcha.enabled = Boolean(res.captchaEnabled);
    if (state.captcha.enabled) {
      state.captcha.codeImg = res.img;
      state.from.uuid = res.uuid;
    }
  });
}

// 判断是否有背景地址
const calcBG = computed(() => {
  const bgURL = appStore.getLoginBackground;
  if (bgURL && bgURL !== '#') {
    return {
      backgroundImage: `url(${bgURL})`,
      backgroundPosition: 'center',
      backgroundSize: 'cover',
    };
  }
  return undefined;
});

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

onMounted(() => {
  fnLocale()
  fnGetCaptcha();
});

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

<template>
  <div class="container" :style="calcBG">
    <section v-show="!calcBG">
      <div class="animation animation1"></div>
      <div class="animation animation2"></div>
      <div class="animation animation3"></div>
      <div class="animation animation4"></div>
      <div class="animation animation5"></div>
    </section>

    <header class="header">
      <template v-if="appStore.logoType === 'icon'">
        <img
          :src="appStore.getLOGOIcon"
          class="logo-icon"
          :alt="appStore.appName"
        />
        <span class="title">{{ appStore.appName }}</span>
      </template>
      <template v-if="appStore.logoType === 'brand'">
        <img
          :src="appStore.getLOGOBrand"
          class="logo-brand"
          :alt="appStore.appName"
        />
      </template>
    </header>

    <a-card :bordered="false" class="login-card">
      <div class="desc">
        {{ t('common.desc') }}
      </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: 6,
              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 :gutter="8" 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="120px"
              height="40px"
              :preview="false"
              :src="state.captcha.codeImg"
              @click="fnGetCaptcha"
            />
          </a-col>
        </a-row>

        <a-row
          :gutter="8"
          justify="space-between"
          align="middle"
          style="margin-bottom: 16px"
        >
          <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-row>

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

        <a-row
          :gutter="8"
          justify="space-between"
          align="middle"
          style="margin-top: 18px"
        >
          <a-col :offset="18" :span="6">
            <a-dropdown :trigger="['click', 'hover']">
              <a-button size="small" type="default">
                {{ t('i18n') }}
                <DownOutlined />
              </a-button>
              <template #overlay>
                <a-menu @click="fnChangeLocale">
                  <a-menu-item key="zh_CN">中文</a-menu-item>
                  <a-menu-item key="en_US">English</a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <footer class="footer">
      <div class="footer-copyright">{{ appStore.copyright }}</div>
    </footer>
  </div>
</template>

<style lang="less" scoped>
.container {
  position: relative;
  width: 100%;
  min-height: 100%;
  padding-top: 164px;

  background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
  .animation {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #1be1f6;

    &.animation1 {
      left: 15%;
      top: 70%;
      animation: slashStar 2s ease-in-out 0.3s infinite;
    }
    &.animation2 {
      left: 34%;
      top: 35%;
      animation: slashStar 2s ease-in-out 1.2s infinite;
    }
    &.animation3 {
      left: 10%;
      top: 8%;
      animation: slashStar 2s ease-in-out 0.5s infinite;
    }
    &.animation4 {
      left: 68%;
      top: 55%;
      animation: slashStar 2s ease-in-out 0.8s infinite;
    }
    &.animation5 {
      left: 87%;
      top: 30%;
      animation: slashStar 2s ease-in-out 1.5s infinite;
    }
  }
  @keyframes slashStar {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  padding: 16px;
  display: flex;
  justify-content: start;
  align-items: center;

  .logo-icon {
    height: 48px;
    width: 48px;
    margin-right: 16px;
    vertical-align: top;
    border-style: none;
    border-radius: 6.66px;
  }
  .logo-brand {
    height: 48px;
    vertical-align: top;
    border-style: none;
    border-radius: 2px;
  }
  .title {
    position: relative;
    top: 2px;
    color: #fff;
    font-weight: 600;
    font-size: 28px;
    font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  }
}

.login-card {
  width: 368px;
  min-width: 260px;
  margin: 0 auto;
  border-radius: 4px;

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

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin: 12px auto 30px;
  text-align: center;

  &-copyright {
    opacity: 0.8;
    font-size: 16px;
    color: #fff;
  }
}
</style>
