import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:liftmanager/utils/toast.dart';
import 'package:liftmanager/widgets/app_bar.dart';
import 'package:liftmanager/widgets/load_image.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;

    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);
                        },
                      ),
                    ),
                  ))
            ],
          ))),
    );
  }
}