import 'package:flutter/material.dart';

import 'package:project_telephony/base/base_style.dart';
import 'package:project_telephony/ui/widget/check_radio.dart';
// import 'package:project_telephony/ui/widget/check_radio.dart';

import 'package:project_telephony/ui/widget/plone_back_button.dart';
import 'package:project_telephony/ui/widget/plone_bottom.dart';
import 'package:project_telephony/ui/widget/putup_widget.dart';
import 'package:project_telephony/utils/headers.dart';

class MembersPage extends StatelessWidget {
  MembersPage({Key? key}) : super(key: key);
  ChooseItems? _chooseItem;
  List<dynamic>? data;
  final List<ChooseItems> _piceList = [
    ChooseItems(
      month: 12,
      pice: 10,
    ),
    ChooseItems(
      month: 1,
      pice: 1,
    ),
  ];
  int _selectIndex = 0;
  List payWay = [
    {
      'payName': '微信支付',
      'payUrl': Assets.icons.weixin.path,
    },
    {'payName': '支付宝支付', 'payUrl': Assets.icons.zhifubao.path}
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: [
        Align(
          child: SizedBox(
            width: 750.w,
            height: 1624.w,
          ),
        ),
        Positioned(
            child: Image.asset(
          Assets.images.vipbg.path,
        )),
        Positioned(top: 256.w, left: 32.w, child: _getBanner()),
        Positioned(
            top: 480.w,
            child: Container(
              height: 1208.w,
              width: 750.w,
              decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20))),
              child: Column(children: [
                _getRecharge(),
                _getSpay(payWay),
                PloneBottom(
                  border: true,
                  onTap: () {},
                  textColor: const Color(0xFF333333),
                  text: "立即开通",
                  color1: const Color(0xFFFFF6D8),
                  color2: const Color(0xFFFFEAB0),
                )
              ]),
            )),
        Positioned(
            top: 68.w,
            child: Row(
              children: [
                const CloudBackButton(
                  isSpecial: true,
                ),
                154.wb,
                Text('会员中心', style: Theme.of(context).textTheme.headline6),
              ],
            )),
      ],
    ));
  }

  // _get() {
  //   return Stack(
  //     children: [
  //       Align(
  //         child: SizedBox(
  //           width: 750.w,
  //           height: 1410.w,
  //         ),
  //       ),
  //       Positioned(
  //         child: _getBanner(),
  //       ),
  //       Positioned(
  //           top: 224.w,
  //           child: Container(
  //             height: 1140.w,
  //             width: 750.w,
  //             decoration: const BoxDecoration(
  //                 color: Colors.white,
  //                 borderRadius: BorderRadius.only(
  //                     topLeft: Radius.circular(20),
  //                     topRight: Radius.circular(20))),
  //             child: Column(children: []),
  //           ))
  //     ],
  //   );
  // }

  //banner
  _getBanner() {
    return SizedBox(
      // margin: EdgeInsets.symmetric(horizontal: 32.w),
      child: Stack(children: [
        Align(
            child: SizedBox(
          width: 686.w,
          child: Image.asset(
            Assets.images.vipbanner.path,
            width: 622.w,
            height: 244.w,
            fit: BoxFit.fill,
          ),
        )),
        Positioned(
            child: Container(
                margin: EdgeInsets.symmetric(horizontal: 64.w, vertical: 16.w),
                child: _getText()))
      ]),
    );
  }

//banner 文字
  _getText() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _getVip(),
        18.hb,
        Text(
          "解锁全部功能",
          style: TextStyle(
              color: Colors.white,
              fontSize: BaseStyle.fontSize32,
              fontWeight: FontWeight.bold),
        ),
        16.hb,
        Text(
          "解锁全部功能",
          style: TextStyle(color: Colors.white, fontSize: BaseStyle.fontSize24),
        )
      ],
    );
  }

  _getVip() {
    return Row(
      children: [
        const Text(
          "vip",
          style: TextStyle(color: Color(0xFFFFEAB0)),
        ),
        Container(
          width: 8.w,
          height: 8.w,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(4),
            color: const Color(0xFFFFEAB0),
          ),
        ),
        const Text(
          "未开通会员",
          style: TextStyle(color: Color(0xFFFFEAB0)),
        )
      ],
    );
  }

//充值金额
  _getRecharge() {
    return Container(
      width: double.infinity,
      decoration: const BoxDecoration(),
      clipBehavior: Clip.antiAlias,
      child: ListView(
        shrinkWrap: true,
        children: [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 80.w, vertical: 32.w),
            child: SortWidget(
              crossAxisSpacing: 24.w,
              itemList: _piceList,
              childAspectRatio: 288 / 216,
              crossAxisCount: 2,
              mainAxisSpacing: 20.w,
              callback: (item, index) {
                _chooseItem = item;
                // setState(() {});
              },
              pickItem: _chooseItem,
            ),
          ),
          // 762.hb,
          //40.hb,
        ],
      ),
    );
  }

  _getSpay(List item) {
    return Container(
      // color: Colors.red,
      width: double.infinity,
      height: 500.w,
      margin: EdgeInsets.symmetric(horizontal: 64.w),
      child: ListView.builder(
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () {
              _selectIndex = index;
              // setState(() {});
            },
            child: Container(
                padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 40.w),
                color: Colors.white,
                child: Row(
                  children: [
                    SizedBox(
                      child: Image.asset(
                        item[index]['payUrl'],
                        width: 40.w,
                        height: 40.h,
                      ),
                    ),
                    20.wb,
                    SizedBox(
                      width: 200.w,
                      child: Text(
                        item[index]['payName'],
                        style: TextStyle(
                            color: BaseStyle.color333333,
                            fontSize: BaseStyle.fontSize28),
                      ),
                    ),
                    const Spacer(),
                    BeeCheckRadio(
                      value: index,
                      groupValue: [_selectIndex],
                    ),
                  ],
                )),
          );
        },
        itemCount: item.length,
      ),
    );

    // ListView.builder(
    //   itemBuilder: (context, index) {
    //     return GestureDetector(
    //       onTap: () {
    //         _selectIndex = index;
    //         // setState(() {});
    //       },
    //       child: Container(
    //           padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 40.w),
    //           color: Colors.white,
    //           child: Row(
    //             children: [
    //               SizedBox(
    //                 child: Image.asset(
    //                   item[index]['payUrl'],
    //                   width: 40.w,
    //                   height: 40.h,
    //                 ),
    //               ),
    //               20.wb,
    //               SizedBox(
    //                 width: 200.w,
    //                 child: Text(
    //                   item[index]['payName'],
    //                   style: TextStyle(
    //                       color: BaseStyle.color333333,
    //                       fontSize: BaseStyle.fontSize28),
    //                 ),
    //               ),
    //               const Spacer(),
    //               BeeCheckRadio(
    //                 value: index,
    //                 groupValue: [_selectIndex],
    //               ),
    //             ],
    //           )),
    //     );
    //   },
    //   itemCount: item.length,
    // );
  }
}