app-starlock/lib/main/lockDetail/lockSet/catEyeSet/catEyeCustomMode/catEyeCustomMode_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/appRouters.dart';
import 'package:star_lock/app_settings/app_colors.dart';
import 'package:star_lock/main/lockDetail/lockSet/catEyeSet/catEyeCustomMode/catEyeCustomMode_logic.dart';
import 'package:star_lock/main/lockDetail/lockSet/catEyeSet/catEyeCustomMode/catEyeCustomMode_state.dart';
import 'package:star_lock/tools/commonItem.dart';
import 'package:star_lock/tools/custom_bottom_sheet.dart';
import 'package:star_lock/tools/titleAppBar.dart';

class CatEyeCustomModePage extends StatefulWidget {
  const CatEyeCustomModePage({Key? key}) : super(key: key);

  @override
  State<CatEyeCustomModePage> createState() => _CatEyeCustomModePageState();
}

class _CatEyeCustomModePageState extends State<CatEyeCustomModePage> {
  final CatEyeCustomModeLogic logic = Get.put(CatEyeCustomModeLogic());
  final CatEyeCustomModeState state = Get.find<CatEyeCustomModeLogic>().state;

  @override
  initState() {
    super.initState();
    // logic.getLockSettingInfoData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: TitleAppBar(
          barTitle: '自定义模式'.tr,
          haveBack: true,
          backAction: () {
            Navigator.pop(context, true);
          },
          backgroundColor: AppColors.mainColor),
      body: Obx(
        () => Column(
          children: [
            Container(
              margin: EdgeInsets.only(left: 20.w),
              child: CommonItem(
                leftTitel: '录像时段'.tr,
                rightTitle: '',
                isHaveLine: false,
                isHaveDirection: true,
                isHaveRightWidget: true,
                rightWidget: Container(
                  constraints: BoxConstraints(maxWidth: 150.w), // 限制最大宽度
                  child: Text(
                    state.selectVideoSlot.value,
                    style: TextStyle(
                        fontSize: 22.sp, color: AppColors.darkGrayTextColor),
                    textAlign: TextAlign.right, // 右对齐
                    softWrap: true, // 允许换行
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis, // 文本溢出时显示
                  ),
                ),
                action: () {
                  Navigator.pushNamed(context, Routers.videoSlotPage,
                      arguments: {
                        'lockSetInfoData': state.lockSetInfoData.value,
                        'catEyeConfigData': state.lockSetInfoData.value
                                .lockSettingInfo!.catEyeConfig!.isNotEmpty
                            ? state.lockSetInfoData.value.lockSettingInfo!
                                .catEyeConfig![0]
                            : null
                      });
                },
              ),
            ),
            _buildSubTitleItem(
                '有人出现时录像'.tr,
                '有人在门口出现10秒后开始录像。'.tr + '\n' + '有人按门铃时立即录像'.tr,
                state.recordTime.value, () {
              _openBottomItemSheet(state.showsUpVideoList.value, 0);
            }),
            SizedBox(
              height: 30.h,
            ),
            _buildSubTitleItem('人体侦测距离'.tr, '有人出现在门前1.5米范围时启动录像'.tr,
                state.detectionDistance.value, () {
              _openBottomItemSheet(state.detectionRangeList.value, 1);
            }),
            SizedBox(
              height: 30.h,
            ),
            // Container(
            //   margin: EdgeInsets.only(left: 20.w),
            //   child: CommonItem(
            //     leftTitel: '实时画面'.tr,
            //     rightTitle: state.realTimeMode.value,
            //     isHaveLine: false,
            //     isHaveDirection: true,
            //     isHaveRightWidget: false,
            //     action: () {
            //       Navigator.pushNamed(context, Routers.liveVideoPage,
            //           arguments: {
            //             'lockSetInfoData': state.lockSetInfoData.value,
            //             'catEyeConfigData': state.lockSetInfoData.value
            //                     .lockSettingInfo!.catEyeConfig!.isNotEmpty
            //                 ? state.lockSetInfoData.value.lockSettingInfo!
            //                     .catEyeConfig![0]
            //                 : null
            //           });
            //     },
            //   ),
            // )
          ],
        ),
      ),
    );
  }

  Widget _buildSubTitleItem(
      String leftStr, String subTitle, String rightStr, Function()? action) {
    return GestureDetector(
      onTap: action,
      child: Container(
        color: Colors.white,
        margin: EdgeInsets.only(left: 20.w, right: 20.w, top: 20.h),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SizedBox(
              width: 20.w,
            ),
            Expanded(
                child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Container(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    leftStr,
                    style: TextStyle(fontSize: 24.sp, color: Colors.black),
                  ),
                ),
                SizedBox(
                  height: 10.h,
                ),
                Container(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    subTitle,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        fontSize: 20.sp, color: AppColors.btnDisableColor),
                  ),
                )
              ],
            )),
            SizedBox(
              width: 20.w,
            ),
            Text(
              rightStr,
              style: TextStyle(
                  fontSize: 22.sp, color: AppColors.darkGrayTextColor),
            ),
            SizedBox(
              width: 10.w,
            ),
            Image.asset(
              'images/icon_right_grey.png',
              width: 12.w,
              height: 21.w,
            )
          ],
        ),
      ),
    );
  }

  Future _openBottomItemSheet(List bottomItemList, int clickIndex) async {
    showModalBottomSheet(
      context: context,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadiusDirectional.circular(10)),
      builder: (BuildContext context) {
        return AlertBottomWidget(
          topTitle: '',
          items: bottomItemList,
          chooseCallback: (value) {
            if (clickIndex == 0) {
              //有人出现时录像
              state.recordTime.value = state.showsUpVideoList.value[value];
            } else if (clickIndex == 1) {
              //人体侦测距离
              state.detectionDistance.value =
                  state.detectionRangeList.value[value];
            }
            logic.updateCustomModeConfig(clickIndex);
          },
        );
      },
    );
  }
}