import 'package:flutter/material.dart';
import '../styles/colors.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'dart:ui';

class Rechrage extends StatefulWidget {
  @override
  RechrageState createState() => RechrageState();
}

class RechrageState extends State<Rechrage> {
  List<Map> moenyList = [
    {
      'title': '10金币',
      'money': 10,
    },
    {
      'title': '50金币',
      'money': 50,
    },
    {
      'title': '100金币',
      'money': 100,
    },
    {
      'title': '300金币',
      'money': 300,
    },
    {
      'title': '500金币',
      'money': 500,
    }
  ];

  bool isInput = false;

  int choosemoeny = 0;

  bool autoChoose = false;

  FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    _focusNode.addListener(_focusNodeListener);
  }

  Future<Null> _focusNodeListener() async {
    if (_focusNode.hasFocus) {
      setState(() {
        if (!autoChoose) {
          autoChoose = true;
          choosemoeny = 0;
        }
        isInput = true;
      });
    } else {
      setState(() {
        isInput = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 375, height: 667)..init(context);
    
    return Scaffold(
        appBar: AppBar(
          backgroundColor: PRIMARY_COLOR,
          title: Text('充值'),
          centerTitle: true,
          elevation: 0,
        ),
        body: GestureDetector(

            ///透明也响应处理
            behavior: HitTestBehavior.translucent,
            onTap: () {
              ///触摸手气键盘
              FocusScope.of(context).requestFocus(FocusNode());
            },
            child: RefreshIndicator(
              color: PRIMARY_COLOR,
              backgroundColor: Colors.white,
              onRefresh: () async {
                await Future.delayed(const Duration(seconds: 1));
              },
              child: Container(
                color: BG_COLOR,
                child: Column(
                  children: <Widget>[_useGride(context)],
                ),
              ),
            )));
  }

  Widget _useGride(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(ScreenUtil().setWidth(15)),
      width: double.infinity,
      child: Wrap(
        alignment: WrapAlignment.spaceBetween,
        children: _allChooseBtn(context),
      ),
    );
  }

  List<Widget> _allChooseBtn(BuildContext context) {
    List<Widget> allWidget =
        List<Widget>.generate(moenyList.length, (int index) {
      return _chooseBtn(context, index);
    });

    Widget _input() {
      return Container(
          padding: EdgeInsets.only(left: 30, right: 5),
          color: autoChoose ? PRIMARY_COLOR : BG_SUB_COLOR,
          margin: EdgeInsets.only(bottom: ScreenUtil().setWidth(5)),
          width: ScreenUtil().setWidth(170),
          height: ScreenUtil().setWidth(60),
          child: TextField(
              focusNode: _focusNode,
              textAlign: TextAlign.center,
              keyboardType: TextInputType.number,
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w500,
                color: Colors.white,
              ),
              decoration: InputDecoration(
                hintText: isInput ? '请输入金额' : '其他金额',
                hintStyle: TextStyle(
                    color: Colors.white,
                    fontSize: 14,
                    fontWeight: isInput?FontWeight.w500:FontWeight.w400),
                suffixText: '金币',
                suffixStyle: TextStyle(
                    fontSize: 13,
                    fontWeight: FontWeight.w400,
                    color: Colors.white),
                border: OutlineInputBorder(borderSide: BorderSide.none),
              ),
              onChanged: (String str) {
                //输入监听
                choosemoeny = int.parse(str);
              }));
    }

    allWidget.add(_input());
    return allWidget;
  }

  Widget _chooseBtn(BuildContext context, int index) {
    bool isChoose = false;
    if (!autoChoose && moenyList[index]['money'] == choosemoeny) {
      isChoose = true;
    }
    return Container(
      margin: EdgeInsets.only(bottom: ScreenUtil().setWidth(5)),
      width: ScreenUtil().setWidth(170),
      height: ScreenUtil().setWidth(60),
      child: FlatButton(
        color: isChoose ? PRIMARY_COLOR : BG_SUB_COLOR,
        highlightColor: isChoose
            ? PRIMARY_COLOR.withOpacity(0.3)
            : BG_COLOR.withOpacity(0.3),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(moenyList[index]['title'],
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 14,
                    fontWeight: FontWeight.w500,
                    height: 1)),
            Text('¥' + moenyList[index]['money'].toString(),
                style: TextStyle(
                    color: isChoose ? Colors.white : Color(0xFF727785),
                    fontSize: 13,
                    fontWeight: FontWeight.w400,
                    height: 18 / 13)),
          ],
        ),
        onPressed: () {
          setState(() {
            autoChoose = false;
            choosemoeny = moenyList[index]['money'];
            FocusScope.of(context).requestFocus(FocusNode());
          });
        },
      ),
    );
  }
}