import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:smart_hotel_app/utils/deal_utils.dart';
import 'package:smart_hotel_app/views/report/energy/cubit/energy_state.dart';

class ZoneChartBlock extends StatelessWidget {
  final List<ZoneData> zoneData;

  const ZoneChartBlock({super.key, required this.zoneData});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.w),
      padding: EdgeInsets.all(24.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20.r),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '分区用电占比',
            style: TextStyle(
              color: const Color.fromRGBO(100, 116, 139, 1),
              fontSize: 24.sp,
              fontWeight: FontWeight.w500,
            ),
          ),
          SizedBox(height: 24.h),
          ...zoneData.asMap().entries.map((entry) {
            final index = entry.key;
            final data = entry.value;
            return Padding(
              padding: EdgeInsets.only(
                  bottom: index < zoneData.length - 1 ? 20.h : 0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                spacing: 12.h,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        spacing: 8.w,
                        children: [
                          Container(
                            width: 12.w,
                            height: 12.h,
                            decoration: BoxDecoration(
                              color: index == 0
                                  ? const Color.fromRGBO(59, 130, 246, 1)
                                  : const Color.fromRGBO(107, 114, 128, 1),
                              shape: BoxShape.circle,
                            ),
                          ),
                          Text(
                            data.name,
                            style: TextStyle(
                              color: Colors.black87,
                              fontSize: 24.sp,
                            ),
                          ),
                        ],
                      ),
                      Text(
                        '${DealUtils.cleanNumber(data.percentage.toString())}% '
                            '(${DealUtils.cleanNumber(data.energy.toString())} kWh)',
                        style: TextStyle(
                          color: index == 0
                              ? const Color.fromRGBO(59, 130, 246, 1)
                              : Colors.black54,
                          fontSize: 24.sp,
                        ),
                      ),
                    ],
                  ),
                  Stack(
                    children: [
                      Container(
                        height: 16.h,
                        decoration: BoxDecoration(
                          color: const Color.fromRGBO(229, 231, 235, 1),
                          borderRadius: BorderRadius.circular(8.r),
                        ),
                      ),
                      FractionallySizedBox(
                        widthFactor: data.percentage / 100,
                        child: Container(
                          height: 16.h,
                          decoration: BoxDecoration(
                            color: index == 0
                                ? const Color.fromRGBO(59, 130, 246, 1)
                                : const Color.fromRGBO(107, 114, 128, 1),
                            borderRadius: BorderRadius.circular(8.r),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            );
          }).toList(),
        ],
      ),
    );
  }
}