import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:ysairplane2/base/YSBase.dart';
import 'package:ysairplane2/tools/YSNetWorking.dart';
import 'package:ysairplane2/tools/YSTools.dart';

class YSInputPayPass extends StatefulWidget {
  final String code;
  const YSInputPayPass({Key key, this.code}) : super(key: key);
  @override
  _YSInputPayPassState createState() => _YSInputPayPassState();
}

class _YSInputPayPassState extends State<YSInputPayPass> {
  List _passArray = [];
  @override
  Widget build(BuildContext context) {
    return YSBase(
      ystitle: '设置支付密码',
      yschild: Stack(
        children: [
          Column(
            children: [
              Container(
                height: hsp(50),
                alignment: Alignment.center,
                margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top+hsp(150)),
                child: Text('设置6位数字支付密码',style: TextStyle(fontSize: zsp(40),color: Color(0xFF333333),fontWeight: FontWeight.bold),),
              ),
              Container(
                width: MediaQuery.of(context).size.width-hsp(100),
                height: hsp(100),
                margin: EdgeInsets.only(top: hsp(200)),
                decoration: BoxDecoration(
                    border: Border.all(color: Color(0xFF108EE9),width: 2),
                    borderRadius: BorderRadius.all(Radius.circular(5))
                ),
                child: ListView.separated(
                  itemBuilder: (context,index){
                    return Container(
                      height: hsp(100),
                      width: (MediaQuery.of(context).size.width-hsp(100)-9)/6,
                      child: Container(
                        height: hsp(20),
                        width: hsp(20),
                        decoration: BoxDecoration(
                            color: index<_passArray.length?Colors.black:Colors.transparent,
                            borderRadius: BorderRadius.all(Radius.circular(50))
                        ),
                      ),
                      alignment: Alignment.center,
                    );
                  },
                  separatorBuilder: (context,index){
                    return Container(width: 1,color: Color(0xFF9A9A9A),height: hsp(100),);
                  },
                  itemCount: 6,
                  padding: EdgeInsets.all(0),
                  scrollDirection: Axis.horizontal,
                ),
              ),
              Container(
                height: hsp(50),
                alignment: Alignment.center,
                child: Text('支付密码不能是重复、连续的数字',style: TextStyle(fontSize: zsp(28),color: Color(0xFF999999)),),
              ),
            ],
          ),
          Container(
              margin: EdgeInsets.only(top: MediaQuery.of(context).size.height-hsp(432)-MediaQuery.of(context).padding.top-44),
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                  color: Color(0xFF8C8C8C),
                  border: Border(top: BorderSide(width: 1,color: Color(0xFF8C8C8C)))
              ),
              height: hsp(432),
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    mainAxisSpacing: 1,
                    crossAxisSpacing: 1,
                    childAspectRatio: ((MediaQuery.of(context).size.width-2)/3)/((hsp(432)-3)/4)
                ),
                itemBuilder: (context, index) {
                  return GestureDetector(
                    onTap: (){
                      if(index==9){
                        if(_passArray.length>0){
                          _passArray.removeAt(_passArray.length-1);
                        }
                        setState(() {});
                      }else if(index==11){
                        if(_passArray.length==6){
                          Navigator.of(context).push(
                            CupertinoPageRoute(
                              builder: (context){
                                return YSInputPayPassAgain(code: widget.code,);
                              }
                            )
                          );
                        }else{
                          ysFlutterToast(context, '支付密码为6位数字');
                        }
                      }else{
                        if(_passArray.length<6){
                          _passArray.add(index+1);
                          setState(() {});
                        }
                      }
                    },
                    child: Container(
                      color: index==9||index==11?Color(0xFFD0D5DC):Colors.white,
                      child: Text(index==9?'删除':index==10?'0':index==11?'确认':'${index+1}',style: TextStyle(fontSize: zsp(40),color: Colors.black,fontWeight: FontWeight.bold),),
                      alignment: Alignment.center,
                    ),
                  );
                },
                itemCount: 12,
                padding: EdgeInsets.all(0),
                physics: NeverScrollableScrollPhysics(),
              )
          )
        ],
      ),
    );
  }
}

class YSInputPayPassAgain extends StatefulWidget {
  final String code;
  const YSInputPayPassAgain({Key key, this.code}) : super(key: key);
  @override
  _YSInputPayPassAgainState createState() => _YSInputPayPassAgainState();
}

class _YSInputPayPassAgainState extends State<YSInputPayPassAgain> {
  List _passArray = [];
  @override
  Widget build(BuildContext context) {
    return YSBase(
      ystitle: '设置支付密码',
      yschild: Stack(
        children: [
        Column(
          children: [
            Container(
              height: hsp(50),
              alignment: Alignment.center,
              margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top+hsp(150)),
              child: Text('请再次填写以确认',style: TextStyle(fontSize: zsp(40),color: Color(0xFF333333),fontWeight: FontWeight.bold),),
            ),
            Container(
              width: MediaQuery.of(context).size.width-hsp(100),
              height: hsp(100),
              margin: EdgeInsets.only(top: hsp(200)),
              decoration: BoxDecoration(
                  border: Border.all(color: Color(0xFF108EE9),width: 2),
                  borderRadius: BorderRadius.all(Radius.circular(5))
              ),
              child: ListView.separated(
                itemBuilder: (context,index){
                  return Container(
                    height: hsp(100),
                    width: (MediaQuery.of(context).size.width-hsp(100)-9)/6,
                    child: Container(
                      height: hsp(20),
                      width: hsp(20),
                      decoration: BoxDecoration(
                          color: index<_passArray.length?Colors.black:Colors.transparent,
                          borderRadius: BorderRadius.all(Radius.circular(50))
                      ),
                    ),
                    alignment: Alignment.center,
                  );
                },
                separatorBuilder: (context,index){
                  return Container(width: 1,color: Color(0xFF9A9A9A),height: hsp(100),);
                },
                itemCount: 6,
                padding: EdgeInsets.all(0),
                scrollDirection: Axis.horizontal,
              ),
            ),
            Container(
              height: hsp(50),
              alignment: Alignment.center,
              child: Text('支付密码不能是重复、连续的数字',style: TextStyle(fontSize: zsp(28),color: Color(0xFF999999)),),
            ),
            GestureDetector(
              onTap: (){
                if(_passArray.length==6){
                  _postPayPassData();
                }else{
                  ysFlutterToast(context, '支付密码为6位数字');
                }
              },
              child: Container(
                height: hsp(90),
                width: MediaQuery.of(context).size.width-wsp(50)*2,
                alignment: Alignment.center,
                margin: EdgeInsets.only(top: hsp(80)),
                decoration: BoxDecoration(
                    color: Color(0xFF3B7EF2),
                    borderRadius: BorderRadius.all(Radius.circular(5))
                ),
                child: Text('完成',style: TextStyle(fontSize: zsp(34),color: Colors.white),),
              ),
            ),
          ],
        ),
          Container(
              margin: EdgeInsets.only(top: MediaQuery.of(context).size.height-hsp(432)-MediaQuery.of(context).padding.top-44),
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                  color: Color(0xFF8C8C8C),
                  border: Border(top: BorderSide(width: 1,color: Color(0xFF8C8C8C)))
              ),
              height: hsp(432),
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    mainAxisSpacing: 1,
                    crossAxisSpacing: 1,
                    childAspectRatio: ((MediaQuery.of(context).size.width-2)/3)/((hsp(432)-3)/4)
                ),
                itemBuilder: (context, index) {
                  return GestureDetector(
                    onTap: (){
                      if(index==9){
                        if(_passArray.length>0){
                          _passArray.removeAt(_passArray.length-1);
                        }
                        setState(() {});
                      }else if(index==11){
                        if(_passArray.length==6){
                          _postPayPassData();
                        }else{
                          ysFlutterToast(context, '支付密码为6位数字');
                        }
                      }else{
                        if(_passArray.length<6){
                          _passArray.add(index+1);
                          setState(() {});
                        }
                      }
                    },
                    child: Container(
                      color: index==9||index==11?Color(0xFFD0D5DC):Colors.white,
                      child: Text(index==9?'删除':index==10?'0':index==11?'确认':'${index+1}',style: TextStyle(fontSize: zsp(40),color: Colors.black,fontWeight: FontWeight.bold),),
                      alignment: Alignment.center,
                    ),
                  );
                },
                itemCount: 12,
                padding: EdgeInsets.all(0),
                physics: NeverScrollableScrollPhysics(),
              )
          )

        ],
      ),
    );
  }

  _postPayPassData() async{
    var dict = await ysRequestHttpEncrypt(context,type: requestType.post,api: '/app/applets/balance/setPayPassword',
        parameter: {'verificationCode':widget.code,'password':_passArray.join('')},isLoading: false,isToken: true);
    if(dict!=null){
      Navigator.pop(context);
      Navigator.pop(context);
      Navigator.pop(context);
    }
  }
}