import 'package:cs_resources/constants/color_constants.dart';
import 'package:cs_resources/generated/assets.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:plugin_basic/base/base_state.dart';
import 'package:plugin_basic/base/base_stateful_page.dart';
import 'package:plugin_basic/utils/ext_get_nav.dart';
import 'package:router/path/router_path.dart';
import 'package:shared/utils/date_time_utils.dart';
import 'package:shared/utils/screen_util.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/load_state_layout.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_button.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/widget_export.dart';

import 'labour_request_item.dart';
import 'labour_request_list_controller.dart';
import 'labour_request_list_state.dart';

/*
 * 用工请求的主页列表
 */
class LabourRequestERListPage extends BaseStatefulPage<LabourRequestListController> {
  LabourRequestERListPage({Key? key}) : super(key: key);

  //启动当前页面
  static void startInstance() {
    return Get.start(RouterPath.THLabourRequestER);
  }

  @override
  LabourRequestListController createRawController() {
    return LabourRequestListController();
  }

  @override
  State<LabourRequestERListPage> createState() => _LabourRequestListState();
}

class _LabourRequestListState extends BaseState<LabourRequestERListPage, LabourRequestListController> {
  late LabourRequestListState state;

  @override
  void initState() {
    super.initState();
    state = controller.state;
  }

  @override
  Widget build(BuildContext context) {
    return autoCtlGetBuilder(builder: (controller) {
      return SafeArea(
        bottom: MediaQuery.of(context).padding.bottom > 38,
        top: false,
        child: Container(
          width: double.infinity,
          height: double.infinity,
          padding: EdgeInsets.only(top: ScreenUtil.getStatusBarH(context)),
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Color(0xFF091D44),
                Color(0xFF245A8A),
                Color(0xFF7F7CEC),
              ],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
          ),
          child: Column(
            children: [
              MyAppBar.titleBar(context, 'Labour Request'.tr),

              //日期的筛选
              Container(
                padding: const EdgeInsets.only(left: 16, right: 10),
                margin: const EdgeInsets.only(left: 15, right: 15, top: 15),
                height: 42,
                decoration: BoxDecoration(
                  color: const Color(0xFF4DCFF6).withOpacity(0.2),
                  borderRadius: const BorderRadius.all(Radius.circular(20)),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    const MyAssetImage(Assets.cptJobPickDateIcon, width: 14, height: 14),
                    MyTextView(
                      state.selectedDate == null ? "" : DateTimeUtils.formatDate(state.selectedDate, format: "yyyy-MM-dd"),
                      fontSize: 14,
                      hint: "Select Date".tr,
                      marginLeft: 12,
                      textHintColor: ColorConstants.textGrayAECAE5,
                      isFontMedium: true,
                      textColor: ColorConstants.white,
                    ).expanded(),
                  ],
                ),
              ).onTap(() {
                controller.showDatePicker();
              }),

              // 添加按钮
              MyButton(
                type: ClickType.throttle,
                milliseconds: 500,
                onPressed: () {
                  FocusScope.of(context).unfocus();
                  controller.gotoAddLabourPage();
                },
                text: "Create New Job Request".tr,
                textColor: ColorConstants.white,
                fontSize: 16,
                radius: 20,
                backgroundColor: hexToColor("#FFBB1B"),
                fontWeight: FontWeight.w500,
              ).marginSymmetric(horizontal: 15, vertical: 15),

              //底部的列表
              EasyRefresh(
                controller: controller.refreshController,
                onRefresh: controller.onRefresh,
                child: LoadStateLayout(
                  state: controller.loadingState,
                  errorMessage: controller.errorMessage,
                  errorRetry: () {
                    controller.retryRequest();
                  },
                  successSliverWidget: [
                    SliverList(
                        delegate: SliverChildBuilderDelegate(
                      (context, index) {
                        return LabourRequestItem(
                          index: index,
                          selectedDate: DateTimeUtils.formatDate(state.selectedDate, format: "yyyy-MM-dd"),
                          countList: state.labourRequestEREntity?.countList,
                          item: state.datas[index],
                          gotoJobAction: (date) {
                            controller.gotoJobPage(date);
                          },
                        );
                      },
                      childCount: state.datas.length,
                    ))
                  ],
                ),
              ).expanded(),
            ],
          ),
        ),
      );
    });
  }
}
