import 'package:flutter/material.dart';
import 'package:liftmanager/res/gaps.dart';
import 'package:liftmanager/net/api_service.dart';
import 'package:liftmanager/utils/toast.dart';
import 'package:liftmanager/widgets/app_bar.dart';
import 'package:liftmanager/internal/search/search_router.dart';
import 'package:liftmanager/widgets/app_search_bar.dart';
import 'package:liftmanager/res/resources.dart';
import 'package:liftmanager/routers/fluro_navigator.dart';
import 'package:liftmanager/widgets/load_image.dart';
import 'package:liftmanager/internal/bbs/bbs_router.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class VideoPay extends StatefulWidget {
  VideoPay(this.pay);

  final String pay;
  

  @override
  State<StatefulWidget> createState() {
    return VideoPayState();
  }
}

class VideoPayState extends State<VideoPay> {
  // ExpertListState({Key key}) : super(key: key);
  static const payType = [
    {
      "icon":"tab_first/pay_yue",
      "title":"账户余额支付",
      "price":"",
    },
    {
      "icon":"tab_first/pay_zhifubao",
      "title":"支付宝支付",
    },
    {
      "icon":"tab_first/pay_winxin",
      "title":"微信支付",
    },
  ];

  int indexNow = 999;
  String checkFalse = "tab_first/check_false";
  String checkTrue = "tab_first/check_true";

  @override
  Widget build(BuildContext context) {

    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    return Container(
      child: Scaffold(
        appBar: MyAppBar(
        centerTitle: "打赏",
      ),
      body:Container(
        child: Stack(
          children: <Widget>[
            Container(
              // padding: EdgeInsets.only(top:70),
              child:ListView(
                children:<Widget>[
                  Container(
                    padding: EdgeInsets.only(left:ScreenUtil().setWidth(15),right:ScreenUtil().setWidth(15),top:ScreenUtil().setWidth(15),bottom:ScreenUtil().setWidth(15)),
                    decoration: BoxDecoration(
                            border: Border(
                              bottom: BorderSide(width: 5, color:Color(0xfff5f5f5)),
                            ),
                          ),
                          child:Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children:<Widget>[
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children:<Widget>[
                                  Text(
                                    "学堂打赏",
                                    style: TextStyle(
                                      color:Color(0xff333333),
                                      fontSize:ScreenUtil().setSp(16)
                                    ),
                                    textAlign:TextAlign.start,
                                  ),
                                  Container(
                                    padding: EdgeInsets.only(left:ScreenUtil().setWidth(10)),
                                    child:Text(
                                      "小小维修工",
                                      style: TextStyle(
                                        color:Color(0xff666666),
                                        fontSize:ScreenUtil().setSp(16)
                                      ),
                                      textAlign:TextAlign.start,
                                    ),
                                  )
                                ]
                              ),
                              Container(
                                child:Text(
                                    "￥${widget.pay}",
                                    style: TextStyle(
                                      color:Colors.red,
                                      fontSize:ScreenUtil().setSp(16)
                                    ),
                                    textAlign:TextAlign.end,
                                  ),
                              )
                            ]
                          )
                  ),
                  Container(
                          padding: EdgeInsets.only(left:ScreenUtil().setWidth(15),right:ScreenUtil().setWidth(15),top:ScreenUtil().setWidth(15),bottom:ScreenUtil().setWidth(15)),
                          decoration: BoxDecoration(
                            border: Border(
                              bottom: BorderSide(width: 5, color:Color(0xfff5f5f5)),
                            ),
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children:<Widget>[
                              Text(
                                "共需支付",
                                style: TextStyle(
                                  color:Color(0xff222222),
                                  fontSize:ScreenUtil().setSp(16)
                                ),
                                textAlign:TextAlign.start,
                              ),
                              Text(
                                "￥${widget.pay}",
                                style: TextStyle(
                                  color:Colors.red,
                                  fontSize:ScreenUtil().setSp(16)
                                ),
                                textAlign:TextAlign.start,
                              ),
                            ]
                          ),
                  ),
                  Container(
                          padding: EdgeInsets.only(left:ScreenUtil().setWidth(15),right:ScreenUtil().setWidth(15),top:ScreenUtil().setWidth(100),bottom:ScreenUtil().setWidth(10)),
                          decoration: BoxDecoration(
                            border: Border(
                              bottom: BorderSide(width: 0.5, color:Color(0xfff5f5f5)),
                            ),
                          ),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children:<Widget>[
                              Text(
                                "选择支付方式",
                                style: TextStyle(
                                  color:Color(0xff000000),
                                  fontSize:ScreenUtil().setSp(16)
                                ),
                                textAlign:TextAlign.start,
                              ),
                              
                            ]
                          ),
                  ),
                  Container(
                    padding: EdgeInsets.only(left:ScreenUtil().setWidth(15),right:ScreenUtil().setWidth(15)),

                    child:Column(
                      children: payType.asMap().keys.map((i){
                        return Container(
                          decoration: BoxDecoration(
                            border: Border(
                              bottom: BorderSide(width: 0.5, color:Color(0xfff5f5f5)),
                            ),
                          ),
                          height:60,
                          child:Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children:<Widget>[
                              Row(
                                children: <Widget>[
                                  LoadAssetImage(
                                          // image: AssetImage(i['img']),
                                          payType[i]["icon"],
                                          width: ScreenUtil().setWidth(26),
                                          height:ScreenUtil().setWidth(26),
                                          // alignment: Alignment.centerLeft,
                                  ),
                                  Container(
                                    width:5,
                                    child:null
                                  ),
                                  Text(
                                    payType[i]["title"],
                                    style: TextStyle(
                                      color:Color(0xff000000),
                                      fontSize:ScreenUtil().setSp(16)
                                    ),
                                    textAlign:TextAlign.start,
                                  ),
                                  Container(
                                    width:5,
                                    child:null
                                  ),
                                  Text(
                                    payType[i]["price"] != null?"￥${payType[i]["price"]}":"",
                                    style: TextStyle(
                                      color:Color(0xff999999),
                                      fontSize:ScreenUtil().setSp(16)
                                    ),
                                    textAlign:TextAlign.start,
                                  ),
                                ],
                              ),
                              InkWell(
                                child: Container(
                                  // padding: EdgeInsets.only(top:10,left:5,right:5,bottom:10),
                                  child: LoadAssetImage(
                                          // image: AssetImage(i['img']),
                                          indexNow == i?checkTrue:checkFalse,
                                          width: ScreenUtil().setWidth(20),
                                          height:ScreenUtil().setWidth(20),
                                          // alignment: Alignment.centerLeft,
                                  ),
                                ),
                                onTap: (){
                                  setState(() {
                                    indexNow = i;
                                  });
                                  print(indexNow);
                                },
                              ),
                            ]
                          )
                        );
                      }).toList(),
                    )
                  )
                ]
              ),
            ),

            Positioned(
              bottom:0,
              left:0,
              child:Container(
                width: width,
                padding: EdgeInsets.only(top:ScreenUtil().setWidth(15),bottom:ScreenUtil().setWidth(15),left:ScreenUtil().setWidth(25),right:ScreenUtil().setWidth(25)),
                color:Colors.white,
                child: Container(
                      height:ScreenUtil().setWidth(44),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(ScreenUtil().setWidth(22)),
                        gradient: const LinearGradient(
                                          colors: [Color(0xFF00D9FF), Color(0xFF0287FF)]),
                      ),
                      child: FlatButton(
                        // padding: EdgeInsets.all(15.0),
                        child: Text("立即支付"),
                        textColor: Colors.white,
                        onPressed: () {
                          toasts("支付成功");
                          Navigator.pop(context);
                          
                        },
                      ),
                    ),
              )
            )
            
          ],
        )
      )
      ),
    );
  }
}