import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/extension/ex_widget.dart';
import 'package:dating_touchme_app/pages/mine/withdraw_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class MyWalletPage extends StatefulWidget {
  const MyWalletPage({super.key});

  @override
  State<MyWalletPage> createState() => _MyWalletPageState();
}

class _MyWalletPageState extends State<MyWalletPage> {

  int timeActive = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PageAppbar(title: "我的钱包"),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: 44.w,
              margin: EdgeInsets.only(
                top: 9.w,
                bottom: 16.w
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: 72.w,
                    height: 44.w,
                    decoration: BoxDecoration(
                      border: Border(
                        bottom: BorderSide(
                          width: 1,
                          color: Color.fromRGBO(117, 98, 249, timeActive == 1 ? 1 : 0)
                        )
                      )
                    ),
                    child: Center(
                      child: Text(
                        "最近一个月",
                        style: TextStyle(
                          fontSize: 14.w,
                          color: Color.fromRGBO(51, 51, 51, timeActive == 1 ? 1 : .5),
                          fontWeight: timeActive == 1 ? FontWeight.w700 : FontWeight.w400
                        ),
                      ),
                    ),
                  ).onTap(() {
                    timeActive = 1;
                    setState(() {

                    });
                  }),
                  Container(
                    width: 72.w,
                    height: 44.w,
                    decoration: BoxDecoration(
                        border: Border(
                            bottom: BorderSide(
                                width: 1,
                                color: Color.fromRGBO(117, 98, 249, timeActive == 2 ? 1 : 0)
                            )
                        )
                    ),
                    child: Center(
                      child: Text(
                        "3个月",
                        style: TextStyle(
                            fontSize: 14.w,
                            color: Color.fromRGBO(51, 51, 51, timeActive == 2 ? 1 : .5),
                            fontWeight: timeActive == 2 ? FontWeight.w700 : FontWeight.w400
                        ),
                      ),
                    ),
                  ).onTap(() {
                    timeActive = 2;
                    setState(() {

                    });
                  }),
                  Container(
                    width: 72.w,
                    height: 44.w,
                    decoration: BoxDecoration(
                        border: Border(
                            bottom: BorderSide(
                                width: 1,
                                color: Color.fromRGBO(117, 98, 249, timeActive == 3 ? 1 : 0)
                            )
                        )
                    ),
                    child: Center(
                      child: Text(
                        "6个月",
                        style: TextStyle(
                            fontSize: 14.w,
                            color: Color.fromRGBO(51, 51, 51, timeActive == 13 ? 1 : .5),
                            fontWeight: timeActive == 3 ? FontWeight.w700 : FontWeight.w400
                        ),
                      ),
                    ),
                  ).onTap(() {
                    timeActive = 3;
                    setState(() {

                    });
                  }),
                  Container(
                    width: 72.w,
                    height: 44.w,
                    decoration: BoxDecoration(
                        border: Border(
                            bottom: BorderSide(
                                width: 1,
                                color: Color.fromRGBO(117, 98, 249, timeActive == 4 ? 1 : 0)
                            )
                        )
                    ),
                    child: Center(
                      child: Text(
                        "全部",
                        style: TextStyle(
                            fontSize: 14.w,
                            color: Color.fromRGBO(51, 51, 51, timeActive == 4 ? 1 : .5),
                            fontWeight: timeActive == 4 ? FontWeight.w700 : FontWeight.w400
                        ),
                      ),
                    ),
                  ).onTap(() {
                    timeActive = 4;
                    setState(() {

                    });
                  }),
                ],
              ),
            ),
            Container(
              width: 355.w,
              height: 129.w,
              margin: EdgeInsets.only(
                bottom: 24.w
              ),
              padding: EdgeInsets.symmetric(
                vertical: 12.w
              ),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(10.w)),
                color: const Color.fromRGBO(247, 247, 247, 1)
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: 255.w,
                    padding: EdgeInsets.symmetric(
                      horizontal: 16.w
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "100.00",
                              style: TextStyle(
                                fontSize: 20.w,
                                fontWeight: FontWeight.w500
                              ),
                            ),
                            SizedBox(height: 6.w,),
                            Text(
                              "营收(元)",
                              style: TextStyle(
                                fontSize: 13.w,
                                color: const Color.fromRGBO(102, 102, 102, 1)
                              ),
                            )
                          ],
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "5.00",
                              style: TextStyle(
                                  fontSize: 20.w,
                                  fontWeight: FontWeight.w500,
                                color: const Color.fromRGBO(117, 98, 249, 1)
                              ),
                            ),
                            SizedBox(height: 6.w,),
                            Text(
                              "营收(元)",
                              style: TextStyle(
                                  fontSize: 13.w,
                                  color: const Color.fromRGBO(102, 102, 102, 1)
                              ),
                            )
                          ],
                        ),
                      ],
                    ),
                  ),
                  Container(
                    width: 255.w,
                    height: 42.w,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.all(Radius.circular(42.w)),
                      color: const Color.fromRGBO(117, 98, 249, 1)
                    ),
                    child: Center(
                      child: Text(
                        "提现",
                        style: TextStyle(
                          fontSize: 14.w,
                          fontWeight: FontWeight.w500,
                          color: Colors.white
                        ),
                      ),
                    ),
                  ).onTap(() {
                    Get.to(() => WithdrawPage());
                  })
                ],
              ),
            ),
            Padding(
              padding: EdgeInsetsGeometry.symmetric(
                horizontal: 10.w
              ),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "流水明细",
                    style: TextStyle(
                        fontSize: 13.w,
                        fontWeight: FontWeight.w500
                    ),
                  )
                ],
              ),
            ),
            SizedBox(height: 22.w,),
            InfoItem(),
            InfoItem(),
            InfoItem(),
            InfoItem(),
            InfoItem(),
          ],
        ),
      ),
    );
  }
}

class InfoItem  extends StatefulWidget {
  const InfoItem({super.key});

  @override
  State<InfoItem> createState() => _InfoItemState();
}

class _InfoItemState extends State<InfoItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsetsGeometry.only(
        left: 16.w,
        right: 16.w,
        bottom: 12.w,
      ),
      margin: EdgeInsets.only(
        bottom: 16.w
      ),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            width: 1,
            color: const Color.fromRGBO(235, 238, 238, 1)
          )
        )
      ),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                "订单类型：提现-成功",
                style: TextStyle(
                  fontSize: 14.w,
                ),
              ),
              RichText(
                text: TextSpan(
                  style: TextStyle(
                    fontSize: 14.w,
                    fontWeight: FontWeight.w500
                  ),
                  children: [
                    TextSpan(
                      text: "提现金额：",
                    ),
                    TextSpan(
                      text: "680.00",
                      style: TextStyle(
                        color: const Color.fromRGBO(117, 98, 249, 1)
                      )
                    ),
                  ]
                ),
              )
            ],
          ),
          SizedBox(height: 8.w,),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                "服务嘉宾：张三",
                style: TextStyle(
                  fontSize: 12.w,
                ),
              ),
              RichText(
                text: TextSpan(
                    style: TextStyle(
                        fontSize: 12.w,
                        fontWeight: FontWeight.w500
                    ),
                    children: [
                      TextSpan(
                        text: "营收：",
                      ),
                      TextSpan(
                          text: "680.00",
                          style: TextStyle(
                              color: const Color.fromRGBO(117, 98, 249, 1)
                          )
                      ),
                    ]
                ),
              )
            ],
          ),
          SizedBox(height: 8.w,),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                "时间：2024-04-23 15:23:48",
                style: TextStyle(
                  fontSize: 12.w,
                  color: const Color.fromRGBO(153, 153, 153, 1)
                ),
              ),
              Text(
                "查看打款凭证",
                style: TextStyle(
                    fontSize: 12.w,
                    color: const Color.fromRGBO(25, 114, 248, 1)
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}