// @ts-nocheck
import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import "./index.scss";
import { AtButton, AtInput, AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import Taro from "@tarojs/taro";
import { AtAvatar } from "taro-ui";
import { AtTag } from "taro-ui";
import { AtList, AtListItem } from "taro-ui";
import { AtForm, AtMessage } from "taro-ui";

// export default class Index extends Component {
const Group = () => {
  const [current, setcurrent] = useState(2);
  const [wxid, setwxid] = useState(null);
  const [phoneNum, setphoneNum] = useState(null);
  const [vCode, setvCode] = useState(null);
  const [waitTime, setWaitTime] = useState(0); // 等待秒数
  const [isButtonDisabled, setIsButtonDisabled] = useState(false); // 按钮是否禁用

  useEffect(() => {}, []);

  const handleClick = (value) => {
    // 跳转到目的页面，在当前页面打开
    Taro.navigateTo({
      url: "/pages/index/index",
    });
  };

  const startTimer = () => {
    setIsButtonDisabled(true);
    let localWaitTime = 60; // 使用局部变量

    // 更新状态的函数
    const updateTime = () => {
      if (localWaitTime <= 0) {
        clearInterval(timer);
        setIsButtonDisabled(false);
        setWaitTime(0);
      } else {
        setWaitTime(localWaitTime);
        localWaitTime -= 1;
      }
    };

    // 设定计时器
    const timer = setInterval(updateTime, 1000);
    // 初始调用
    updateTime();
  };

  const validatePhoneNumber=(phoneNum) =>{
    // 检查是否为11位数字
    const phoneRegex = /^[0-9]{11}$/;
    return phoneRegex.test(phoneNum);
  }


  return (
    <View className="group">
      <AtForm
        onSubmit={(event) => {
          console.log("onSubmit-event--", event[0]?.detail?.value);
        }}
        onReset={(event) => {
          // 重置数据
        }}
      >
        <AtInput
          name="phoneNum"
          border={false}
          title="手机号"
          type="phone"
          placeholder="请输入"
          value={phoneNum}
          disabled={isButtonDisabled}
          onChange={(value) => {
            console.log("value", value);
            setphoneNum(value);
          }}
        />
        <View className="formCode">
          <AtInput
            name="vCode"
            title="验证码"
            type="number"
            placeholder="请输入4位数字"
            
            value={vCode}
            onChange={(value) => {
              setvCode(value);
            }}
          />
          <AtButton
            className="codeBtn"
            onClick={() => {
              if (!!phoneNum & !!validatePhoneNumber(phoneNum)) {
                // 提交手机数据
                setIsButtonDisabled(true);
                startTimer(); // 开始防抖计时
              } else {
                Taro.atMessage({
                  message: "请检查手机号",
                  type: `warning`,
                });
              }
            }}
            // type="primary"
            disabled={isButtonDisabled}
          >
            {isButtonDisabled ? `${waitTime} 秒` : "获取"}
          </AtButton>
        </View>

        <AtButton formType="submit" type="primary">
          {"提交"}
        </AtButton>
      </AtForm>

      <AtMessage />
    </View>
  );
};

export default Group;
