app-starlock/lib/main/lockDetail/lockSet/catEyeSet/videoSlot/videoSlot_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/main/lockDetail/lockSet/catEyeSet/videoSlot/videoSlot_logic.dart';
import 'package:star_lock/main/lockDetail/lockSet/catEyeSet/videoSlot/videoSlot_state.dart';
import 'package:star_lock/tools/dateTool.dart';
import 'package:star_lock/tools/pickers/pickers.dart';
import 'package:star_lock/tools/pickers/time_picker/model/date_mode.dart';
import 'package:star_lock/tools/pickers/time_picker/model/pduration.dart';

import '../../../../../app_settings/app_colors.dart';
import '../../../../../tools/titleAppBar.dart';

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

  @override
  State<VideoSlotPage> createState() => _VideoSlotPageState();
}

class _VideoSlotPageState extends State<VideoSlotPage> {
  final VideoSlotLogic logic = Get.put(VideoSlotLogic());
  final VideoSlotState state = Get.find<VideoSlotLogic>().state;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppColors.mainBackgroundColor,
        appBar: TitleAppBar(
          barTitle: '录像时段'.tr,
          haveBack: true,
          backAction: () {
            Navigator.pop(context, true);
          },
          backgroundColor: AppColors.mainColor,
          actionsList: <Widget>[
            TextButton(
              child: Text(
                '保存'.tr,
                style: TextStyle(color: Colors.white, fontSize: 24.sp),
              ),
              onPressed: logic.updateCatEyeModeConfig,
            ),
          ],
        ),
        body: Obx(() => Column(
              children: <Widget>[
                SizedBox(
                  height: 30.h,
                ),
                _buildTipsView('全天'.tr, 0),
                SizedBox(
                  height: 30.h,
                ),
                _buildCustomTimeView('自定义时间'.tr, 1),
              ],
            )));
  }

//全天
  Widget _buildTipsView(String titleStr, int clickIndex) {
    return GestureDetector(
      child: Container(
        width: ScreenUtil().screenWidth - 40.w,
        margin: EdgeInsets.only(left: 20.w, right: 20.w, bottom: 10.h),
        decoration: BoxDecoration(
          color: state.isCustom.value == true
              ? AppColors.greyBackgroundColor
              : AppColors.blueViewBgColor,
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: Padding(
            padding: EdgeInsets.only(
                left: 20.w, top: 30.h, bottom: 30.h, right: 20.w),
            child: Row(
              children: <Widget>[
                if (state.isCustom.value == false) Image.asset(
                        'images/mine/icon_mine_blueSelect.png',
                        width: 20.w,
                        height: 14.w,
                      ) else SizedBox(
                        width: 20.w,
                        height: 14.w,
                      ),
                SizedBox(width: 10.w),
                Expanded(
                  child: _buildRichText(titleStr, false),
                ),
                SizedBox(
                  width: 10.w,
                ),
              ],
            )),
      ),
      onTap: () {
        if (clickIndex == 0) {
          state.isCustom.value = false;
        } else {
          state.isCustom.value = true;
        }
      },
    );
  }

//自定义时间
  Widget _buildCustomTimeView(String leftStr, int clickIndex) {
    return GestureDetector(
      child: Obx(() => Container(
            width: ScreenUtil().screenWidth - 40.w,
            margin: EdgeInsets.only(left: 20.w, right: 20.w, bottom: 10.h),
            decoration: BoxDecoration(
              color: state.isCustom.value == false
                  ? AppColors.greyBackgroundColor
                  : AppColors.blueViewBgColor,
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: Padding(
                padding: EdgeInsets.only(
                    left: 20.w, top: 30.h, bottom: 30.h, right: 20.w),
                child: Column(
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        if (state.isCustom.value == true) Image.asset(
                                'images/mine/icon_mine_blueSelect.png',
                                width: 20.w,
                                height: 14.w,
                              ) else SizedBox(
                                width: 20.w,
                                height: 14.w,
                              ),
                        SizedBox(width: 10.w),
                        Expanded(
                          child: _buildRichText('自定义时间'.tr, state.isCustom.value),
                        ),
                        SizedBox(
                          width: 10.w,
                        ),
                      ],
                    ),
                    //如果选中了全天模式，就不显示下面的时间选择
                    if (state.isCustom.value == false) Container() else Container(
                            height: 1,
                            margin: EdgeInsets.only(
                                left: 20.w,
                                right: 20.w,
                                top: 20.h,
                                bottom: 20.h),
                            color: state.isCustom.value == true
                                ? AppColors.blueTextTipsColor
                                : Colors.black,
                          ),
                    if (state.isCustom.value == false) Container() else startAndEndTimeRow(false),
                    if (state.isCustom.value == false) Container() else SizedBox(
                            height: 30.h,
                          ),
                    if (state.isCustom.value == false) Container() else startAndEndTimeRow(true),
                  ],
                )),
          )),
      onTap: () {
        if (clickIndex == 1) {
          state.isCustom.value = true;
        } else {
          state.isCustom.value = false;
        }
      },
    );
  }

  //开始时间、结束时间
  Widget startAndEndTimeRow(bool isEndTime) {
    return GestureDetector(
      child: Row(
        children: <Widget>[
          SizedBox(
            width: 20.w,
          ),
          Text(
            isEndTime == false ? '开始时间'.tr : '结束时间'.tr,
            style: TextStyle(
                color: state.isCustom.value == true
                    ? AppColors.blueTextTipsColor
                    : Colors.black,
                fontSize: 22.sp),
          ),
          Expanded(
              child: SizedBox(
            width: 20.w,
          )),
          Obx(() => Text(
                isEndTime == false
                    ? '${'当日'.tr}${state.startDate.value}'
                    : '${'次日'.tr}${state.endDate.value}',
                style: TextStyle(
                    color: state.isCustom.value == true
                        ? AppColors.blueTextTipsColor
                        : Colors.black,
                    fontSize: 22.sp),
              )),
          SizedBox(
            width: 10.w,
          ),
          Image.asset(
            'images/icon_right_grey.png',
            width: 12.w,
            height: 21.w,
          )
        ],
      ),
      onTap: () {
        PDuration selectDate = PDuration.parse(DateTime.tryParse(
            isEndTime == false ? state.startDate.value : state.endDate.value));
        Pickers.showDatePicker(context,
            selectDate: selectDate, mode: DateMode.HM, onConfirm: (PDuration p) {
          if (isEndTime == false) {
            state.startDate.value = DateTool().getYMDHNDateString(p, 3);
          } else {
            state.endDate.value = DateTool().getYMDHNDateString(p, 3);
          }
        });
      },
    );
  }

  Widget _buildRichText(String titleStr, bool isClick) {
    //高亮样式
    final TextStyle titleStyle = TextStyle(
        color: isClick ? AppColors.blueTextTipsColor : Colors.black,
        fontSize: 24.sp,
        fontWeight: FontWeight.w500);

    late InlineSpan tipsPreviewSpan = TextSpan(children: <InlineSpan>[
      TextSpan(text: titleStr, style: titleStyle),
    ]);
    return RichText(text: tipsPreviewSpan);
  }

  String intToStr(int v) {
    return (v < 10) ? "0$v" : "$v";
  }
}