import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:get/get.dart';
import '../../widgets/MyButton/index.dart';
import '../../widgets/MyCard/widgets/CardCell.dart';
import '../../widgets/layout/BasicPage.dart';
import 'package:flutter_picker/flutter_picker.dart';

class AddBankPage extends BasicPage {
  AddBankPage({Key? key}) : super(key: key) {
    naviTitle = '绑定银行卡';
  }

  // late Map  bankBrand;
  final bankBrand = Rx<Map>({});

  TextEditingController _unameController = TextEditingController();
  TextEditingController _bankController = TextEditingController();
  TextEditingController _phoneController = TextEditingController();
  GlobalKey _formKey = GlobalKey<FormState>();


  @override
  Widget builder(BuildContext context) {
    return Container(
      // alignment: Alignment.bottomLeft,
      child: Form(
        key: _formKey, //设置globalKey，用于后面获取FormState
        autovalidateMode: AutovalidateMode.onUserInteraction,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
                padding: EdgeInsets.fromLTRB(15, 15, 0, 5),
                child: Text(
                  '请绑定持卡人本人的银行卡',
                  style: TextStyle(
                    fontSize: 16.sp,
                  ),
                )),
            Container(
              margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
              padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
              color: Colors.white,
              height: 54.w,
              child: Row(
                children: [
                  Padding(padding: EdgeInsets.fromLTRB(0, 0, 18, 0),
                    child:Text(
                      '持卡人姓名：',
                      style: TextStyle(
                          fontSize: 18.sp,
                          color: const Color(0xFF606060),
                          fontWeight: FontWeight.bold,
                          letterSpacing: 0),
                    ),
                  ),
                  Expanded(
                    child: TextFormField(
                      controller: _unameController,
                      decoration: InputDecoration(
                        contentPadding:
                            const EdgeInsets.symmetric(vertical: 4.0),
                        hintText: '请输入真实姓名',
                        border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(15),
                            borderSide: BorderSide.none),
                      ),
                      // 校验用户名
                      validator: (v) {
                        return v!.trim().isNotEmpty ? null : "真实姓名不能为空";
                      },
                    ),
                  ),
                ],
              ),
            ),
            Container(
              color: Colors.white,
              height: 54.w,
              margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
              padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
              child: Row(
                children: [
                  Padding(padding: EdgeInsets.fromLTRB(0, 0, 15, 0),
                    child:Text(
                      '卡号：',
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        fontSize: 18.sp,
                        color: const Color(0xFF606060),
                        fontWeight: FontWeight.bold,
                        letterSpacing: 17,
                      ),
                    ),
                  ),
                  Expanded(
                    child: TextFormField(
                      controller: _bankController,
                      decoration: InputDecoration(
                        contentPadding:
                            const EdgeInsets.symmetric(vertical: 4.0),
                        hintText: '请输入有效卡号',
                        border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(15),
                            borderSide: BorderSide.none),
                      ),
                      // obscureText: true,
                      //校验密码
                      validator: (v) {
                        return v!.trim().isNotEmpty ? null : "卡号不能为空";
                      },
                    ),
                  ),
                ],
              ),
            ),
            Container(
              color: Colors.white,
              height: 54.w,
              margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
              padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
              child: Row(
                children: [
                  Text(
                    '开户行：',
                    textAlign: TextAlign.left,
                    style: TextStyle(
                      fontSize: 18.sp,
                      color: const Color(0xFF606060),
                      fontWeight: FontWeight.bold,
                      letterSpacing: 8,
                    ),
                  ),
                  Expanded(
                      child: ListTile(
                        title:Obx(()=>Text(bankBrand.value.length==0?'请选择银行':bankBrand.value['name'])),
                        onTap: () {
                          showPicker(context);
                        },
                      ),

                  ),
                ],
              ),
            ),
            Container(
              color: Colors.white,
              height: 54.w,
              margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
              padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
              child: Row(
                children: [
                  Padding(padding: EdgeInsets.fromLTRB(0, 0, 18, 0),
                      child: Text(
                        '预留手机号：',
                        style: TextStyle(
                            fontSize: 18.sp,
                            color: const Color(0xFF606060),
                            fontWeight: FontWeight.bold,
                            letterSpacing: 0),
                      ),
                  ),

                  Expanded(
                    child: TextFormField(
                      controller: _phoneController,
                      decoration: InputDecoration(
                        contentPadding:
                            const EdgeInsets.symmetric(vertical: 4.0),
                        hintText: '请输入银行卡预留手机号',
                        border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(15),
                            borderSide: BorderSide.none),
                      ),
                      //校验密码
                      validator: (v) {
                        return v!.trim().isNotEmpty ? null : "预留手机号不能为空";
                      },
                    ),
                  ),
                ],
              ),
            ),

            // 登录按钮
            Padding(
              padding: const EdgeInsets.only(top: 35.0),
              child: Row(
                children: <Widget>[
                  Container(
                    width:360.w,

                    height:65.w ,
                    alignment:Alignment.center,
                    child:   MyButton(
                        text: '绑定',
                        type:  0,
                        disable: false,
                        onClick: (){
                          if ((_formKey.currentState as FormState).validate()&&bankBrand.value.length!=0) {
                            print('ok');
                            //验证通过提交数据
                          }else{
                            Fluttertoast.showToast(
                                msg: '请完整填写表单内容'
                            );
                          }
                        }
                    ),
                  )

                ],
              ),
            )
          ],
        ),
      ),
    );
  }
  showPicker(BuildContext context) {
    const PickerData = ['中国建设银河','8s鱼就是','阿三大苏打','阿三大苏打','阿三大苏打','阿三大苏打','阿三大苏打','阿三大苏打','阿三大苏打','阿三大苏打','阿三大苏打','阿三大苏打','阿三大苏打'];
    Picker picker = Picker(
      height: 230.w,
        adapter: PickerDataAdapter<String>(
            pickerdata: PickerData),
        changeToFirst: false,
        onCancel: (){
          print('object');
        },
        confirmText: '确定',
        cancelText: '取消',
        textAlign: TextAlign.left,
        textStyle: TextStyle(color: Colors.blue, ),
        selectedTextStyle: TextStyle(color: Colors.red),
        columnPadding: const EdgeInsets.all(8.0),
        onConfirm: (Picker picker, List<int> value) {
          print('666666666$value');
          // bankBrand(picker);
          int index = value.first;
          bankBrand({'id':index,'name':picker.getSelectedValues().first});
          print(bankBrand);
        }
        );
    picker.showModal(context);
  }

}

