app-starlock/lib/main/lockDetail/lockSet/configuringWifi/configuringWifi/configuringWifi_page.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/main/lockDetail/lockSet/configuringWifi/configuringWifi/configuringWifi_state.dart';

import '../../../../../app_settings/app_colors.dart';
import '../../../../../blue/blue_manage.dart';
import '../../../../../tools/appRouteObserver.dart';
import '../../../../../tools/commonItem.dart';
import '../../../../../tools/submitBtn.dart';
import '../../../../../tools/titleAppBar.dart';
import 'configuringWifi_logic.dart';

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

  @override
  State<ConfiguringWifiPage> createState() => _ConfiguringWifiPageState();
}

class _ConfiguringWifiPageState extends State<ConfiguringWifiPage>
    with RouteAware {
  final ConfiguringWifiLogic logic = Get.put(ConfiguringWifiLogic());
  final ConfiguringWifiState state = Get.find<ConfiguringWifiLogic>().state;

  // 添加密码可见性控制
  final RxBool _obscureText = true.obs;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: TitleAppBar(
            barTitle: '配置WiFi'.tr,
            haveBack: true,
            backgroundColor: AppColors.mainColor),
        body: Column(
          children: <Widget>[
            configuringWifiTFWidget(
                'WiFi名称'.tr, '请输入WiFi名字'.tr, state.wifiNameController),
            Container(
                width: 1.sw, height: 1.h, color: AppColors.mainBackgroundColor),
            configuringWifiPasswordTFWidget(
                'WiFi密码'.tr, '请输入WiFi密码'.tr, state.wifiPWDController),
            SizedBox(
              height: 50.h,
            ),
            Obx(
              () => SubmitBtn(
                btnName: state.sureBtnState.value == 1 ? '配置中...'.tr : '确定'.tr,
                // 当sureBtnState为1时按钮不可用
                isDisabled: state.sureBtnState.value == 0,
                onClick: state.sureBtnState.value == 1
                    ? null
                    : () {
                        FocusScope.of(context).requestFocus(FocusNode());
                        // 验证输入
                        if (state.wifiNameController.text.isEmpty) {
                          logic.showToast('请输入WiFi名称'.tr);
                          return;
                        }
                        if (state.wifiPWDController.text.isEmpty) {
                          logic.showToast('请输入WiFi密码'.tr);
                          return;
                        }
                        // 检查WiFi名称是否包含5G关键字
                        if (state.wifiNameController.text
                            .toLowerCase()
                            .contains('5g')) {
                          logic.showToast('请确保使用2.4GHz WiFi网络'.tr);
                          return;
                        }
                        logic.senderConfiguringWifiAction();
                      },
              ),
            ),
            SizedBox(
              height: 20.h,
            ),
            Text(
              '请确保网络是2.4GHz Wi-Fi'.tr,
              style: TextStyle(
                color: AppColors.blackColor,
                fontSize: 20.sp,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ));
  }

  Widget configuringWifiTFWidget(
      String titleStr, String rightTitle, TextEditingController controller) {
    return Column(
      children: <Widget>[
        Container(height: 10.h),
        CommonItem(
            leftTitel: titleStr,
            rightTitle: '',
            isHaveRightWidget: true,
            rightWidget: getTFWidget(rightTitle, controller)),
        Container(height: 10.h),
      ],
    );
  }

  Widget configuringWifiPasswordTFWidget(
      String titleStr, String rightTitle, TextEditingController controller) {
    return Column(
      children: <Widget>[
        Container(height: 10.h),
        CommonItem(
            leftTitel: titleStr,
            rightTitle: '',
            isHaveRightWidget: true,
            rightWidget: getPasswordTFWidget(rightTitle, controller)),
        Container(height: 10.h),
      ],
    );
  }

  // 普通输入框
  Widget getTFWidget(String tfStr, TextEditingController controller) {
    return Container(
      height: 65.h,
      width: 300.w,
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              maxLines: 1,
              inputFormatters: <TextInputFormatter>[
                FilteringTextInputFormatter.deny('\n'),
              ],
              controller: controller,
              autofocus: false,
              textAlign: TextAlign.end,
              decoration: InputDecoration(
                hintText: tfStr,
                hintStyle: TextStyle(fontSize: 22.sp),
                focusedBorder: const OutlineInputBorder(
                    borderSide:
                        BorderSide(width: 0, color: Colors.transparent)),
                disabledBorder: const OutlineInputBorder(
                    borderSide:
                        BorderSide(width: 0, color: Colors.transparent)),
                enabledBorder: const OutlineInputBorder(
                    borderSide:
                        BorderSide(width: 0, color: Colors.transparent)),
                border: const OutlineInputBorder(
                    borderSide:
                        BorderSide(width: 0, color: Colors.transparent)),
                contentPadding: const EdgeInsets.symmetric(vertical: 0),
              ),
              style: TextStyle(
                  fontSize: 22.sp, textBaseline: TextBaseline.alphabetic),
            ),
          ),
          SizedBox(
            width: 10.w,
          ),
        ],
      ),
    );
  }

  // 密码输入框
  Widget getPasswordTFWidget(String tfStr, TextEditingController controller) {
    return Container(
      height: 65.h,
      width: 300.w,
      child: Row(
        children: <Widget>[
          Expanded(
            child: Obx(
              () => TextField(
                maxLines: 1,
                obscureText: _obscureText.value,
                inputFormatters: <TextInputFormatter>[
                  FilteringTextInputFormatter.deny('\n'),
                ],
                controller: controller,
                autofocus: false,
                textAlign: TextAlign.end,
                decoration: InputDecoration(
                  hintText: tfStr,
                  hintStyle: TextStyle(fontSize: 22.sp),
                  focusedBorder: const OutlineInputBorder(
                      borderSide:
                          BorderSide(width: 0, color: Colors.transparent)),
                  disabledBorder: const OutlineInputBorder(
                      borderSide:
                          BorderSide(width: 0, color: Colors.transparent)),
                  enabledBorder: const OutlineInputBorder(
                      borderSide:
                          BorderSide(width: 0, color: Colors.transparent)),
                  border: const OutlineInputBorder(
                      borderSide:
                          BorderSide(width: 0, color: Colors.transparent)),
                  contentPadding: const EdgeInsets.symmetric(vertical: 0),
                ),
                style: TextStyle(
                    fontSize: 22.sp, textBaseline: TextBaseline.alphabetic),
              ),
            ),
          ),
          IconButton(
            icon: Icon(
              _obscureText.value ? Icons.visibility_off : Icons.visibility,
              color: Colors.grey,
              size: 24.sp,
            ),
            onPressed: () {
              _obscureText.value = !_obscureText.value;
            },
          ),
        ],
      ),
    );
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    /// 路由订阅
    AppRouteObserver().routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void dispose() {
    /// 取消路由订阅
    AppRouteObserver().routeObserver.unsubscribe(this);
    super.dispose();
  }

  /// 从上级界面进入 当前界面即将出现
  @override
  void didPush() {
    super.didPush();
    state.ifCurrentScreen.value = true;
  }

  /// 返回上一个界面 当前界面即将消失
  @override
  void didPop() {
    super.didPop();
    logic.cancelBlueConnetctToastTimer();
    if (EasyLoading.isShow) EasyLoading.dismiss(animation: true);
    state.ifCurrentScreen.value = false;
    state.sureBtnState.value = 0;
  }

  /// 从下级返回 当前界面即将出现
  @override
  void didPopNext() {
    super.didPopNext();
    state.ifCurrentScreen.value = true;
  }

  /// 进入下级界面 当前界面即将消失
  @override
  void didPushNext() {
    super.didPushNext();
    logic.cancelBlueConnetctToastTimer();
    if (EasyLoading.isShow) EasyLoading.dismiss(animation: true);
    state.ifCurrentScreen.value = false;
    state.sureBtnState.value = 0;
  }
}