<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 '@/http/provider';

  const router = useRouter();
  const { loading, setLoading } = useLoading(false);
  const loginType = ref<'email' | 'phone'>('email');
  const emailRef = ref<InstanceType<typeof EmailForm>>();
  const phoneRef = ref<InstanceType<typeof PhoneForm>>();

  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>