import 'package:ef/ef.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:vbvs_app/common/util/FitTool.dart';
import 'package:vbvs_app/common/util/MyUtils.dart';
import 'package:vbvs_app/component/NullDataComponentWidget.dart';
import 'package:vbvs_app/component/tool/CustomCard.dart';
import 'package:vbvs_app/controller/mh_controller/apply_repair_controller.dart';
import 'package:vbvs_app/controller/mh_controller/repair_list_controller.dart';
import 'package:vbvs_app/pages/mh_page/EmptyMessageWidget.dart';
import 'package:vbvs_app/pages/mh_page/repair_history_widget.dart';

class DeviceRepairPage extends GetView<RepairListController> {
  final scaffoldKey = GlobalKey<ScaffoldState>();
  BoxConstraints? bodysize;
  final ScrollController scrollController = ScrollController();
  // final ScrollController scrollController = ScrollController();
  final RepairListController controller = Get.find();

  // DeviceRepairPage() {
  // controller.model.limit = AppConstants.limit;
  // controller.model.offset = 0;
  // controller.model.isLoading = false;
  // controller.model.hasMore = true;
  // controller.model.repairList.clear();
  // controller.initData();
  // Get.put(RepairListController());

  // scrollController.addListener(() {
  //   if (scrollController.position.pixels ==
  //           scrollController.position.maxScrollExtent &&
  //       controller.model.hasMore) {
  //     controller.initData();
  //     controller.updateAll();
  //   }
  // });
  // }

  // final List<ApplyRepairModel> mockData

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, cc) {
      bodysize = cc;
      return GestureDetector(
          onTap: () => FocusScope.of(context).unfocus(),
          child: Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/images/new_background.png'), // 本地图片
                fit: BoxFit.fill, // 填满整个 Container
              ),
            ),
            child: Scaffold(
                // key: scaffoldKey,
                backgroundColor: Colors.transparent,
                appBar: AppBar(
                  backgroundColor: Colors.transparent,
                  iconTheme: const IconThemeData(color: Colors.white),
                  automaticallyImplyLeading: false,
                  titleSpacing: 0,
                  title: SizedBox(
                    width: double.infinity,
                    height: 180.rpx,
                    child: Stack(
                      alignment: Alignment.center,
                      children: [
                        // 中间居中的标题
                        Text(
                          '设备报修',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 30.rpx,
                          ),
                        ),
                        // 左侧图标
                        Positioned(
                          left: 0.rpx,
                          child: returnIconButtomNew,
                        ),
                      ],
                    ),
                  ),
                  centerTitle: false,
                ),
                body: SafeArea(
                    top: true,
                    child: Padding(
                      padding: EdgeInsets.fromLTRB(30.rpx, 6.rpx, 30.rpx, 0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          // 报修须知
                          Container(
                              height: 412.rpx,
                              decoration: BoxDecoration(
                                border: Border.all(
                                    color: Color(0XFFC8CBD2), width: 0.rpx),
                                borderRadius: BorderRadius.circular(10),
                              ),
                              child: Padding(
                                  padding: EdgeInsets.fromLTRB(
                                      27.rpx, 49.rpx, 43.rpx, 39.rpx),
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: [
                                      // 固定的标题部分
                                      Text(
                                        "报修须知",
                                        style: TextStyle(
                                          fontSize: 30.rpx,
                                          fontWeight: FontWeight.bold,
                                          color: Colors.white,
                                        ),
                                        textAlign: TextAlign.center,
                                      ),
                                      SizedBox(height: 33.rpx),
                                      // 可滚动的正文部分，限定高度
                                      Expanded(
                                        child: SingleChildScrollView(
                                          child: RichText(
                                            text: TextSpan(
                                              style: TextStyle(
                                                color: Color(0XFF929699),
                                                fontSize: 26.rpx,
                                              ),
                                              children: [
                                                TextSpan(
                                                    text:
                                                        "尊敬的用户，感谢您选择我司产品。在使用过程中，如果设备出现故障需要维修，请首先确认设备是否正确连接控制器或网络，检查设置是否正常，排除误操作问题。若问题依然存在，请记录下设备名称、设备编号、和具体故障内容，方便我们快速地为您提供帮助。您可以通过智慧棉花糖APP保修页面直接报修或拨打 ",
                                                    style: TextStyle(
                                                        color:
                                                            Color(0XFF929699),
                                                        fontSize: 26.rpx,
                                                        height: 1.3)),
                                                TextSpan(
                                                  text: "400-8756-966",
                                                  style: TextStyle(
                                                    color: Colors.white,
                                                    // height: 1.3,
                                                    decoration: TextDecoration
                                                        .underline, // 添加下划线
                                                    decorationColor:
                                                        Colors.white,
                                                    decorationThickness: 4.rpx,
                                                  ),
                                                  recognizer:
                                                      TapGestureRecognizer()
                                                        ..onTap = () {
                                                          MyUtils.makePhoneCall(
                                                              "400-8756-966");
                                                        },
                                                ),
                                                TextSpan(
                                                    text: " 反馈。",
                                                    style: TextStyle(
                                                        color:
                                                            Color(0XFF929699),
                                                        fontSize: 26.rpx,
                                                        height: 1.3)),
                                              ],
                                            ),
                                          ),
                                        ),
                                      ),
                                    ],
                                  ))),
                          SizedBox(height: 24.rpx),
                          InkWell(
                              onTap: () {},
                              child: CustomCard(
                                borderRadius: 16.rpx,
                                gradientDirection: GradientDirection.vertical,
                                onTap: () {
                                  Get.toNamed("/applyRepairPage");
                                },
                                colors: const [
                                  Color(0xFFFCFCFC),
                                  Color(0xFFF8FAF9),
                                  Color(0XFFECF6F3),
                                  Color(0XFFD9F0E9),
                                  Color(0xFFCEECE3)
                                ],
                                child: Container(
                                  width: double.infinity,
                                  height: 90.rpx,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(6),
                                  ),
                                  child: Text(
                                    "我要报修",
                                    style: TextStyle(
                                      fontFamily: 'Readex Pro',
                                      color: stringToColor("#011D33"),
                                      letterSpacing: 0,
                                      fontSize: 30.rpx,
                                    ),
                                  ),
                                ),
                              )),

                          SizedBox(height: 235.rpx),

                          // 报修历史标题
                          Container(
                            width: double.infinity,
                            child: Text("报修历史",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 30.rpx,
                                    height: 1)),
                          ),

                          SizedBox(height: 32.rpx),
                          // Obx(() {
                          //   return Visibility(
                          //     visible: controller.model.repairList != null &&
                          //         controller.model.repairList!.isNotEmpty,
                          //     replacement: EmptyMessageWidget(),
                          //     child: Expanded(
                          //       child: Obx(() => ListView(
                          //           controller:
                          //               scrollController, // 绑定 ScrollController
                          //           shrinkWrap: true,
                          //           scrollDirection: Axis.vertical,
                          //           children: (controller.model.repairList
                          //               .asMap()
                          //               .entries
                          //               .map((e) => RepairHistoryWidget(
                          //                   index: e.key,
                          //                   repairListController: controller))
                          //               .toList() as List<Widget>))),
                          //     ),
                          //   );
                          // }),
                          // 替换原来的 Obx(() => Visibility(...))
                          Expanded(
                            child: Obx(() {
                              final hasData =
                                  controller.model.repairList != null &&
                                      controller.model.repairList!.isNotEmpty;
                              return hasData
                                  ? ListView(
                                      controller: scrollController,
                                      padding: EdgeInsets.zero,
                                      shrinkWrap: true,
                                      children: controller.model.repairList
                                          .asMap()
                                          .entries
                                          .map((e) => RepairHistoryWidget(
                                                index: e.key,
                                                repairListController:
                                                    controller,
                                              ))
                                          .toList(),
                                    )
                                  : NullDataWidget();
                            }),
                          ),
                        ],
                      ),
                    ))),
          ));
    });
  }
}
