import 'package:cs_resources/generated/assets.dart';
import 'package:cs_resources/generated/l10n.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:domain/entity/payment_page_entity.dart';
import 'package:flutter/material.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/utils/dark_theme_util.dart';

/// Condo Active 的 Item 布局
class PaymentListItem extends StatelessWidget {
  final int index;
  final PaymentPageList item;

  const PaymentListItem({
    required this.index,
    required this.item,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: const EdgeInsets.only(left: 15, right: 15, top: 5, bottom: 5),
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
      decoration: BoxDecoration(
        color: context.appColors.whiteBG,
        borderRadius: BorderRadius.circular(6.0), // 圆角
        boxShadow: [
          BoxShadow(
            color: context.appColors.itemBGShadow, // 阴影颜色
            offset: const Offset(0, 3), // 阴影的偏移量
            blurRadius: 8.0, // 模糊半径
            spreadRadius: 3.0, // 扩散半径
          ),
        ],
      ),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          MyAssetImage(
            Assets.paymentPaymentPendingIcon,
            width: 38.5,
            height: 36.5,
            color: DarkThemeUtil.multiColors(context, AppColorsTheme.colorPrimary, darkColor: Colors.white),
          ),
          Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              MyTextView(
                item.title ?? "",
                fontSize: 16,
                textColor: context.appColors.textBlack,
                isFontMedium: true,
              ),
              MyTextView(
                item.type == "property" || item.type == "vehicle" ? "${item.orderable?.startAt} - ${item.orderable?.endAt}" : item.createdAt ?? "",
                marginTop: 4,
                fontSize: 11,
                textColor: context.appColors.textBlack,
                isFontRegular: true,
              ),
              Row(
                children: [
                  MyTextView(
                    "${S.current.amount}:",
                    fontSize: 11,
                    textColor: context.appColors.textBlack,
                    isFontRegular: true,
                  ),
                  MyTextView(
                    "\$${item.orderAmount}",
                    fontSize: 11,
                    textColor: context.appColors.textPrimary,
                    isFontRegular: true,
                  ),
                  MyTextView(
                    "${S.current.deposit}:",
                    marginLeft: 10,
                    fontSize: 11,
                    textColor: context.appColors.textBlack,
                    isFontRegular: true,
                  ),
                  MyTextView(
                    "\$${item.depositAmount}",
                    fontSize: 11,
                    textColor: context.appColors.textPrimary,
                    isFontRegular: true,
                  ),
                ],
              ).marginOnly(top: 4)
            ],
          ).marginOnly(left: 17).expanded(),
        ],
      ),
    );
  }
}
