<script setup lang="ts">
import { ref } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { router } from "@/router/index.ts";
import { info } from "@/config/index.ts";
import { useMain } from "@/views/login/hooks/index.ts";
import Icon from "@/components/Module/Icon/index.vue";
import { Form, FormItem, Input, InputPassword } from "ant-design-vue";

const userStore = useUserStore();

const { formList, form, getLoginParams } = useMain();

const formRef = ref();

const loading = false;
// 页面跳转
const jump = (path: string) => {
  router.push(path);
};

const prefix = "login-page";

const onSubmit = async () => {
  console.log("useParams", import.meta.env);
  await formRef.value.validate();
  const useParams = getLoginParams();
  // const res = await userStore.login(useParams);
  // console.log("res", res.code);
  // if (res.code == 200) {
  //   jump("/");
  // } else {
  //   // 登录失败
  //   console.error("登录失败");
  // }
};
</script>

<template>
  <div :class="prefix">
    <div :class="`${prefix}-desc`">
      {{ info.title }}
    </div>
    <a-spin :spinning="loading" :wrapperClassName="`${prefix}-form`">
      <div class="form-box">
        <Form :model="form" ref="formRef">
          <a-row :gutter="[26, 13]">
            <a-col :span="24" v-for="(item, index) in formList">
              <FormItem label="" :name="item.key" :rules="item.rules">
                <Input
                  v-if="item.type === 'input'"
                  v-model:value="form[item.key]"
                  :placeholder="item.placeholder"
                  class="form-input"
                >
                  <template #prefix>
                    <Icon :name="item.icon" />
                  </template>
                </Input>
                <InputPassword
                  v-if="item.type === 'password'"
                  v-model:value="form[item.key]"
                  :placeholder="item.placeholder"
                  class="form-input"
                >
                  <template #prefix>
                    <Icon :name="item.icon" />
                  </template>
                </InputPassword>
              </FormItem>
            </a-col>
          </a-row>
          <!-- <div class="form-row" >

          </div> -->
        </Form>
      </div>
      <div class="form-btn">
        <a-button type="primary" class="primary-btn" @click="onSubmit"> 登录 </a-button>
      </div>
    </a-spin>
  </div>
</template>

<style lang="scss" scoped>
$prefix: "login-page";

.#{$prefix} {
  width: 100%;
  height: 100%;
  padding: 35px 38px;
  border-radius: 16px;
  background-color: #fff;
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
  box-sizing: border-box;
  &-logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
  }
  &-desc {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    margin-bottom: 25px;
    font-size: 20px;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
  }
  &-form {
    width: 100%;
    flex: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    :deep(.ant-spin-container) {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: start;
      justify-content: space-between;
      flex-direction: column;
    }
    .form-box {
      width: 100%;
      :deep(.ant-form-item) {
        margin-bottom: 0;
      }
    }
    .form-row {
      width: 100%;
    }
    .form-btn {
      width: 100%;
      // margin-top: 25px;
      .primary-btn {
        width: 100%;
        height: 40px;
        background: #0057fe;
        border-radius: 5px 5px 5px 5px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
