import 'package:cpt_rewards/modules/rewards_transaction/rewards_transaction_page.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:shared/utils/log_utils.dart';
import 'package:shared/utils/color_utils.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/load_state_layout.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/utils/dark_theme_util.dart';
import 'package:widgets/widget_export.dart';
import 'package:cs_resources/generated/assets.dart';

import '../../../router/page/rewards_page_router.dart';
import './rewards_history_spent_vm.dart';

@RoutePage()
class RewardsHistorySpentPage extends HookConsumerWidget {
  const RewardsHistorySpentPage({Key? key}) : super(key: key);

  //启动当前页面
  static void startInstance({BuildContext? context}) {
    if (context != null) {
      context.router.push(const RewardsHistorySpentPageRoute());
    } else {
      appRouter.push(const RewardsHistorySpentPageRoute());
    }
  }

   // listitem
  Widget _buildSaleItem(BuildContext context, WidgetRef ref, item, _vm) {
    String shortDescription = item['short_description'] ?? '';
    String createdAt = item['created_at'] ?? '';
    int point = item['point'] ?? 0;
    return Container(
      padding: const EdgeInsets.only(top: 15, bottom: 15, left: 18, right: 18),
      decoration: BoxDecoration(
          border: Border(
              bottom: BorderSide(
        width: 1.0, // 底边边框的宽度
        color: context.appColors.backgroundDark, // 底边边框的颜色
      ))),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                shortDescription,
                style: TextStyle(
                    fontSize: 15.0,
                    color: context.appColors.textBlack,
                    fontWeight: FontWeight.w500), // 设置字体大小
              ).marginOnly(bottom: 6),
              Text(
                createdAt,
                style: TextStyle(
                    fontSize: 13.0,
                    color: DarkThemeUtil.multiColors(context, ColorUtils.string2Color('#808DAF'),darkColor: Colors.white),
                    fontWeight: FontWeight.w400), // 设置字体大小
              ),
            ],
          ),
          Text(
            '$point',
            style: TextStyle(
                fontSize: 20.0,
                color: DarkThemeUtil.multiColors(context, AppColorsTheme.colorPrimary,darkColor: Colors.white),
                fontWeight: FontWeight.w500), // 设置字体大小
          ),
        ],
      ),
    );
  }
  // list
  Widget _buildSaleList(BuildContext context, WidgetRef ref, _vm) {
    final state = ref.watch(rewardsHistorySpentVmProvider);
    return SliverList(
        delegate: SliverChildBuilderDelegate((context, index) {
      return _buildSaleItem(context, ref, state.list![index], _vm);
    }, childCount: state.list!.length));
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final vm = ref.read(rewardsHistorySpentVmProvider.notifier);
    final state = ref.watch(rewardsHistorySpentVmProvider);
    useEffect(() {
      // 组件挂载时执行 - 执行接口请求
      Future.microtask(() => vm.initPageData());
      return () {
        // 组件卸载时执行
        Log.d("property_news_page 组件卸载时执行");
      };
    }, []);
    return Scaffold(
      // appBar: AppBar(title: Text("资产")),
      body: SizedBox(
          width: double.infinity,
          height: double.infinity,
          child: Container(
              color: context.appColors.backgroundDark,
              padding: const EdgeInsets.only(top: 15),
              child: EasyRefresh(
              controller: vm.refreshController,
              // 上拉加载
              onLoad: () async {
                Log.d("----onLoad");
                vm.loadMore();
              },
              // 下拉刷新
              onRefresh: () async {
                Log.d("----onRefresh");
                vm.onRefresh();
              },
              child:  Container(
                    decoration: BoxDecoration(
                      color: context.appColors.whiteBG,
                      borderRadius: BorderRadius.circular(10),
                      boxShadow: const [
                        BoxShadow(
                            color: Color.fromRGBO(184, 191, 217, 0.3),
                            blurRadius: 6)
                      ],
                    ),
                    child: LoadStateLayout(
                      state: state.loadingState,
                      errorMessage: state.errorMessage,
                      errorRetry: () {
                        vm.retryRequest();
                      },
                      successSliverWidget: [_buildSaleList(context, ref, vm)],
                    )).marginOnly(left: 20,right: 20),
              ))),
    );
  }
}
