<template>
  <div class="container">
    <div class="banner">
      <div class="banner-inner"></div>
    </div>
    <div class="content">
      <div class="content-inner">
        <div class="login-form-wrapper">
          <div class="login-form-title">海星试唱</div>
          <div class="login-form-sub-title">厂牌管理后台</div>
          <a-card :bordered="true" :hoverable="true" :style="{ width: '360px' }">
            <a-tabs v-model:active-key="loginType" :justify-="true" :animation="true">
              <a-tab-pane key="email" title="邮箱登录">
                <EmailForm ref="emailRef" />
              </a-tab-pane>
              <a-tab-pane key="phone" title="手机登录">
                <PhoneForm ref="phoneRef" />
              </a-tab-pane>
            </a-tabs>
            <div class="login-form-actions">
              <!--              <a-link>忘记密码</a-link>-->
              <a-button type="primary" :long="true" :loading="loading" @click="onLogin()"> 登录</a-button>
            </div>
          </a-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import EmailForm from '@/views/login/components/email-form.vue';
import PhoneForm from '@/views/login/components/phone-form.vue';

import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { AttributeData } from '@/types/global';
import { setToken } from '@/utils/auth';
import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import useProviderApi from '@/api/provider';

const { loading, setLoading } = useLoading(false);

const loginType = ref<'email' | 'phone'>('email');
const emailRef = ref<InstanceType<typeof EmailForm>>();
const phoneRef = ref<InstanceType<typeof PhoneForm>>();
const router = useRouter();

const onSubmit = (value: AttributeData) => {
  setLoading(true);
  useProviderApi
    .login(loginType.value, value)
    .then(({ data }) => {
      const { access_token, refresh_token, nick_name } = data;
      setToken(access_token, refresh_token);
      Message.success(`欢迎回来,管理员：${nick_name}`);
      const { path } = router.currentRoute.value.query;
      router.replace((path as string) || '/dashboard');
    })
    .finally(() => setLoading(false));
};

const onLogin = () => {
  // eslint-disable-next-line default-case
  switch (loginType.value) {
    case 'email':
      emailRef.value?.onSubmit(onSubmit);
      break;
    case 'phone':
      phoneRef.value?.onSubmit(onSubmit);
      break;
  }
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  height: 100vh;

  .banner {
    width: 550px;
  }

  .content {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;

    .login-form-wrapper {
      width: 320px;
    }

    .login-form-title {
      color: var(--color-text-1);
      font-weight: 500;
      font-size: 30px;
      line-height: 46px;
      text-align: center;
    }

    .login-form-sub-title {
      color: var(--color-text-3);
      font-size: 16px;
      line-height: 24px;
      text-align: center;
      margin-bottom: 16px;
    }

    .login-form-actions {
      display: flex;
      justify-content: right;
    }
  }

  .footer {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
  }
}

.logo {
  position: fixed;
  top: 24px;
  left: 22px;
  z-index: 1;
  display: inline-flex;
  align-items: center;

  &-text {
    margin-right: 4px;
    margin-left: 4px;
    color: var(--color-fill-1);
    font-size: 20px;
  }
}

.banner {
  display: flex;
  align-items: center;
  justify-content: center;

  &-inner {
    flex: 1;
    height: 100%;
    //background-image: url('/src/assets/images/bg.jpg');
    background-image: url('https://spreadcdn.hikoon.com/default/bg.jpg');
    background-size: cover;
  }
}
</style>