--/src/view/login/index.vue

<template>
  <div class="login flex justify-center items-center">
    <div class="w-[700px] p-[20px] rounded-[10px] bg-white">
      <div class="web_logo"></div>
      <Form class="p-4 enter-x" :model="formData" ref="formRef">
        <!-- <FormItem name="tenantId" class="enter-x" v-if="tenant.tenantEnabled">
      <Select v-model:value="formData.tenantId" size="large" @change="handleTenantChange">
        <template #suffixIcon>
          <Icon icon="mdi:company" />
        </template>
        <SelectOption v-for="item in tenant.voList" :key="item.tenantId" :value="item.tenantId">{{
          item.companyName
        }}</SelectOption>
      </Select>
    </FormItem> -->

        <FormItem name="teacherId" class="enter-x">
          <Input
            size="large"
            v-model:value="formData.teacherId"
            placeholder="请输入"
          />
        </FormItem>
        <FormItem name="password" class="enter-x">
          <InputPassword
            size="large"
            visibilityToggle
            v-model:value="formData.password"
            placeholder="请输入"
            @keypress.enter="handleLogin"
          />
        </FormItem>
        <!-- <FormItem name="code" class="enter-x" v-if="image.requiredCaptcha">
        <Input
          ref="imageCodeRef"
          size="large"
          v-model:value="formData.code"
          placeholder="输入验证码"
          @keypress.enter="handleLogin"
        >
          <template #addonAfter>
            <Image
              class="rounded-r-lg"
              :preview="false"
              :height="40"
              :width="105"
              :src="image.imageInfo"
              @click="refreshCaptchaImage"
            />
          </template>
        </Input>
      </FormItem> -->

        <FormItem class="enter-x mt-15">
          <Button
            type="primary"
            size="large"
            block
            @click="handleLogin"
            :loading="loading"
          >
            登录/注册
          </Button>
        </FormItem>
        <FormItem>
          <Checkbox v-model:checked="isAgree" size="small" />
          <span class="text-xs text-[#808080] pl-2"
            >我已阅读并同意《用户协议》和
            《隐私政策》未注册的邮箱将自动创建账号</span
          >
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { reactive, ref, unref, computed, onMounted } from "vue";
import { loginAPI, getTeacherListApi, getUserInfoApi } from "../../request/api";
import { useUserStore } from "../../store/user.ts";
import { ElMessage } from "element-plus";

let userStore: any = useUserStore();
console.log("userStore", userStore);

import {
  Checkbox,
  Form,
  Input,
  Row,
  Col,
  Button,
  Image,
  Select,
  SelectOption,
  Divider,
} from "ant-design-vue";

const isAgree = ref(true);
const router = useRouter();

const ACol = Col;
const ARow = Row;
const FormItem = Form.Item;
const InputPassword = Input.Password;
// const { notification, createErrorModal } = useMessage();
// const { prefixCls } = useDesign("login");
// const userStore = useUserStore();

// const { setLoginState, getLoginState } = useLoginState();
// const { getFormRules } = useFormRules();

const formRef = ref();
const loading = ref(false);
const formData: any = reactive({
  teacherId: "",
  password: "",
});
async function handleLogin() {
  //   let res1 = await getTeacherListApi();
  //   console.log("res1", res1);

  let res = await loginAPI(formData);
  if (res.code == 200) {
    ElMessage.success(`登录成功！`);

    userStore.SetUserInfo({ data: { auth: res.data } });
    let userInfo = await getUserInfoApi();
    userInfo.data.auth = res.data;
    userStore.SetUserInfo(userInfo);
    console.log("userStore.userInfo111", userStore.userInfo);

    router.push("/");
  }
  console.log("***", res);
}
</script>

<style scoped lang="less">
.login {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/web/banner.png"), rgb(255 255 255 / 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.web_logo {
  width: 250px;
  height: 40px;
  margin: 10px 16px;
  background: url("../../assets/web/weblogo1.png"), rgb(255 255 255 / 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
:deep(button) {
  outline: none;
}
</style>