<template>
  <view class="login-container">
    <u-form :model="data.formData" ref="form" label-width="150">
      <u-form-item label="手机号" prop="Phone"
        ><u-input v-model="data.formData.Phone" placeholder="请出输入手机号"
      /></u-form-item>
      <u-form-item label="密码" prop="Password"
        ><u-input
          v-model="data.formData.Password"
          type="password"
          placeholder="请输入密码"
      /></u-form-item>
    </u-form>
    <view class="footer">
      <u-button @click="submit" size="medium" type="primary">登录</u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useGlobalStore } from "@/store/useStore"
import { Login } from "./interface/index"
import { teachLogin } from "@/api/login"
import { toast } from "@/utils/util";

const globalStore = useGlobalStore()

const form = ref()
const uniA: any = uni
const data = reactive({
  formData: {
    Phone: "",
    Password: "",
  } as Login.LoginForm,
  rules: {
    Phone: [
      {
        required: true,
        message: "请输入手机号",
        trigger: ["change", "blur"],
      },
      // {
      //   // 自定义验证函数，见上说明
      //   validator: (rule: any, value: any, callback: any) => {
      //     return uniA.$u.test.mobile(value)
      //   },
      //   message: "手机号码不正确",
      //   // 触发器可以同时用blur和change
      //   trigger: ["change", "blur"],
      // },
    ],
    Password: [
      {
        required: true,
        message: "请输入密码",
        trigger: ["change", "blur"],
      },
    ],
  },
})

onReady(() => {
  form.value.setRules(data.rules)
})

const submit = () => {
  form.value.validate(async (valid: boolean) => {
    if (valid) {
      const { data: res } = await teachLogin(data.formData)
      if (res.code == 200) {
        globalStore.setPhone(data.formData.Phone)
        globalStore.setInfoData(res.data[0])
        uni.reLaunch({ url: "/pages/home/index" })
        toast('登录成功')
      }
    } else {
      console.log("验证失败")
    }
  })
}
</script>

<style lang="scss" scoped>
page {
  background-image: url("https://img2.baidu.com/it/u=460732253,1892860896&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888");
  background-size: cover;
  /* 背景图片自适应屏幕大小 */
  /* 其他样式设置 */
}

.login-container {
  padding: 30rpx;
  position: absolute;
  top: 25%;
  left: 5%;
  width: 90vw;
  background-color: #fff;
  border-radius: 15rpx;

  .footer {
    display: flex;
    margin-top: 30rpx;
  }
}
</style>
