<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { ref } from "vue";
import { getVerifyCode, phoneLogin } from "@/api/user";
import logoImg from "../../../static/logo.jpg";

Taro.useLoad((options) => {
  console.log(options);
});

const basicData = ref({
  phone: "",
  code: "",
});

const smsDisabled = ref(false);

const smsStr = ref("获取验证码");

// 获取验证码
const getSmsCode = async () => {
  if (
    !/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(
      basicData.value.phone
    )
  )
    return Taro.showToast({
      title: "请输入正确的手机号码",
      icon: "none",
    });
  await getVerifyCode({
    phone: basicData.value.phone.toString(),
  });
  smsDisabled.value = true;
  let time = 60;
  const timer = setInterval(() => {
    time--;
    smsStr.value = `${time}s`;
    if (time === 0) {
      clearInterval(timer);
      smsDisabled.value = false;
      smsStr.value = "获取验证码";
    }
  }, 1000);
};

const login = async () => {
  if (
    !/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(
      basicData.value.phone
    )
  )
    return Taro.showToast({
      title: "请输入正确的手机号码",
      icon: "none",
    });
  if (!basicData.value.code)
    return Taro.showToast({
      title: "请输入验证码",
      icon: "none",
    });

  const res = await phoneLogin({
    Phone: basicData.value.phone,
    Code: basicData.value.code,
    Referee: Taro.getStorageSync("bind_id") || "",
  });
  Taro.showToast({
    title: res.msg,
    icon: "success",
    duration: 2000,
  });
  Taro.setStorageSync("token", res.data.token);
  setTimeout(() => {
    Taro.removeStorageSync("bind_id");
    Taro.switchTab({
      url: "/pages/user/index",
    });
  }, 2000);
};
</script>

<template>
  <view class="wrapper">
    <image src="../../../static/wechat_login.jpg" />
    <view class="logo">
      <image :src="logoImg" />
      <view>捷兑通</view>
    </view>
    <view class="center">
      <nut-form :model-value="basicData" ref="RefForm">
        <nut-form-item label="手机号码：">
          <nut-input
            v-model="basicData.phone"
            class="nut-input-text"
            placeholder="请输入手机号码"
            type="text"
          />
        </nut-form-item>
        <nut-form-item label="验证码：">
          <view style="display: flex">
            <nut-input
              v-model="basicData.code"
              class="nut-input-text"
              placeholder="请输入验证码"
              type="text"
            />
            <nut-button
              size="mini"
              style="margin-left: 10px"
              @click="getSmsCode"
              :disabled="smsDisabled"
              >{{ smsStr }}</nut-button
            >
          </view>
        </nut-form-item>
        <nut-form-item>
          <nut-button type="primary" block @click="login">登录</nut-button>
        </nut-form-item>
      </nut-form>
    </view>
  </view>
</template>

<style lang="scss">
page {
  background: #fff;
}

.wrapper {
  position: relative;

  image {
    width: 100%;
    height: 838px;
  }

  .logo {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 35px;
    line-height: 70px;

    image {
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }
  }

  .center {
    position: absolute;
    top: 55%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0px 10px;
  }
}
</style>
