<template>
  <view style="position: relative">
    <view class="bg-header">
      <u-image
        src="../../static/img/background.png"
        width="100%"
        height="100%"
      />
    </view>
    <view class="logo">
      <u-image
        src="../../static/img/logo.png"
        width="100%"
        height="240rpx"
        mode="aspectFit"
      />
      <view class="logo-detail">培训系统</view>
    </view>
    <view class="container">
      <view class="content">
        <u-form :model="data.formData" ref="form" label-width="150">
          <u-form-item
            prop="Phone"
            left-icon="../../static/img/icon_user.png"
            :left-icon-style="data.leftIconStyle"
          >
            <u-input v-model="data.formData.Phone" placeholder="请输入手机号"
          /></u-form-item>
          <u-form-item
            prop="Password"
            left-icon="../../static/img/icon_yanzhenma.png"
            :left-icon-style="data.leftIconStyle"
            style="margin-top: 48rpx"
          >
            <u-input
              v-model="data.formData.Password"
              type="password"
              placeholder="请输入密码"
          /></u-form-item>
        </u-form>
        <view class="footer">
          <u-button @click="submit" type="primary">登录</u-button>
        </view>
      </view>
    </view>
    <view v-if="hideshow" class="bg-footer">
      <u-image
        src="../../static/img/mask_group.png"
        width="100%"
        height="100%"
      />
    </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 showHeight = ref();
const hideshow = ref(true);
const docmHeight = document.documentElement.clientHeight;
const data = reactive({
  formData: {
    Phone: "16673514373",
    Password: "123456",
  } 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"],
      },
    ],
  },
  leftIconStyle: {
    width: "40rpx",
    height: "40rpx",
    display: "flex",
  },
});

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

onMounted(() => {
  if (globalStore.Phone) return uni.reLaunch({ url: "/pages/home/index" });
  window.onresize = () => {
    return (() => {
      showHeight.value = document.body.clientHeight;
    })();
  };
});

watch(
  () => showHeight.value,
  () => {
    if (docmHeight > showHeight.value) {
      hideshow.value = false;
    } else {
      hideshow.value = true;
    }
  }
);

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>
.container {
  position: absolute;
  top: 500rpx;
  left: 12%;
  z-index: 99;
  width: 568rpx;
  .content {
    width: 568rpx;
    height: 372rpx;
    .yanzhenma {
      display: flex;
      align-items: center;
      margin-top: 48rpx;
      .u-form-item {
        width: 392rpx;
      }
    }

    :deep(.u-form-item) {
      position: relative;
      box-sizing: border-box;
      background: #ffffff;
      padding: 10rpx 36rpx 10rpx;
      box-shadow: 0rpx 8rpx 100rpx 0rpx rgba(0, 0, 0, 0.05);
      border-radius: 16rpx;
      height: 90rpx;
    }
    :deep(.u-form-item__message) {
      padding-left: 0 !important;
      margin-top: 20rpx;
    }
    .footer {
      height: 84rpx;
      margin-top: 64rpx;
      .u-btn {
        width: 100%;
        height: 100%;
        background-color: #04a7ff;
      }

      .register {
        text-align: center;
        font-size: 26rpx;
        margin: 20rpx 0;
        color: #07a9ff;
      }
    }
  }
}
</style>
