<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" />
      <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>
          <view class="yanzhenma">
            <u-form-item
              prop="code"
              left-icon="../../static/img/icon_yanzhenma.png"
              :left-icon-style="data.leftIconStyle"
              ><u-input
                v-model="data.formData.code"
                placeholder="请输入验证码"
                :disabled="data.codeDisabled"
              />
            </u-form-item>
            <u-verification-code
              seconds="60"
              @end="end"
              ref="uCode"
              @change="codeChange"
            ></u-verification-code>
            <view @tap="getCode" :disabled="data.codeDisabled" class="code">
              {{ data.tips }}
            </view>
          </view>
        </u-form>
        <view class="footer">
          <u-button @click="submit" type="primary">登录</u-button>
          <view class="register">
            <text style="border-bottom: 1rpx solid #05a8ff" @tap="toRegister"
              >立即注册</text
            >
          </view>
        </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 { toast } from "@/utils/util";
import { loginCode, verification, register } from "@/api/login";
import { useGlobalStore } from "@/store/useStore";

const globalStore = useGlobalStore();
const form = ref();
const uniA: any = uni;
const data = reactive({
  formData: {
    phone: "",
    code: "",
  },
  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"],
      },
    ],
    code: [
      {
        required: true,
        message: "请输入验证码",
        trigger: ["change", "blur"],
      },
    ],
  },
  tips: "",
  codeDisabled: true,
  codeValue: "",
  type: 0,
  leftIconStyle: {
    width: "40rpx",
    height: "40rpx",
    display: "flex",
  },
});

const uCode = ref();
const showHeight = ref();
const hideshow = ref(true);
const docmHeight = document.documentElement.clientHeight;

watch(
  () => data.formData.phone,
  (newVal: string) => {
    if (newVal && uniA.$u.test.mobile(newVal)) {
      data.codeDisabled = false;
    } else data.codeDisabled = true;
  }
);

onLoad((options: any) => {
  if (options?.type) {
    data.type = options?.type;
  }
  // screenHeight.value = uni.getSystemInfoSync().windowHeight + "px";
  // alert(screenHeight.value);
  window.onresize = () => {
    return (() => {
      showHeight.value = document.body.clientHeight;
    })();
  };
});

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

const getCode = async () => {
  if (uCode.value.canGetCode) {
    // 模拟向后端请求验证码
    const { data: res } = await verification(data.formData.phone);
    if (res.code == 200) {
      data.codeValue = res.data;
      uni.showLoading({
        title: "正在获取验证码",
      });
      setTimeout(() => {
        uni.hideLoading();
        // 这里此提示会被this.start()方法中的提示覆盖
        toast("验证码已发送");
        // 通知验证码组件内部开始倒计时
        uCode.value.start();
      }, 2000);
    }
  }
};

const end = () => {
  data.codeValue = "";
};
const codeChange = (text: string) => {
  data.tips = text;
};

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

const toRegister = () => {
  uni.navigateTo({ url: "/pages/login/register" });
};

const submit = () => {
  form.value.validate(async (valid: boolean) => {
    if (valid) {
      // if (data.tips == "重新获取") return toast("验证码失效")
      // if (data.formData.code != data.codeValue) return toast("验证码不正确")
      if (data.type) {
        const state = {
          type: data.type,
          parmeters: {
            NeedUpDateFields: [
              "FName",
              "FSex",
              "FMobile",
              "FDuties",
              "FRemark",
              "FOPENID",
              "FWorkUnit",
            ],
            IsDeleteEntry: "false",
            Model: {
              FName: globalStore.infoData.FNAME, //姓名
              FSex: globalStore.infoData.FSEX, //性别0男1女
              FMobile: data.formData.phone, //手机
              FDuties: globalStore.infoData.FDUTIES, //职务
              FOPENID: globalStore.openId, //openid
              FWorkUnit: globalStore.infoData.FWORKUNIT1, //工作单位
              FRemark: "", //备注
              FSTUDENTID: globalStore.infoData.FSTUDENTID,
            },
          },
        };
        const { data: res } = await register(state);
        if (res.code == 200) {
          globalStore.setInfoData(res.data[0]);
          uni.navigateBack();
          toast("修改成功");
        }
      } else {
        const { data: res } = await loginCode(data.formData.phone);
        if (res.code == 200) {
          globalStore.setInfoData(res.data[0]);
          uni.reLaunch({ url: "/pages/home/index" });
          toast("登录成功");
          // 修改手机号的
        }
      }
    }
  });
};
</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;
      // margin-bottom: 48rpx;
      background: #ffffff;
      padding: 10rpx 36rpx;
      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>
