import 'package:dating_touchme_app/generated/assets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

  @override
  State<LiveRoomPayItem> createState() => _LiveRoomPayItemState();
}

class _LiveRoomPayItemState extends State<LiveRoomPayItem> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        widget.changeActive(widget.index);
      },
      child: Stack(
        children: [
          Container(
            width: 113.w,
            height: 55.w,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(9.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: 17.w,
                          color: const Color.fromRGBO(51, 51, 51, 1),
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                      TextSpan(
                        text: "玫瑰",
                        style: TextStyle(
                          fontSize: 11.w,
                          color: const Color.fromRGBO(51, 51, 51, 1),
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ],
                  ),
                ),
                Text(
                  "${widget.item["price"]}元",
                  style: TextStyle(
                    fontSize: 11.w,
                    color: const Color.fromRGBO(144, 144, 144, 144),
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ],
            ),
          ),
          if (widget.item["hasTag"])
            Positioned(
              top: 0,
              left: 0,
              child: Container(
                width: 53.w,
                height: 11.w,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(9.w),
                    bottomRight: Radius.circular(9.w),
                  ),
                  color: widget.active == widget.index
                      ? null
                      : const Color.fromRGBO(238, 24, 50, .1),
                  gradient: widget.active == widget.index
                      ? LinearGradient(
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          colors: const [
                            Color.fromRGBO(238, 24, 50, 1),
                            Color.fromRGBO(250, 101, 64, 1),
                            Color.fromRGBO(255, 131, 69, 1),
                          ],
                          stops: const [0.0, 0.7216, 1.0],
                        )
                      : null,
                ),
                child: Center(
                  child: Text(
                    "送新人大礼包",
                    style: TextStyle(
                      fontSize: 6.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: 17.w,
                height: 13.w,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(9.w),
                    bottomRight: Radius.circular(9.w),
                  ),
                  color: const Color.fromRGBO(239, 19, 46, 1),
                ),
                child: Center(
                  child: Image.asset(
                    Assets.imagesCheck,
                    width: 6.w,
                    height: 4.w,
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  }
}