import 'package:flutter/material.dart';
import 'package:extended_tabs/extended_tabs.dart';

class Login extends StatefulWidget {
  @override
  _Login createState() => _Login();
}

class _Login extends State<Login> with TickerProviderStateMixin{
  TabController tabController;

  //表单状态
  GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  //用户名输入框控制器，此控制器可以监听用户名输入框操作
  TextEditingController _userNameController = new TextEditingController();

  //焦点
  FocusNode _focusNodeUserName = new FocusNode();
  FocusNode _focusNodePassWord = new FocusNode();

  var _password = '';//用户名
  var _username = '';//密码
  var _isShowPwd = false;//是否显示密码
  var _isShowClear = false;//是否显示输入框尾部的清除按钮

  @override
  void initState() {
    tabController = TabController(length: 2, vsync: this);
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Flex(
        direction: Axis.vertical,
        children: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width,
            height: 250,
            color: Colors.red[500],
          ),
          Container(
            color: Colors.red[500],
            child: TabBar(
              indicator: ColorTabIndicator(Colors.red[500]),
              labelColor: Colors.white,
              tabs: [
                Tab(
                  child: Text(
                    '登录',
                    style: TextStyle(
                      fontSize: 18
                    )
                  ),
                ),
                Tab(
                  child: Text(
                    '注册',
                    style: TextStyle(
                      fontSize: 18
                    ),
                  ),
                ),
              ],
              controller: tabController,
            ),
          ),
          Expanded(
              child: ExtendedTabBarView(
                controller: tabController,
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(left: 20,right: 20),
                    decoration: new BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(8)),
                        color: Colors.white
                    ),
                    child: Form(
                      key: _formKey,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          new TextFormField(
                            controller: _userNameController,
                            focusNode: _focusNodeUserName,
                            //设置键盘类型
                            keyboardType: TextInputType.number,
                            decoration: InputDecoration(
                              labelText: "手机号",
                              hintText: "请输入手机号",
                              prefixIcon: Icon(Icons.local_phone),
                              //尾部添加清除按钮
                              suffixIcon:(_isShowClear)
                                  ? IconButton(
                                icon: Icon(Icons.clear),
                                onPressed: (){
                                  // 清空输入框内容
                                  _userNameController.clear();
                                },
                              )
                                  : null ,
                            ),
                            //验证用户名
                            validator: validateUserName,
                            //保存数据
                            onSaved: (String value){
                              _username = value;
                            },
                          ),
                          new TextFormField(
                            controller: _userNameController,
                            focusNode: _focusNodeUserName,
                            //设置键盘类型
                            keyboardType: TextInputType.visiblePassword,
                            decoration: InputDecoration(
                              labelText: "密码",
                              hintText: "请输入密码",
                              prefixIcon: Icon(Icons.lock),
                              //尾部添加清除按钮
                              suffixIcon:(_isShowClear)
                                  ? IconButton(
                                icon: Icon(Icons.clear),
                                onPressed: (){
                                  // 清空输入框内容
                                  _userNameController.clear();
                                },
                              )
                                  : null ,
                            ),
                            //验证用户名
                            validator: validateUserName,
                            //保存数据
                            onSaved: (String value){
                              _username = value;
                            },
                          ),
                        ],
                      ),
                    ),
                  ),
                  Container()
                ],
              )
          )
        ],
      ),
//      body: Stack(
//        children: <Widget>[
//          Container(
//            width: MediaQuery.of(context).size.width,
//            height: 250,
//            color: Colors.red[500],
//          ),
//          Positioned(
//
//            child: Text('测试'),
//          )
//        ],
//      ),
//      body: Container(
//        width: MediaQuery.of(context).size.width,
//        height: 250,
//        color: Colors.red[500],
//        child: Row(
//          children: <Widget>[
//
//          ],
//        ),
//      ),
    );
  }

  /**
   * 验证用户名
   */
  String validateUserName(value){
    // 正则匹配手机号
    RegExp exp = RegExp(r'^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$');
    if (value.isEmpty) {
      return '用户名不能为空!';
    }else if (!exp.hasMatch(value)) {
      return '请输入正确手机号';
    }
    return null;
  }


}