import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:roundcheckbox/roundcheckbox.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

class LiveRoomPage extends StatefulWidget {
  final int id;
  const LiveRoomPage({super.key, required this.id});

  @override
  State<LiveRoomPage> createState() => _LiveRoomPageState();
}

class _LiveRoomPageState extends State<LiveRoomPage> {


  String message = '';
  final TextEditingController _messageController = TextEditingController();

  final activeGift = ValueNotifier<int?>(null);

  List<Map> giftList = [
    {"icon": "assets/gift1.png", "title": "爱心礼物", "price": 30},
    {"icon": "assets/gift2.png", "title": "小小小星星", "price": 30},
    {"icon": "assets/gift3.png", "title": "助威", "price": 30},
    {"icon": "assets/gift4.png", "title": "点赞", "price": 30},
    {"icon": "assets/gift5.png", "title": "崇拜衣柜", "price": 30},
  ];

  int giftNum = 1;

  final activePay = ValueNotifier<int?>(null);
  List<Map> payList = [
    {"num": 10, "price": 10, "hasTag": true},
    {"num": 60, "price": 60, "hasTag": true},
    {"num": 300, "price": 60, "hasTag": true},
    {"num": 1080, "price": 1080, "hasTag": false},
    {"num": 2880, "price": 2880, "hasTag": false},
    {"num": 5000, "price": 5000, "hasTag": false},
    {"num": 10000, "price": 10000, "hasTag": false},
    {"num": 20000, "price": 20000, "hasTag": false},
    {"num": 50000, "price": 50000, "hasTag": false},
  ];

  final payChecked = ValueNotifier<bool>(true);

  changeActive(int index){
    activeGift.value = index;
    setState(() {

    });
  }

  changePayActive(int index){
    activePay.value = index;
    setState(() {

    });
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  Color.fromRGBO(248, 242, 255, 1),
                  Color.fromRGBO(247, 247, 247, 1),
                ],
              ),
            ),
          ),
          Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.bottomCenter,
                end: Alignment.topCenter,
                colors: [
                  Color.fromRGBO(19, 16, 47, 1),
                  Color.fromRGBO(19, 16, 47, 1),
                ],
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
            child: Column(
              children: [
                SizedBox(height: 21.w,),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container (
                      height: 80.w,
                      padding: EdgeInsets.symmetric(horizontal: 6.w),
                      margin: EdgeInsets.only(left: 21.w),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(80.w)),
                        color: const Color.fromRGBO(0, 0, 0, .25)
                      ),
                      child: Row(
                        children: [
                          Image.asset(
                            "assets/user_avatar.png",
                            width: 68.w,
                            height: 68.w,
                          ),
                          SizedBox(width: 14.w,),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                "开心的橘子",
                                style: TextStyle(
                                  fontSize: 26.w,
                                  color: Colors.white
                                ),
                              ),
                              Row(
                                children: [
                                  Image.asset(
                                    "assets/fire_icon.png",
                                    width: 21.w,
                                    height: 24.w,
                                  ),
                                  SizedBox(width: 9.w,),
                                  Text(
                                    "1263",
                                    style: TextStyle(
                                      fontSize: 20.w,
                                      color: Colors.white,
                                      fontWeight: FontWeight.w500
                                    ),
                                  )
                                ],
                              )
                            ],
                          ),
                          SizedBox(width: 30.w,),
                          Container(
                            width: 94.w,
                            height: 55.w,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(55.w)),
                              color: const Color.fromRGBO(253, 43, 84, 1)
                            ),
                            child: Center(
                              child: Text(
                                "关注",
                                style: TextStyle(
                                  fontSize: 26.w,
                                  color: Colors.white,
                                  fontWeight: FontWeight.w500,
                                  height: 1
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                    Container(
                      width: 60.w,
                      height: 60.w,
                      margin: EdgeInsets.only(right: 31.w),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(60.w)),
                        color: const Color.fromRGBO(0, 0, 0, .3)
                      ),
                      child: Center(
                        child: Image.asset(
                          "assets/close_arrow.png",
                          width: 28.w,
                          height: 28.w,
                        ),
                      ),
                    )
                  ],
                ),
                SizedBox(height: 15.w,),
                Stack(
                  children: [
                    Container(
                      width: 355.w,
                      height: 350.w,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(18.w)),
                        color: const Color.fromRGBO(47, 10, 94, 1)
                      ),
                    ),
                    Positioned(
                      top: 10.w,
                      left: 10.w,
                      child: Container(
                        width: 84.w,
                        height: 26.w,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(26.w)),
                          color: const Color.fromRGBO(142, 20, 186, 1)
                        ),
                        child: Center(
                          child: Text(
                            "主持人",
                            style: TextStyle(
                              fontSize: 18.w,
                              color: Colors.white
                            ),
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                      top: 11.w,
                      right: 10.w,
                      child: Container(
                        width: 40.w,
                        height: 40.w,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(39.w)),
                          color: const Color.fromRGBO(0, 0, 0, .3)
                        ),
                        child: Center(
                          child: Image.asset(
                            "assets/gift_icon.png",
                            width: 39.w,
                            height: 39.w,
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                      bottom: 10.w,
                      right: 10.w,
                      child: Container(
                        width: 94.w,
                        height: 40.w,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(40.w)),
                          color: Colors.white
                        ),
                        child: Center(
                          child: Text(
                            "加好友",
                            style: TextStyle(
                              fontSize: 22.w,
                              color: const Color.fromRGBO(117, 98, 249, 1)
                            ),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
                SizedBox(height: 10.w,),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Stack(
                      children: [
                        Container(
                          width: 355.w,
                          height: 350.w,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.horizontal(left: Radius.circular(18.w)),
                              color: const Color.fromRGBO(47, 10, 94, 1)
                          ),
                        ),
                        Positioned(
                          top: 11.w,
                          right: 10.w,
                          child: Container(
                            width: 40.w,
                            height: 40.w,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.all(Radius.circular(39.w)),
                                color: const Color.fromRGBO(0, 0, 0, .3)
                            ),
                            child: Center(
                              child: Image.asset(
                                "assets/gift_icon.png",
                                width: 39.w,
                                height: 39.w,
                              ),
                            ),
                          ),
                        ),
                        Positioned(
                          bottom: 10.w,
                          right: 10.w,
                          child: Container(
                            width: 94.w,
                            height: 40.w,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.all(Radius.circular(40.w)),
                                color: Colors.white
                            ),
                            child: Center(
                              child: Text(
                                "加好友",
                                style: TextStyle(
                                    fontSize: 22.w,
                                    color: const Color.fromRGBO(117, 98, 249, 1)
                                ),
                              ),
                            ),
                          ),
                        ),
                        Positioned(
                          left: 10.w,
                          bottom: 10.w,
                          child: Row(
                            children: [
                              Container(
                                width: 40.w,
                                height: 40.w,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.all(Radius.circular(8.w)),
                                  color: const Color.fromRGBO(0, 0, 0, .65)
                                ),
                                child: Center(
                                  child: Image.asset(
                                    "assets/mic_close.png",
                                    width: 21.w,
                                    height: 23.w,
                                  ),
                                ),
                              ),
                              SizedBox(width: 11.w,),
                              Text(
                                "飞翔的企鹅",
                                style: TextStyle(
                                  fontSize: 22.w,
                                  color: Colors.white,
                                  fontWeight: FontWeight.w500
                                ),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                    Stack(
                      children: [
                        Container(
                          width: 355.w,
                          height: 350.w,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.horizontal(right: Radius.circular(18.w)),
                              color: const Color.fromRGBO(47, 10, 94, 1)
                          ),
                        ),
                        Positioned(
                          top: 11.w,
                          right: 10.w,
                          child: Container(
                            width: 40.w,
                            height: 40.w,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.all(Radius.circular(39.w)),
                                color: const Color.fromRGBO(0, 0, 0, .3)
                            ),
                            child: Center(
                              child: Image.asset(
                                "assets/gift_icon.png",
                                width: 39.w,
                                height: 39.w,
                              ),
                            ),
                          ),
                        ),
                        Positioned(
                          bottom: 10.w,
                          right: 10.w,
                          child: Container(
                            width: 94.w,
                            height: 40.w,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.all(Radius.circular(40.w)),
                                color: Colors.white
                            ),
                            child: Center(
                              child: Text(
                                "加好友",
                                style: TextStyle(
                                    fontSize: 22.w,
                                    color: const Color.fromRGBO(117, 98, 249, 1)
                                ),
                              ),
                            ),
                          ),
                        ),
                        Positioned(
                          left: 10.w,
                          bottom: 10.w,
                          child: Row(
                            children: [
                              Container(
                                width: 40.w,
                                height: 40.w,
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.all(Radius.circular(8.w)),
                                    color: const Color.fromRGBO(0, 0, 0, .65)
                                ),
                                child: Center(
                                  child: Image.asset(
                                    "assets/mic_open.png",
                                    width: 21.w,
                                    height: 23.w,
                                  ),
                                ),
                              ),
                              SizedBox(width: 11.w,),
                              Text(
                                "飞翔的企鹅",
                                style: TextStyle(
                                    fontSize: 22.w,
                                    color: Colors.white,
                                    fontWeight: FontWeight.w500
                                ),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ],
                ),
                SizedBox(height: 10.w,),
                Container(
                  width: 750.w,
                  height: 110.w,
                  padding: EdgeInsets.symmetric(horizontal: 12.w),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(18.w)),
                    gradient: LinearGradient(
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight, // 135° 对应 topLeft → bottomRight
                      colors: [
                        Color.fromRGBO(46, 19, 79, 1),    // 0%
                        Color.fromRGBO(61, 67, 130, 1),   // 31.53%
                        Color.fromRGBO(64, 23, 115, 1),   // 72.09%
                        Color.fromRGBO(26, 28, 86, 1),    // 100%
                      ],
                      stops: [0.0, 0.3153, 0.7209, 1.0], // 对应 CSS 百分比位置
                    ),
                    border: Border.all(width: 1, color: const Color.fromRGBO(117, 102, 255, 1))
                  ),
                  child: SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: [
                        Container(
                          margin: EdgeInsets.symmetric(horizontal: 15.w),
                          child: Stack(
                            children: [
                              Image.asset(
                                "assets/seat.png",
                                width: 71.w,
                                height: 71.w,
                              ),
                              Positioned(
                                bottom: 0,
                                left: 7.w,
                                child: Container(
                                  width: 57.w,
                                  height: 24.w,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(Radius.circular(8.w)),
                                      color: const Color.fromRGBO(0, 0, 0, .65)
                                  ),
                                  child: Row(
                                    children: [
                                      Expanded(
                                        child: Center(
                                          child: Text(
                                            "1",
                                            style: TextStyle(
                                                fontSize: 16.w,
                                                color: Colors.white,
                                                fontWeight: FontWeight.w500
                                            ),
                                          ),
                                        ),
                                      ),
                                      Container(
                                        width: 24.w,
                                        height: 24.w,
                                        decoration: BoxDecoration(
                                          borderRadius: BorderRadius.all(Radius.circular(24.w)),
                                          gradient: LinearGradient(
                                            begin: Alignment.centerLeft,   // 左侧开始
                                            end: Alignment.centerRight,    // 右侧结束
                                            colors: [
                                              Color.fromRGBO(131, 89, 255, 1),  // 紫色
                                              Color.fromRGBO(61, 138, 224, 1),  // 蓝色
                                            ],
                                          ),
                                        ),
                                        child: Center(
                                          child: Image.asset(
                                            "assets/mic_close.png",
                                            width: 13.w,
                                            height: 14.w,
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.symmetric(horizontal: 15.w),
                          child: Stack(
                            children: [
                              Image.asset(
                                "assets/seat.png",
                                width: 71.w,
                                height: 71.w,
                              ),
                              Positioned(
                                bottom: 0,
                                left: 7.w,
                                child: Container(
                                  width: 57.w,
                                  height: 24.w,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(Radius.circular(8.w)),
                                      color: const Color.fromRGBO(0, 0, 0, .65)
                                  ),
                                  child: Row(
                                    children: [
                                      Expanded(
                                        child: Center(
                                          child: Text(
                                            "1",
                                            style: TextStyle(
                                                fontSize: 16.w,
                                                color: Colors.white,
                                                fontWeight: FontWeight.w500
                                            ),
                                          ),
                                        ),
                                      ),
                                      Container(
                                        width: 24.w,
                                        height: 24.w,
                                        decoration: BoxDecoration(
                                          borderRadius: BorderRadius.all(Radius.circular(24.w)),
                                          gradient: LinearGradient(
                                            begin: Alignment.centerLeft,   // 左侧开始
                                            end: Alignment.centerRight,    // 右侧结束
                                            colors: [
                                              Color.fromRGBO(131, 89, 255, 1),  // 紫色
                                              Color.fromRGBO(61, 138, 224, 1),  // 蓝色
                                            ],
                                          ),
                                        ),
                                        child: Center(
                                          child: Image.asset(
                                            "assets/mic_close.png",
                                            width: 13.w,
                                            height: 14.w,
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.symmetric(horizontal: 15.w),
                          child: Stack(
                            children: [
                              Image.asset(
                                "assets/seat.png",
                                width: 71.w,
                                height: 71.w,
                              ),
                              Positioned(
                                bottom: 0,
                                left: 7.w,
                                child: Container(
                                  width: 57.w,
                                  height: 24.w,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(Radius.circular(8.w)),
                                      color: const Color.fromRGBO(0, 0, 0, .65)
                                  ),
                                  child: Row(
                                    children: [
                                      Expanded(
                                        child: Center(
                                          child: Text(
                                            "1",
                                            style: TextStyle(
                                                fontSize: 16.w,
                                                color: Colors.white,
                                                fontWeight: FontWeight.w500
                                            ),
                                          ),
                                        ),
                                      ),
                                      Container(
                                        width: 24.w,
                                        height: 24.w,
                                        decoration: BoxDecoration(
                                          borderRadius: BorderRadius.all(Radius.circular(24.w)),
                                          gradient: LinearGradient(
                                            begin: Alignment.centerLeft,   // 左侧开始
                                            end: Alignment.centerRight,    // 右侧结束
                                            colors: [
                                              Color.fromRGBO(131, 89, 255, 1),  // 紫色
                                              Color.fromRGBO(61, 138, 224, 1),  // 蓝色
                                            ],
                                          ),
                                        ),
                                        child: Center(
                                          child: Image.asset(
                                            "assets/mic_close.png",
                                            width: 13.w,
                                            height: 14.w,
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.symmetric(horizontal: 15.w),
                          child: Stack(
                            children: [
                              Image.asset(
                                "assets/seat.png",
                                width: 71.w,
                                height: 71.w,
                              ),
                              Positioned(
                                bottom: 0,
                                left: 7.w,
                                child: Container(
                                  width: 57.w,
                                  height: 24.w,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(Radius.circular(8.w)),
                                      color: const Color.fromRGBO(0, 0, 0, .65)
                                  ),
                                  child: Row(
                                    children: [
                                      Expanded(
                                        child: Center(
                                          child: Text(
                                            "1",
                                            style: TextStyle(
                                                fontSize: 16.w,
                                                color: Colors.white,
                                                fontWeight: FontWeight.w500
                                            ),
                                          ),
                                        ),
                                      ),
                                      Container(
                                        width: 24.w,
                                        height: 24.w,
                                        decoration: BoxDecoration(
                                          borderRadius: BorderRadius.all(Radius.circular(24.w)),
                                          gradient: LinearGradient(
                                            begin: Alignment.centerLeft,   // 左侧开始
                                            end: Alignment.centerRight,    // 右侧结束
                                            colors: [
                                              Color.fromRGBO(131, 89, 255, 1),  // 紫色
                                              Color.fromRGBO(61, 138, 224, 1),  // 蓝色
                                            ],
                                          ),
                                        ),
                                        child: Center(
                                          child: Image.asset(
                                            "assets/mic_close.png",
                                            width: 13.w,
                                            height: 14.w,
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.symmetric(horizontal: 15.w),
                          child: Stack(
                            children: [
                              Image.asset(
                                "assets/seat.png",
                                width: 71.w,
                                height: 71.w,
                              ),
                              Positioned(
                                bottom: 0,
                                left: 7.w,
                                child: Container(
                                  width: 57.w,
                                  height: 24.w,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(Radius.circular(8.w)),
                                      color: const Color.fromRGBO(0, 0, 0, .65)
                                  ),
                                  child: Row(
                                    children: [
                                      Expanded(
                                        child: Center(
                                          child: Text(
                                            "1",
                                            style: TextStyle(
                                                fontSize: 16.w,
                                                color: Colors.white,
                                                fontWeight: FontWeight.w500
                                            ),
                                          ),
                                        ),
                                      ),
                                      Container(
                                        width: 24.w,
                                        height: 24.w,
                                        decoration: BoxDecoration(
                                          borderRadius: BorderRadius.all(Radius.circular(24.w)),
                                          gradient: LinearGradient(
                                            begin: Alignment.centerLeft,   // 左侧开始
                                            end: Alignment.centerRight,    // 右侧结束
                                            colors: [
                                              Color.fromRGBO(131, 89, 255, 1),  // 紫色
                                              Color.fromRGBO(61, 138, 224, 1),  // 蓝色
                                            ],
                                          ),
                                        ),
                                        child: Center(
                                          child: Image.asset(
                                            "assets/mic_close.png",
                                            width: 13.w,
                                            height: 14.w,
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.symmetric(horizontal: 15.w),
                          child: Stack(
                            children: [
                              Image.asset(
                                "assets/seat.png",
                                width: 71.w,
                                height: 71.w,
                              ),
                              Positioned(
                                bottom: 0,
                                left: 7.w,
                                child: Container(
                                  width: 57.w,
                                  height: 24.w,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(Radius.circular(8.w)),
                                      color: const Color.fromRGBO(0, 0, 0, .65)
                                  ),
                                  child: Row(
                                    children: [
                                      Expanded(
                                        child: Center(
                                          child: Text(
                                            "1",
                                            style: TextStyle(
                                                fontSize: 16.w,
                                                color: Colors.white,
                                                fontWeight: FontWeight.w500
                                            ),
                                          ),
                                        ),
                                      ),
                                      Container(
                                        width: 24.w,
                                        height: 24.w,
                                        decoration: BoxDecoration(
                                          borderRadius: BorderRadius.all(Radius.circular(24.w)),
                                          gradient: LinearGradient(
                                            begin: Alignment.centerLeft,   // 左侧开始
                                            end: Alignment.centerRight,    // 右侧结束
                                            colors: [
                                              Color.fromRGBO(131, 89, 255, 1),  // 紫色
                                              Color.fromRGBO(61, 138, 224, 1),  // 蓝色
                                            ],
                                          ),
                                        ),
                                        child: Center(
                                          child: Image.asset(
                                            "assets/mic_close.png",
                                            width: 13.w,
                                            height: 14.w,
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.symmetric(horizontal: 15.w),
                          child: Stack(
                            children: [
                              Image.asset(
                                "assets/seat.png",
                                width: 71.w,
                                height: 71.w,
                              ),
                              Positioned(
                                bottom: 0,
                                left: 7.w,
                                child: Container(
                                  width: 57.w,
                                  height: 24.w,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(Radius.circular(8.w)),
                                      color: const Color.fromRGBO(0, 0, 0, .65)
                                  ),
                                  child: Row(
                                    children: [
                                      Expanded(
                                        child: Center(
                                          child: Text(
                                            "1",
                                            style: TextStyle(
                                                fontSize: 16.w,
                                                color: Colors.white,
                                                fontWeight: FontWeight.w500
                                            ),
                                          ),
                                        ),
                                      ),
                                      Container(
                                        width: 24.w,
                                        height: 24.w,
                                        decoration: BoxDecoration(
                                          borderRadius: BorderRadius.all(Radius.circular(24.w)),
                                          gradient: LinearGradient(
                                            begin: Alignment.centerLeft,   // 左侧开始
                                            end: Alignment.centerRight,    // 右侧结束
                                            colors: [
                                              Color.fromRGBO(131, 89, 255, 1),  // 紫色
                                              Color.fromRGBO(61, 138, 224, 1),  // 蓝色
                                            ],
                                          ),
                                        ),
                                        child: Center(
                                          child: Image.asset(
                                            "assets/mic_close.png",
                                            width: 13.w,
                                            height: 14.w,
                                          ),
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(height: 10.w,),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Stack(
                      clipBehavior: Clip.none,
                      children: [
                        Container(
                          width: 68.w,
                          height: 68.w,
                          margin: EdgeInsets.only(left: 27.w),
                          child: ClipRRect(
                            borderRadius: BorderRadius.all(Radius.circular(68.w)),
                            child: Image.asset(
                              "assets/user_avatar.png",
                              width: 68.w,
                              height: 68.w,
                            ),
                          ),
                        ),
                        Positioned(
                          bottom: -6.w,
                          left: 41.w,
                          child: Container(
                            width: 40.w,
                            height: 40.w,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(8.w)),
                              color: const Color.fromRGBO(0, 0, 0, .65)
                            ),
                            child: Center(
                              child: Image.asset(
                                "assets/mic_close.png",
                                width: 21.w,
                                height: 23.w,
                              ),
                            ),
                          ),
                        )
                      ],
                    )
                  ],
                ),
                SizedBox(height: 19.w,),
                Expanded(
                  child: Container(
                    padding: EdgeInsets.only(
                      left: 27.w,
                      right: 19.w
                    ),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Expanded(
                          child: SingleChildScrollView(
                            child: Column(
                              children: [
                                Text(
                                  "欢迎来到直播间!严禁未成年人直播或礼物消费。严禁违法违规、低俗色情、吸烟酗酒、人身伤害等直播内容。理性消费如主播在直播中以不当方式诱导消费，请谨慎辨别。切勿私下交易，以防人身财产损失，谨防网络诈骗。",
                                  style: TextStyle(
                                    fontSize: 22.w,
                                    color: const Color.fromRGBO(155, 138, 246, 1)
                                  ),
                                ),
                                SizedBox(height: 31.w,),
                                ChatItem(),
                                ChatItem(),
                                ChatItem(),
                                ChatItem(),
                                ChatItem(),
                                ChatItem(),
                                ChatItem(),
                                ChatItem(),
                                ChatItem(),
                              ],
                            ),
                          ),
                        ),
                        SizedBox(width: 37.w,),
                        Image.asset(
                          "assets/ad.png",
                          width: 147.w,
                          fit: BoxFit.cover,
                        )
                      ],
                    ),
                  ),
                ),
                SizedBox(height: 34.w,),
                Row(
                  children: [
                    Container(
                      margin: EdgeInsets.only(left: 32.w),
                      child: InkWell(
                        onTap: (){
                          Navigator.of(context).push(TDSlidePopupRoute(
                              modalBarrierColor: TDTheme.of(context).fontGyColor2,
                              slideTransitionFrom: SlideTransitionFrom.bottom,
                              builder: (context) {
                                return Material(
                                  child: ValueListenableBuilder<int?>(
                                    valueListenable: activeGift,
                                    builder: (context, active, _) {
                                      return Container(
                                        color: const Color.fromRGBO(41, 31, 61, 1),
                                        height: 726.w,
                                        child: Column(
                                          children: [
                                            Container(
                                              height: 106.w,
                                              padding: EdgeInsets.symmetric(horizontal: 20.w),
                                              child: Row(
                                                children: [
                                                  Row(
                                                    children: [
                                                      Text(
                                                        "送给： ",
                                                        style: TextStyle(
                                                            fontSize: 26.w,
                                                            color: Colors.white
                                                        ),
                                                      ),
                                                      SizedBox(width: 13.w,),
                                                      Stack(
                                                        children: [
                                                          ClipRRect(
                                                            borderRadius: BorderRadius.all(Radius.circular(68.w)),
                                                            child: Container(
                                                              width: 68.w,
                                                              height: 68.w,
                                                              decoration: BoxDecoration(
                                                                  borderRadius: BorderRadius.all(Radius.circular(68.w)),
                                                                  border: Border.all(width: 2, color: const Color.fromRGBO(117, 98, 249, 1))
                                                              ),
                                                              child: Image.asset(
                                                                "assets/user_avatar.png",
                                                                width: 65.w,
                                                                height: 65.w,
                                                              ),
                                                            ),
                                                          ),
                                                          Positioned(
                                                            bottom: 0,
                                                            right: 4.w,
                                                            child: Container(
                                                              width: 25.w,
                                                              height: 25.w,
                                                              decoration: BoxDecoration(
                                                                  borderRadius: BorderRadius.all(Radius.circular(25.w)),
                                                                  color: const Color.fromRGBO(117, 98, 249, 1)
                                                              ),
                                                              child: Center(
                                                                child: Image.asset(
                                                                  "assets/check.png",
                                                                  width: 13.w,
                                                                  height: 9.w,
                                                                ),
                                                              ),
                                                            ),
                                                          )
                                                        ],
                                                      ),
                                                      SizedBox(width: 20.w,),
                                                      Stack(
                                                        children: [
                                                          ClipRRect(
                                                            borderRadius: BorderRadius.all(Radius.circular(68.w)),
                                                            child: Container(
                                                              width: 68.w,
                                                              height: 68.w,
                                                              decoration: BoxDecoration(
                                                                  borderRadius: BorderRadius.all(Radius.circular(68.w)),
                                                                  border: Border.all(width: 2, color: const Color.fromRGBO(117, 98, 249, 1))
                                                              ),
                                                              child: Image.asset(
                                                                "assets/user_avatar.png",
                                                                width: 65.w,
                                                                height: 65.w,
                                                              ),
                                                            ),
                                                          ),
                                                          Positioned(
                                                            bottom: 0,
                                                            right: 4.w,
                                                            child: Container(
                                                              width: 25.w,
                                                              height: 25.w,
                                                              decoration: BoxDecoration(
                                                                  borderRadius: BorderRadius.all(Radius.circular(25.w)),
                                                                  color: const Color.fromRGBO(117, 98, 249, 1)
                                                              ),
                                                              child: Center(
                                                                child: Image.asset(
                                                                  "assets/check.png",
                                                                  width: 13.w,
                                                                  height: 9.w,
                                                                ),
                                                              ),
                                                            ),
                                                          )
                                                        ],
                                                      ),
                                                      SizedBox(width: 20.w,),
                                                      Stack(
                                                        children: [
                                                          ClipRRect(
                                                            borderRadius: BorderRadius.all(Radius.circular(68.w)),
                                                            child: Container(
                                                              width: 68.w,
                                                              height: 68.w,
                                                              decoration: BoxDecoration(
                                                                  borderRadius: BorderRadius.all(Radius.circular(68.w)),
                                                                  border: Border.all(width: 2, color: const Color.fromRGBO(117, 98, 249, 1))
                                                              ),
                                                              child: Image.asset(
                                                                "assets/user_avatar.png",
                                                                width: 65.w,
                                                                height: 65.w,
                                                              ),
                                                            ),
                                                          ),
                                                          Positioned(
                                                            bottom: 0,
                                                            right: 4.w,
                                                            child: Container(
                                                              width: 25.w,
                                                              height: 25.w,
                                                              decoration: BoxDecoration(
                                                                  borderRadius: BorderRadius.all(Radius.circular(25.w)),
                                                                  color: const Color.fromRGBO(117, 98, 249, 1)
                                                              ),
                                                              child: Center(
                                                                child: Image.asset(
                                                                  "assets/check.png",
                                                                  width: 13.w,
                                                                  height: 9.w,
                                                                ),
                                                              ),
                                                            ),
                                                          )
                                                        ],
                                                      ),
                                                      SizedBox(width: 20.w,),
                                                    ],
                                                  ),
                                                  Container(
                                                    width: 127.w,
                                                    height: 60.w,
                                                    decoration: BoxDecoration(
                                                        borderRadius: BorderRadius.all(Radius.circular(60.w)),
                                                        color: const Color.fromRGBO(117, 98, 249, 1)
                                                    ),
                                                    child: Center(
                                                      child: Text(
                                                        "全选",
                                                        style: TextStyle(
                                                            fontSize: 26.w,
                                                            color: Colors.white
                                                        ),
                                                      ),
                                                    ),
                                                  )
                                                ],
                                              ),
                                            ),
                                            Expanded(
                                              child: Container(
                                                decoration: BoxDecoration(
                                                    borderRadius: BorderRadius.vertical(top: Radius.circular(18.w)),
                                                    color: const Color.fromRGBO(22, 19, 28, 1)
                                                ),
                                                child: Column(
                                                  children: [
                                                    Container(
                                                      height: 95.w,
                                                      padding: EdgeInsets.only(left: 59.w),
                                                      child: Row(
                                                        children: [
                                                          Text(
                                                            "互动",
                                                            style: TextStyle(
                                                                fontSize: 26.w,
                                                                color: const Color.fromRGBO(144, 144, 144, 1)
                                                            ),
                                                          ),
                                                          SizedBox(width: 80.w,),
                                                          Text(
                                                            "礼物",
                                                            style: TextStyle(
                                                                fontSize: 26.w,
                                                                color: Colors.white,
                                                                fontWeight: FontWeight.w700
                                                            ),
                                                          ),
                                                        ],
                                                      ),
                                                    ),
                                                    Expanded(
                                                      child: Wrap(
                                                        children: [
                                                          ...giftList.asMap().entries.map((entry){
                                                            return GiftItem(item: entry.value, active: active ?? 0, index: entry.key, changeActive: changeActive);
                                                          }),
                                                        ],
                                                      ),
                                                    ),
                                                    Container(
                                                      padding: EdgeInsets.symmetric(horizontal: 20.w),
                                                      child: Row(
                                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                        children: [
                                                          Row(
                                                            children: [
                                                              Image.asset(
                                                                "assets/rose_gift.png",
                                                                width: 43.w,
                                                                height: 43.w,
                                                              ),
                                                              SizedBox(width: 17.w,),
                                                              Text(
                                                                "9",
                                                                style: TextStyle(
                                                                  fontSize: 26.w,
                                                                  color: Colors.white
                                                                ),
                                                              ),
                                                              SizedBox(width: 24.w,),
                                                              Image.asset(
                                                                "assets/first_pay.png",
                                                                width: 137.w,
                                                                height: 66.w,
                                                              ),
                                                            ],
                                                          ) ,
                                                          Row(
                                                            children: [
                                                              TDStepper(
                                                                theme: TDStepperTheme.filled,
                                                                value: giftNum,
                                                                min: 1,
                                                                onChange: (e){
                                                                  giftNum = e;
                                                                },
                                                              ),
                                                              SizedBox(width: 18.w,),
                                                              Container(
                                                                width: 127.w,
                                                                height: 60.w,
                                                                decoration: BoxDecoration(
                                                                  borderRadius: BorderRadius.all(Radius.circular(60.w)),
                                                                  gradient: LinearGradient(
                                                                    begin: Alignment.centerLeft,   // 左侧开始
                                                                    end: Alignment.centerRight,    // 右侧结束（90度）
                                                                    colors: [
                                                                      Color.fromRGBO(61, 138, 224, 1),  // 蓝色
                                                                      Color.fromRGBO(131, 89, 255, 1),  // 紫色
                                                                    ],
                                                                  ),
                                                                ),
                                                                child: Center(
                                                                  child: Text(
                                                                    "赠送",
                                                                    style: TextStyle(
                                                                      fontSize: 26.w,
                                                                      color: Colors.white
                                                                    ),
                                                                  ),
                                                                ),
                                                              )
                                                            ],
                                                          )
                                                        ],
                                                      ),
                                                    )
                                                  ],
                                                ),
                                              ),
                                            )
                                          ],
                                        ),
                                      );
                                    }
                                  ),
                                );
                              }));
                        },
                        child: Container(
                          width: 76.w,
                          height: 76.w,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(76.w)),
                              color: const Color.fromRGBO(0, 0, 0, .3)
                          ),
                          child: Center(
                            child: Image.asset(
                              "assets/gift_icon.png",
                              width: 57.w,
                              height: 57.w,
                            ),
                          ),
                        ),
                      ),
                    ),
                    SizedBox(width: 18.w,),
                    Container(
                      width: 410.w,
                      height: 76.w,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(76.w)),
                          color: const Color.fromRGBO(0, 0, 0, .3)
                      ),
                      child: TextField(
                        controller: _messageController,
                        keyboardType: TextInputType.number,
                        style: TextStyle(
                            fontSize: ScreenUtil().setWidth(28),
                            height: 1,
                          color: Colors.white
                        ),
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.symmetric(
                              vertical: 0,
                              horizontal: 34.w
                          ),
                          hintText: "聊点什么吧～",
                          hintStyle: TextStyle(
                            color: const Color.fromRGBO(144, 144, 144, 1)
                          ),
                          border: const OutlineInputBorder(
                            borderSide: BorderSide.none, // 这将移除边框 // 可选：设置圆角
                          ),
                          // 如果你希望聚焦时和未聚焦时都没有边框，也可以设置 focusedBorder 和 enabledBorder
                          focusedBorder: const OutlineInputBorder(
                            borderSide: BorderSide.none,
                            borderRadius: BorderRadius.all(Radius.circular(8.0)),
                          ),
                          enabledBorder: const OutlineInputBorder(
                            borderSide: BorderSide.none,
                            borderRadius: BorderRadius.all(Radius.circular(8.0)),
                          ),
                        ),
                        onChanged: (value){
                          message = value;
                        },
                      ),
                    ),
                    SizedBox(width: 16.w,),
                    Container(
                      width: 76.w,
                      height: 76.w,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(76.w)),
                        color: const Color.fromRGBO(0, 0, 0, .3)
                      ),
                      child: Center(
                        child: Image.asset(
                          "assets/arrow_r.png",
                          width: 32.w,
                          height: 32.w,
                        ),
                      ),
                    ),
                    SizedBox(width: 16.w,),
                    InkWell(
                      onTap: (){
                        Navigator.of(context).push(TDSlidePopupRoute(
                            modalBarrierColor: TDTheme.of(context).fontGyColor2,
                            slideTransitionFrom: SlideTransitionFrom.bottom,
                            builder: (context) {
                              return ClipRRect(
                                borderRadius: BorderRadius.vertical(top: Radius.circular(18.w)),
                                child: ValueListenableBuilder<int?>(
                                    valueListenable: activePay,
                                    builder: (context, active, _){
                                      return Material(
                                        child: Container(
                                          color: Colors.white,
                                          height: 881.w,
                                          padding: EdgeInsets.symmetric(horizontal: 20.w),
                                          child: ValueListenableBuilder<bool>(
                                            valueListenable: payChecked,
                                            builder: (context, payCheckedV, _) {
                                              return Column(
                                                children: [
                                                  Container(
                                                    height: 97.w,
                                                    padding: EdgeInsets.symmetric(horizontal: 17.w),
                                                    child: Row(
                                                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                      children: [
                                                        InkWell(
                                                          onTap: (){
                                                            Navigator.maybePop(context);
                                                          },
                                                          child: Icon(
                                                            Icons.close,
                                                            size: 28.w,
                                                            color: const Color.fromRGBO(114, 114, 114, 1),
                                                          ),
                                                        ),
                                                        Text(
                                                          "玫瑰充值",
                                                          style: TextStyle(
                                                              fontSize: 35.w,
                                                              color: const Color.fromRGBO(51, 51, 51, 1),
                                                              fontWeight: FontWeight.w500
                                                          ),
                                                        ),
                                                        Icon(
                                                          Icons.close,
                                                          size: 28.w,
                                                          color: Colors.transparent,
                                                        ),
                                                      ],
                                                    ),
                                                  ),
                                                  Container(
                                                    padding: EdgeInsets.symmetric(horizontal: 17.w),
                                                    margin: EdgeInsets.only(bottom: 30.w),
                                                    child: Row(
                                                      children: [
                                                        Text(
                                                          "余额：9玫瑰",
                                                          style: TextStyle(
                                                              fontSize: 22.w,
                                                              color: const Color.fromRGBO(144, 144, 144, 1),
                                                              fontWeight: FontWeight.w500
                                                          ),
                                                        )
                                                      ],
                                                    ),
                                                  ),
                                                  Wrap(
                                                    spacing: 14.w,
                                                    runSpacing: 14.w,
                                                    children: [
                                                      ...payList.asMap().entries.map((entry){
                                                        return PayItem(item: entry.value, active: active ?? 0, index: entry.key, changeActive: changePayActive);
                                                      }),
                                                    ],
                                                  ),
                                                  Container(
                                                    height: 1,
                                                    margin: EdgeInsets.only(
                                                        top: 20.w,
                                                        bottom: 30.w
                                                    ),
                                                    color: const Color.fromRGBO(219, 219, 219, 1),
                                                  ),
                                                  Row(
                                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                    children: [
                                                      Row(
                                                        children: [
                                                          Image.asset(
                                                            "assets/ali_pay.png",
                                                            width: 35.w,
                                                            height: 35.w,
                                                          ),
                                                          SizedBox(width: 12.w,),
                                                          Text(
                                                            "支付宝支付",
                                                            style: TextStyle(
                                                                fontSize: 22.w,
                                                                color: const Color.fromRGBO(51, 51, 51, 1),
                                                                fontWeight: FontWeight.w500
                                                            ),
                                                          )
                                                        ],
                                                      ),
                                                      RoundCheckBox(
                                                        onTap: (bool? value) {
                                                          setState(() {
                                                            payChecked.value = true;
                                                          });
                                                        },
                                                        isChecked: payCheckedV,
                                                        size: ScreenUtil().setWidth(30),
                                                        checkedColor: const Color.fromRGBO(117, 98, 249, 1),
                                                        checkedWidget: Icon(
                                                          Icons.check,
                                                          color: const Color.fromRGBO(255, 255, 255, 1),
                                                          size: ScreenUtil().setWidth(14),
                                                        ),
                                                      ),
                                                    ],
                                                  ),
                                                  SizedBox(height: 20.w,),
                                                  Row(
                                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                    children: [
                                                      Row(
                                                        children: [
                                                          Image.asset(
                                                            "assets/wechat_pay.png",
                                                            width: 35.w,
                                                            height: 35.w,
                                                          ),
                                                          SizedBox(width: 12.w,),
                                                          Text(
                                                            "支付宝支付",
                                                            style: TextStyle(
                                                                fontSize: 22.w,
                                                                color: const Color.fromRGBO(51, 51, 51, 1),
                                                                fontWeight: FontWeight.w500
                                                            ),
                                                          )
                                                        ],
                                                      ),
                                                      RoundCheckBox(
                                                        onTap: (bool? value) {
                                                          setState(() {
                                                            payChecked.value = false;
                                                          });
                                                        },
                                                        isChecked: !payCheckedV,
                                                        size: ScreenUtil().setWidth(30),
                                                        checkedColor: const Color.fromRGBO(117, 98, 249, 1),
                                                        checkedWidget: Icon(
                                                          Icons.check,
                                                          color: const Color.fromRGBO(255, 255, 255, 1),
                                                          size: ScreenUtil().setWidth(14),
                                                        ),
                                                      ),
                                                    ],
                                                  ),
                                                  SizedBox(height: 17.w,),
                                                  Row(
                                                    children: [
                                                      RichText(
                                                        text: TextSpan(
                                                            style: TextStyle(
                                                                fontSize: 22.w,
                                                                fontWeight: FontWeight.w500
                                                            ),
                                                            children: const [
                                                              TextSpan(
                                                                  text: "充值既代表同意",
                                                                  style: TextStyle(
                                                                      color: Color.fromRGBO(189, 189, 189, 1)
                                                                  )
                                                              ),
                                                              TextSpan(
                                                                  text: "《动我充值协议》",
                                                                  style: TextStyle(
                                                                      color: Color.fromRGBO(71, 123, 255, 1)
                                                                  )
                                                              ),
                                                              TextSpan(
                                                                  text: "和隐私政策",
                                                                  style: TextStyle(
                                                                      color: Color.fromRGBO(189, 189, 189, 1)
                                                                  )
                                                              ),
                                                            ]
                                                        ),
                                                      )
                                                    ],
                                                  ),
                                                  SizedBox(height: 28.w,),
                                                  Container(
                                                    width: 650.w,
                                                    height: 90.w,
                                                    decoration: BoxDecoration(
                                                      borderRadius: BorderRadius.all(Radius.circular(90.w)),
                                                      gradient: LinearGradient(
                                                        begin: Alignment.centerLeft,  // 0%：左边开始
                                                        end: Alignment.centerRight,   // 100%：右边结束
                                                        colors: [
                                                          Color.fromRGBO(131, 89, 255, 1),  // 紫色
                                                          Color.fromRGBO(77, 127, 231, 1),  // 中间淡蓝
                                                          Color.fromRGBO(61, 138, 224, 1),  // 右侧深蓝
                                                        ],
                                                        stops: [0.0, 0.7753, 1.0], // 对应 CSS 百分比：0%、77.53%、100%
                                                      ),
                                                    ),
                                                    child: Center(
                                                      child: Text(
                                                        "立即充值",
                                                        style: TextStyle(
                                                          fontSize: 36.w,
                                                          color: Colors.white,
                                                          fontWeight: FontWeight.w500
                                                        ),
                                                      ),
                                                    ),
                                                  )
                                                ],
                                              );
                                            },
                                          ),


                                        ),
                                      );
                                    }
                                ),




                              );
                            }));
                      },
                      child: Container(
                        width: 76.w,
                        height: 76.w,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(76.w)),
                          gradient: LinearGradient(
                            // 144° ≈ 从左上角稍偏右下方向
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: [
                              Color.fromRGBO(255, 43, 110, 1), // 起始色
                              Color.fromRGBO(255, 52, 26, 1),  // 结束色
                            ],
                          ),
                        ),
                        child: Center(
                          child: Image.asset(
                            "assets/rose_white.png",
                            width: 28.w,
                            height: 51.w,
                          ),
                        ),
                      ),
                    ),
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 520.w,
      margin: EdgeInsets.only(bottom: 30.w),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.asset(
            "assets/user_avatar.png",
            width: 50.w,
            height: 50.w,
          ),
          SizedBox(width: 21.w,),
          SizedBox(
            width: 449.w,
            child: RichText(
              text: TextSpan(
                  children: [
                    TextSpan(
                        text: "沙发沙发：",
                        style: TextStyle(
                            fontSize: 22.w,
                            color: const Color.fromRGBO(155, 138, 246, 1)
                        )
                    ),
                    TextSpan(
                        text: "大家好啊！大家好啊！大家好啊！大家好啊！大家好啊！大家好啊！大家好啊！大家好啊！大家好啊！",
                        style: TextStyle(
                            fontSize: 22.w,
                            color: Colors.white
                        )
                    )
                  ]
              ),
            ),
          )
        ],
      ),
    );
  }
}

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

  @override
  State<GiftItem> createState() => _GiftItemState();
}

class _GiftItemState extends State<GiftItem> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: (){
        widget.changeActive(widget.index);
      },
      child: Container(
        width: 167.w,
        height: 189.w,
        padding: EdgeInsets.only(top: 21.w),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(18.w)),
            color: Color.fromRGBO(117, 98, 249, widget.active == widget.index ? .2 : 0),
            border: Border.all(width: 1, color: Color.fromRGBO(117, 98, 249, widget.active == widget.index ? 1 : 0))
        ),
        child: Column(
          children: [
            Image.asset(
              widget.item["icon"],
              width: 82.w,
              height: 82.w,
            ),
            SizedBox(height: 15.w,),
            Text(
              widget.item["title"],
              style: TextStyle(
                fontSize: 22.w,
                color: Colors.white
              ),
            ),
            SizedBox(height: 2.w,),
            Text(
              "${widget.item["price"]}支",
              style: TextStyle(
                  fontSize: 15.w,
                  color: const Color.fromRGBO(144, 144, 144, 1)
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class PayItem extends StatefulWidget {
  final Map 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 InkWell(
      onTap: (){
        widget.changeActive(widget.index);
      },
      child: Stack(
        children: [
          Container(
            width: 227.w,
            height: 110.w,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(18.w)),
                color: widget.active == widget.index ? const Color.fromRGBO(239, 19, 46, .05) : const Color.fromRGBO(247, 247, 247, 1),
              border: widget.active == widget.index ? Border.all(width: 1, color: const Color.fromRGBO(239, 19, 46, 1)) : null
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                RichText(
                  text: TextSpan(
                    children: [
                      TextSpan(
                        text: "${widget.item["num"]}",
                        style: TextStyle(
                            fontSize: 35.w,
                            color: const Color.fromRGBO(51, 51, 51, 1),
                            fontWeight: FontWeight.w700
                        ),
                      ),
                      TextSpan(
                        text: "玫瑰",
                        style: TextStyle(
                            fontSize: 22.w,
                            color: const Color.fromRGBO(51, 51, 51, 1),
                            fontWeight: FontWeight.w500
                        ),
                      )
                    ]
                  ),
                ),
                Text(
                  "${widget.item["price"]}元",
                  style: TextStyle(
                    fontSize: 22.w,
                    color: const Color.fromRGBO(144, 144, 144, 144),
                    fontWeight: FontWeight.w500
                  ),
                )
              ],
            ),
          ),
          if(widget.item["hasTag"]) Positioned(
            top: 0,
            left: 0,
            child: Container(
              width: 107.w,
              height: 23.w,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(18.w),
                  bottomRight: Radius.circular(18.w),
                ),
                color: widget.active == widget.index ? null :const Color.fromRGBO(238, 24, 50, .1),
                gradient: widget.active == widget.index ? LinearGradient(
                  begin: Alignment.centerLeft,   // 对应 0%
                  end: Alignment.centerRight,    // 对应 100%
                  colors: [
                    Color.fromRGBO(238, 24, 50, 1),   // #EE1832 深红
                    Color.fromRGBO(250, 101, 64, 1),  // #FA6540 橙红
                    Color.fromRGBO(255, 131, 69, 1),  // #FF8345 浅橙
                  ],
                  stops: [0.0, 0.7216, 1.0], // 对应 CSS 中的百分比位置
                ) : null,
              ),
              child: Center(
                child: Text(
                  "送新人大礼包",
                  style: TextStyle(
                    fontSize: 12.w,
                    color: widget.active == widget.index ? Colors.white : const Color.fromRGBO(237, 23, 50, 1),
                    fontWeight: FontWeight.w500
                  ),
                ),
              ),
            ),
          ),
          if(widget.active == widget.index) Positioned(
            right: 0,
            bottom: 0,
            child: Container(
              width: 35.w,
              height: 26.w,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(18.w),
                  bottomRight: Radius.circular(18.w),
                ),
                color: const Color.fromRGBO(239, 19, 46, 1)
              ),
              child: Center(
                child: Image.asset(
                  "assets/check.png",
                  width: 13.w,
                  height: 9.w,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}