import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:project_telephony/utils/headers.dart';

import '../../base/base_style.dart';
import '../tab_navigator.dart';
import '../widget/image_scaffold.dart';
import '../widget/plone_bottom.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // String _operator="";
  // String _phone="";
  // bool _chooseAgreement = false;
  // bool _getCodeEnable = true;
  // late Timer _timer;
  //
  // ///时钟
  // String _countDownStr = "发送验证码";
  //
  // ///初始化文本
  // int _countDownNum = 59;

  ///时间倒计数值
  late final TextEditingController _phoneController =
      TextEditingController(text: "");
  late final TextEditingController _smsCodeController =
      TextEditingController(text: "");

  // // late FocusNode _smsCodeFocusNode=FocusNode (canRequestFocus: );
  // bool _cantSelected = false;
  @override
  void initState() {
    super.initState();
    // _operator = '中国移动认证';
    // _phone = '12345678909';
  }

  @override
  Widget build(BuildContext context) {
    return CloudScaffold(
      systemStyle: const SystemUiOverlayStyle(
        statusBarIconBrightness: Brightness.dark,
      ),
      path: Assets.images.bg.path,
      appbar: Row(
        children: [
          Padding(
            padding: EdgeInsets.only(top: 88.w, left: 8.w),
            child: const Icon(
              CupertinoIcons.chevron_back,
              color: Colors.black,
            ),
          ),
          Padding(
              padding: EdgeInsets.only(left: 239.w, top: 88.w),
              child: Text(
                "登录/注册",
                style: TextStyle(
                    fontSize: BaseStyle.fontSize34,
                    color: BaseStyle.color333333,
                    fontWeight: FontWeight.bold),
              ))
        ],
      ),
      extendBody: true,
      body: Container(
        padding: EdgeInsets.only(left: 64.w, right: 64.w, top: 138.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "短信帮手",
              style: TextStyle(
                  fontSize: 64.sp,
                  fontWeight: FontWeight.bold,
                  color: Colors.black),
            ),
            32.hb,
            Text(
              "希望能成为您的短信小助手",
              style: TextStyle(fontSize: 32.sp, color: const Color(0xFF999999)),
            ),
            80.hb,
            _phoneTFWidget(),
            _codeWidget(),
            112.hb,
            PloneBottom(
              onTap: () {
                Get.to(() => const TabNavigator());
              },
              text: "立即登录",
            ),
            32.hb,
            _getText()
          ],
        ),
      ),
    );
  }
//  输入手机号

  _phoneTFWidget() {
    return Container(
      alignment: Alignment.centerLeft,
      // padding: EdgeInsets.symmetric(horizontal: 72.w),
      height: 40 * 2.h,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: TextField(
                    onChanged: (String phone) {
                      // setState(() {
                      //   if (phone.length >= 11) {
                      //     _getCodeEnable = true;
                      //   } else {
                      //     _getCodeEnable = false;
                      //   }
                      //   if (kDebugMode) {
                      //     //print(_loginEnable);
                      //   }
                      // }); 判断手机号长度
                    },
                    // enabled: false,
                    controller: _phoneController,
                    // focusNode: _phoneFocusNode,
                    keyboardType: TextInputType.number,
                    style: TextStyle(
                        fontSize: 36.sp, color: const Color(0xFF999999)),
                    inputFormatters: [
                      LengthLimitingTextInputFormatter(11),
                    ],
                    cursorColor: Colors.black,
                    decoration: InputDecoration(
                        // contentPadding: EdgeInsets.only(
                        //     left: rSize(10), top: rSize(13)),
                        // prefixIcon: Container(
                        //   // padding: EdgeInsets.only(right: 10.w),
                        //   width: 50.w,
                        //   alignment: Alignment.centerLeft,
                        //   child: Text(
                        //     "+86",
                        //     style: TextStyle(
                        //         fontSize: 32.sp,
                        //         color: const Color(0xFF000000)),
                        //   ),
                        // ),
                        prefixText: "+86",
                        prefixStyle: TextStyle(
                          color: Colors.black,
                        ),
                        enabledBorder: const UnderlineInputBorder(
                          // 不是焦点的时候颜色
                          borderSide: BorderSide(
                            color: Color(0xffdddddd),
                          ),
                        ),
                        // focusedBorder:  const UnderlineInputBorder( // 焦点集中的时候颜色
                        //   borderSide: BorderSide(
                        //       color: Color(0x19000000)
                        //   ),
                        // ),
                        //border: InputBorder.none,
                        hintText:
                            "请输入手机号", // hintText: _phone.replaceFirst(RegExp(r'\d{4}'), '****', 3),
                        hintStyle: TextStyle(
                            color: const Color(0xFFCCCCCC), fontSize: 32.sp),
                        suffixIcon: GestureDetector(
                          onTap: () {},
                          // onTap: !_getCodeEnable
                          //     ? () {}
                          //     : () async {
                          //         // await apiClient
                          //         //     .request(API.login.phoneCode, data: {
                          //         //   'phone':
                          //         //   UserTool.userProvider.userInfo.phone,
                          //         // });
                          //         _beginCountDown();
                          //         if (_cantSelected) return;
                          //         _cantSelected = true;
                          //         Future.delayed(const Duration(seconds: 1),
                          //             () {
                          //           _cantSelected = false;
                          //         });
                          //       },
                          child: Container(
                            width: 180.w,
                            alignment: Alignment.centerRight,
                            color: Colors.transparent,
                            child: const Text("获取验证码"
                                // _countDownStr,
                                // style: TextStyle(
                                //     color: _getCodeEnable
                                //         ? kPrimaryColor
                                //         : BaseStyle.colorcccccc),
                                ),
                          ),
                        )),
                  ),
                ),
              ],
            ),
          ),
          //_bottomLineWidget(),
        ],
      ),
    );
  }

//  输入验证码
  _codeWidget() {
    return Container(
      alignment: Alignment.centerLeft,
      //margin: EdgeInsets.symmetric(horizontal: 20.w),
      // padding: EdgeInsets.symmetric(horizontal: 72.w),
      height: 40 * 2.h,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Expanded(
                  child: TextField(
                      onChanged: (String phone) {
                        setState(() {});
                      },
                      controller: _smsCodeController,
                      // focusNode: _smsCodeFocusNode,
                      keyboardType: TextInputType.number,
                      style: TextStyle(
                          fontSize: 36.sp, color: BaseStyle.color999999),
                      inputFormatters: [
                        LengthLimitingTextInputFormatter(4),
                      ],
                      cursorColor: Colors.black,
                      decoration: InputDecoration(
                        // prefixIcon: Container(
                        //   width: 10.w,
                        //   alignment: Alignment.centerLeft,
                        //   child: Text(
                        //     "验证码",
                        //     style: TextStyle(
                        //         fontSize: 32.sp,
                        //         color: const Color(0xFF000000)),
                        //   ),
                        // ),
                        prefixText: "验证码",
                        prefixStyle: const TextStyle(
                          color: Colors.black,
                        ),
                        enabledBorder: const UnderlineInputBorder(
                          // 不是焦点的时候颜色
                          borderSide: BorderSide(
                            color: BaseStyle.color999999,
                          ),
                        ),
                        hintText: "请输入验证码",
                        hintStyle: TextStyle(
                            color: BaseStyle.colorcccccc, fontSize: 36.sp),
                      )),
                ),
              ],
            ),
          ),
          //_bottomLineWidget(),
        ],
      ),
    );
  }

// //  倒计时
//   _beginCountDown() {
//     ///开始倒计时
//     setState(() {
//       _getCodeEnable = false;
//       _countDownStr = "重新获取($_countDownNum)";
//     });
//     _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
//       if (!mounted) {
//         return;
//       }
//       setState(() {
//         if (_countDownNum == 0) {
//           _countDownNum = 59;
//           _countDownStr = "获取验证码";
//           _getCodeEnable = true;
//           _timer.cancel();
//           return;
//         }
//         _countDownStr = "重新获取(${_countDownNum--})";
//       });
//     });
//   }

//  协议
  _recognizer(context, int type) {
    final TapGestureRecognizer recognizer = TapGestureRecognizer();
    recognizer.onTap = () {
      if (kDebugMode) {
        print("点击协议了");
      }

      ///跳转到用户协议页面
    };
    return recognizer;
  }

  _getText() {
    return GestureDetector(
      onTap: () {
        // _chooseAgreement = !_chooseAgreement;
        setState(() {});
      },
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
              width: 50.w,
              height: 50.w,
              padding: EdgeInsets.only(top: 6.w, right: 5.w),
              child: const Icon(CupertinoIcons.circle,
                  size: 18, color: Color(0xFFdddddd))),
          // !_chooseAgreement
          //     ? const Icon(CupertinoIcons.circle,
          //         size: 18, color: Color(0xFFdddddd))
          //     : const Icon(CupertinoIcons.checkmark_circle,
          //         size: 18, color: Colors.red)),
          RichText(
              text: TextSpan(
                  text: "我已阅读并同意",
                  style: TextStyle(
                      color: BaseStyle.colorcccccc, fontSize: 12 * 2.sp),
                  children: [
                TextSpan(
                    text: '《用户服务协议》',
                    style: TextStyle(color: kPrimaryColor, fontSize: 12 * 2.sp),
                    recognizer: _recognizer(context, 2)),
                TextSpan(
                  text: "和",
                  style: TextStyle(
                      color: BaseStyle.colorcccccc, fontSize: 12 * 2.sp),
                ),
                TextSpan(
                    text: '《隐私协议》',
                    style: TextStyle(color: kPrimaryColor, fontSize: 12 * 2.sp),
                    recognizer: _recognizer(context, 1)),
              ])),
        ],
      ),
    );
  }
}