<script setup lang="ts">
import { reactive, ref } from 'vue';
import user from "@/services/user.service";
import { useAuthStore } from '@/stores/auth.store';
import { routeToSearchPage } from '@/router';

interface FormState {
  username: string;
  password: string;
  remember: boolean;
}

// 授权store
const authStore = useAuthStore();

const formState = reactive<FormState>({
  username: '',
  password: '',
  remember: true,
});

const loading = ref(false);

const onFinish = (values: any) => {
  loading.value = true;
  let param = {
    mobilePhone: values.username,
    password: values.password,
    type: 1
  }
  user.login(param).then((resp) => {
    authStore.setCurrentUser(resp.data.data);
    authStore.setToken(resp.data.data.token);
    routeToSearchPage();
    loading.value = false;
  }).catch((err) => {
    loading.value = false;
    console.log(err);
  })
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

</script>

<template>
  <div class="login-main">
    <a-row type="flex">
      <a-col class="left" :flex="1">
        <h1 class="login-title">技淘平台智慧产权大脑</h1>
         <p class="login-banner">
          <img src="@/assets/imgs/login-banner.png" />
        </p>
      </a-col>
      <a-col class="right" :flex="1">
        <h1>用户登录</h1>
        <a-divider></a-divider>
        <div class="login-form-wrapper">
          <a-form
            :model="formState"
            name="basic"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 20 }"
            autocomplete="off"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
          >
            <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
              <a-input v-model:value="formState.username" />
            </a-form-item>

            <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
              <a-input-password v-model:value="formState.password" />
            </a-form-item>

            <a-form-item :wrapper-col="{ sm: { span: 20, offset: 4 }, xs: { span: 24, offset: 0 } }">
              <a-button type="primary" html-type="submit" block :loading="loading">登&nbsp;&nbsp;&nbsp;&nbsp;录</a-button>
            </a-form-item>
          </a-form>
          <!-- <p class="forgot-password-wrap">
            <a href="#">忘记密码？</a>
          </p> -->
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped lang="scss">
.login-main {
  height: 100vh;
  //background-color: #00A09A;

  .left {
    text-align: center;
    padding-top: 100px;
    // background: url(@/assets/imgs/login-banner.png) no-repeat;
    // background-size: 100% 100%;  
    background: radial-gradient(circle, #0D2148, #00051E);
    
    .login-title {
      color: #00A09A;
    }

    .login-banner {
      margin: 0 auto;
      width: 300px;

      img {
        width: 180%;
        position: relative;
        right: 45%;
        bottom: 20px;
      }
    }
  }

  .right {
    height: 100vh;
    padding-top: 100px;
    padding-left: 60px;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    background-color: #ffffff;

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

.forgot-password-wrap {
  text-align: right;

  // a {
  //   color: #ffffff;

  //   &:hover {
  //   text-decoration: underline;
  //   }
  // }
}
</style>
