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


Widget ysPayKeybord(BuildContext context,ValueSetter password,String title,String price){
  List _passArray = [];
  return StatefulBuilder(
    builder: (BuildContext context, StateSetter setState) {
      return Stack(
        children: [
          Container(
            margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top+hsp(200),left: hsp(50)),
            width: MediaQuery.of(context).size.width-hsp(100),
            height: title.length>18?hsp(550):hsp(500),
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(10))
            ),
            padding: EdgeInsets.all(hsp(30)),
            child: Column(
              children: [
                Row(
                  children: [
                    Container(width: hsp(40),),
                    Text('请输入支付密码',style: TextStyle(fontWeight: FontWeight.bold,fontSize: zsp(36),color: Color(0xFF333333)),),
                    GestureDetector(
                      onTap: (){
                        Navigator.pop(context);
                      },
                      child: Icon(Icons.close,size: hsp(40),color: Color(0xFF333333),),
                    )
                  ],
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                ),
                Container(
                  margin: EdgeInsets.only(top: hsp(80),bottom: hsp(10)),
                  child: Text('$title',style: TextStyle(fontWeight: FontWeight.bold,fontSize: zsp(34),color: Color(0xFF333333)),textAlign: TextAlign.center,),
                ),
                RichText(
                  text: TextSpan(
                      text: '付款 ',
                      style: TextStyle(fontWeight: FontWeight.bold,fontSize: zsp(34),color: Color(0xFF333333)),
                      children: [
                        TextSpan(
                            text: '$price',
                            style: TextStyle(color: Color(0xFFFF4747))
                        ),
                        TextSpan(
                            text: '元'
                        )
                      ]
                  ),
                ),
                Container(
                  width: MediaQuery.of(context).size.width-hsp(220),
                  height: hsp(100),
                  margin: EdgeInsets.only(top: hsp(40)),
                  decoration: BoxDecoration(
                      border: Border.all(color: Color(0xFF9A9A9A),width: 1),
                      borderRadius: BorderRadius.all(Radius.circular(5))
                  ),
                  child: ListView.separated(
                    itemBuilder: (context,index){
                      return Container(
                        height: hsp(100),
                        width: (MediaQuery.of(context).size.width-hsp(220)-6)/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(
              margin: EdgeInsets.only(top: MediaQuery.of(context).size.height-hsp(432)-20),
              width: MediaQuery.of(context).size.width,
              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.pop(context);
                          String text = _passArray.join('');
                          password(text);
                        }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(),
              )
          )
        ],
      );
    }
  );
}