dating_touchme_app/lib/pages/setting/match_spread_page.dart

import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:dating_touchme_app/extension/ex_widget.dart';
import 'package:dating_touchme_app/generated/assets.dart';
import 'package:dating_touchme_app/model/mine/rose_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import '../../controller/setting/spread_controller.dart';

class MatchSpreadPage extends StatelessWidget {
  const MatchSpreadPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GetX<SpreadController>(
      init: SpreadController(),
      builder: (controller){
        return Scaffold(
          appBar: PageAppbar(title: "入驻加盟"),
          body: SingleChildScrollView(
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 10.w, horizontal: 12.w),
              child: Column(
                children: [
                  SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: [
                        ...controller.roseList.asMap().entries.map((entry){
                          return PayItem(item: entry.value, active: controller.activePay.value, index: entry.key, changeActive: controller.changePayActive);
                        }),
                      ],
                    ),
                  ),
                  SizedBox(height: 32.w),
                  if(controller.roseList.isNotEmpty)Row(
                    children: [
                      Text('红娘权益', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
                    ],
                  ),
                  SizedBox(height: 24.w,),
                  if(controller.roseList.isNotEmpty)Wrap(
                    spacing: 10.w,
                    runSpacing: 18.w,
                    children: [
                      ...controller.list2.map((e){
                        return SizedBox(
                          width: 80.w,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Icon(TDIcons.help_circle, color: Colors.orange, size: 36),
                              SizedBox(height: 8.w,),
                              Text(e['title'], style: TextStyle(fontSize: 14, color: Color(0xFF999999))),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  if(e['unit'] != null)Text(e['unit'], style: TextStyle(fontSize: 14)),
                                  Text(e['desc'], style: TextStyle(fontSize: 14, color: Color(0xFF999999))),
                                ],
                              )
                            ],
                          ),
                        );
                      }),
                    ],
                  ),
                ],
              ),
            ),
          ),
          bottomNavigationBar: controller.roseList.isNotEmpty ? SafeArea(
              child: Container(
                height: 60,
                padding: EdgeInsets.symmetric(vertical: 5.w, horizontal: 16.w),
                child: TDButton(
                  text: '立即加入',
                  width: MediaQuery.of(context).size.width - 40,
                  size: TDButtonSize.large,
                  type: TDButtonType.fill,
                  shape: TDButtonShape.round,
                  style: TDButtonStyle(
                    textColor: Colors.white,
                    backgroundColor: Color(0xFFEE811B),
                  ),
                  activeStyle: TDButtonStyle(
                    textColor: Colors.white,
                    backgroundColor: Color(0xC3EE811B),
                  ),
                  onTap: (){
                    controller.submitOrder();
                  },
                ),
              )
          ) : null,
        );
      },
    );
  }
}


class PayItem extends StatefulWidget {
  final RoseData item;
  final int active;
  final int index;
  final void Function(int) changeActive;
  const PayItem({super.key, required this.item, required this.active,  required this.index, required this.changeActive, });

  @override
  State<PayItem> createState() => _PayItemState();
}

class _PayItemState extends State<PayItem> {
  @override
  Widget build(BuildContext context) {
    return Stack(
        children: [
          Container(
            width: 124.w,
            height: 160.h,
            margin: const EdgeInsets.only(right: 10),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(6.w)),
                color: widget.active == widget.index ? const Color.fromRGBO(239, 19, 46, .05) : Colors.white,
                border: widget.active == widget.index ? Border.all(width: 1, color: const Color(0xFFEE811B)) : Border.all(width: 1, color: const Color(0xFFEEEEEE))
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const SizedBox(height: 32),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Container(
                      padding: EdgeInsets.only(bottom: 5),
                      child: Text(
                        "¥",
                        style: TextStyle(
                            fontSize: 16.w,
                            color: Color(0xFFEE811B),
                            fontWeight: FontWeight.bold
                        ),
                      ),
                    ),
                    const SizedBox(width: 2),
                    Text(
                      "${widget.item.unitSellingPrice}",
                      style: TextStyle(
                          fontSize: 26.w,
                          color: Color(0xFFEE811B),
                          fontWeight: FontWeight.bold
                      ),
                    ),
                  ],
                ),
                TDText("￥${widget.item.unitOriginalPrice}", isTextThrough: true, style: TextStyle(color: Color(0xFFCCCCCC)),),
                const SizedBox(height: 18),
                Text(
                  "有效期：${widget.item.validityPeriodDays}天",
                  style: TextStyle(
                      fontSize: 14.w,
                      color: Color(0xFF333333),
                      fontWeight: FontWeight.bold
                  ),
                ),
              ],
            ),
          ),
          Positioned(
            left: 0,
            top: 0,
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 2.w, horizontal: 6.w),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(6.w),
                    bottomRight: Radius.circular(6.w),
                  ),
                  color: widget.active == widget.index ? const Color(0xFFEE811B) : Color(0xFFCCCCCC)
              ),
              child: Center(
                child: Text(widget.item.productTitle!.replaceAll('加盟费', ''), style: TextStyle(fontSize: 12, color: Colors.white)),
              ),
            ),
          )
        ],
      ).onTap((){
        widget.changeActive(widget.index);
      });
  }
}