import 'package:flutter/material.dart';
import 'package:netrain_flutter_app/common/AppColors.dart';
import 'package:netrain_flutter_app/douwen/dwMain.dart';

/**
 * 注册页
 */
class RegisterPage extends StatefulWidget {
  @override
  State createState() => _RegisterState();
}

class _RegisterState extends State {
  // 输入框控制器
  final nameController = TextEditingController();
  final phoneController = TextEditingController();
  final codeController = TextEditingController();
  final passwordController = TextEditingController();
  var isShowPassword = false;
  var isShowClean = false;
  final GlobalKey<FormState> _formKey = GlobalKey();

  @override
  void initState() {
    super.initState();

    /*nameController.addListener(() {
      setState(() {});
    });
    phoneController.addListener(() {
      setState(() {});
    });
    codeController.addListener(() {
      setState(() {});
    });*/
    passwordController.addListener(() {
      print("密码  ${passwordController.text}");
      setState(() {
        isShowClean = passwordController.text.isNotEmpty;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return registerWidget();
  }

  @override
  void dispose() {
    super.dispose();
    nameController.dispose();
    phoneController.dispose();
    codeController.dispose();
    passwordController.dispose();
  }

  Widget registerWidget() {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.of(context).popUntil(ModalRoute.withName("main"));
            // Navigator.of(context).pushNamed("login2");
          },
        ),
        centerTitle: true,
        title: Text("注册"),
        elevation: 0,
      ),
      body: Container(
          margin: EdgeInsets.fromLTRB(16, 0, 16, 0),
          child: Form(
              key:_formKey,
              child: ListView(
                children: [
                  _getTextField(
                      TextInputType.text, "请输入姓名", nameController, 10, false),
                  _getTextField(
                      TextInputType.number, "请输入手机号码", phoneController, 11,
                      false),
                  Stack(
                    children: [
                      _getTextField(
                          TextInputType.number, "请输入验证码", codeController, 8,
                          false),
                      Positioned(
                        child: Text("获取验证码"),
                        right: 16,
                        top: 20,
                      )
                    ],
                  ),
                  _getPassWordField(),
                  Text(
                    "密码由9-16位大小写字母、数字加特殊符号组成",
                    style:
                    TextStyle(color: Color(AppColors.mainColor), fontSize: 12),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 20),
                    height: 40,
                    child: ElevatedButton(
                        style: ButtonStyle(
                          backgroundColor:
                          MaterialStateProperty.resolveWith((states) {
                            if (states.contains(MaterialState.disabled)) {
                              return Color(AppColors.disabledColor);
                            }
                            return Color(AppColors.mainColor);
                          }),
                        ),
                        child: Text(
                          "注册",
                          style: TextStyle(color: Colors.white),
                        ),
                        onPressed: onRegisterClick),
                  )
                ],
              ))),
    );
  }

  onRegisterClick() {
    if(_formKey.currentState.validate()){
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("请求注册")));
    }
  }

  /// 校验是否全部为空
  bool checkIsAllEmpty() {
    if (phoneController.text.isNotEmpty &&
        nameController.text.isNotEmpty &&
        codeController.text.isNotEmpty &&
        passwordController.text.isNotEmpty) {
      return false;
    }
    return true;
  }

  Widget _getPassWordField() {
    TextFormField password = _getTextField(TextInputType.number, "请输入9-16位密码",
        passwordController, 16, isShowPassword);
    return Stack(
      children: [
        password,
        Positioned(
            right: 32,
            top: 10,
            child: Visibility(
              visible: isShowClean,
              child: IconButton(
                  icon: Icon(Icons.close),
                  onPressed: () {
                    setState(() {
                      passwordController.text = "";
                    });
                  }),
            )),
        Positioned(
            right: 0,
            top: 10,
            child: Visibility(
                visible: isShowClean,
                child: IconButton(
                  icon: isShowPassword
                      ? Icon(Icons.visibility_off)
                      : Icon(Icons.visibility),
                  onPressed: () {
                    setState(() {
                      isShowPassword = !isShowPassword;
                      // isShowPassword = !password.obscureText;
                    });
                  },
                ))),
      ],
    );
  }

  /// 输入框
  Widget _getTextField(TextInputType keyboardType, String hintText,
      TextEditingController controller, int maxLength, bool isPassword) {
    return TextFormField(
      validator: (value) {
        if(value.isEmpty){
          return "${hintText}不能为空";
        }else{
          return null;
        }
      },
      keyboardType: keyboardType,
      obscureText: isPassword,
      buildCounter: (context, {currentLength, isFocused, maxLength}) => null,
      maxLength: maxLength,
      autofocus: false,
      // 自动获取焦点
      decoration: InputDecoration(
        labelStyle: TextStyle(height: 0.5),
        //装饰
        alignLabelWithHint: true,
        contentPadding: EdgeInsets.only(top: 20, bottom: 10),
        enabledBorder: UnderlineInputBorder(
          // 默认状态的下划线边框
            borderSide:
            BorderSide(color: Color(AppColors.dividerColor), width: 0.5)),
        focusedBorder: UnderlineInputBorder(
          // 输入框获取焦点后
            borderSide:
            BorderSide(color: Color(AppColors.mainColor), width: 0.5)),
        errorBorder: UnderlineInputBorder(
          // 错误的时候
            borderSide: BorderSide(color: Colors.red, width: 0.5)),
        hintText: hintText,
        // labelText: hintText.substring(3)
      ),
      controller: controller,
    );
  }
}
