import 'package:ef/ef.dart';
import 'package:flutter/material.dart';
import 'package:vbvs_app/common/color/appConstants.dart';
import 'package:vbvs_app/common/util/CommonVariables.dart';
import 'package:vbvs_app/common/util/FitTool.dart';
import 'package:vbvs_app/common/util/MyUtils.dart';
import 'package:vbvs_app/component/tool/CustomCard.dart';
import 'package:vbvs_app/component/tool/TopSlideNotification.dart';
import 'package:vbvs_app/controller/mh_controller/find_password_controller.dart';
import 'package:vbvs_app/controller/time/countdown_controller.dart';

class FindPasswordPage extends GetView<FindPasswordController> {
  final scaffoldKey = GlobalKey<ScaffoldState>();
  BoxConstraints? bodysize;

  final ScrollController _scrollController = ScrollController();
  final FocusNode _focusNode1 = FocusNode();
  final FocusNode _focusNode2 = FocusNode();

  FindPasswordPage() {
    controller.model.pdshow = true;
    controller.model.cpdshow = true;
    _focusNode1.addListener(() {
      if (_focusNode1.hasFocus) {
        MyUtils.scrollToFocusedInput(_focusNode1, _scrollController);
      }
    });
    _focusNode2.addListener(() {
      if (_focusNode2.hasFocus) {
        MyUtils.scrollToFocusedInput(_focusNode2, _scrollController);
      }
    });
  }

  @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,
                  automaticallyImplyLeading: false,
                  iconTheme: IconThemeData(color: Colors.white),
                  titleSpacing: 0,
                  title: Container(
                    width: double.infinity,
                    height: 180.rpx,
                    child: Stack(
                      alignment: Alignment.center,
                      children: [
                        // 中间居中的标题
                        Text(
                          '找回密码'.tr,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 30.rpx,
                          ),
                        ),
                        // 左侧图标
                        Positioned(
                          left: 0.rpx,
                          child: returnIconButtomNew,
                        ),
                      ],
                    ),
                  ),
                  actions: [],
                  centerTitle: false,
                ),
                body: SingleChildScrollView(
                  controller: _scrollController,
                  child: Container(
                    width: bodysize!.maxWidth,
                    height: bodysize!.maxHeight * 1,
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      children: [
                        Expanded(
                          child: Padding(
                            padding: EdgeInsetsDirectional.fromSTEB(
                                98.rpx, 0, 98.rpx, 0),
                            child: Container(
                              width: bodysize!.maxWidth,
                              height: bodysize!.maxHeight * 0.886,
                              decoration: BoxDecoration(),
                              child: Container(
                                width: bodysize!.maxWidth,
                                height: bodysize!.maxHeight * 1,
                                decoration: BoxDecoration(),
                                child: Column(
                                  mainAxisSize: MainAxisSize.max,
                                  children: [
                                    Padding(
                                      padding: EdgeInsetsDirectional.fromSTEB(
                                          0, 184.rpx, 0, 0),
                                      child: Container(
                                        width: bodysize!.maxWidth,
                                        height: 92.rpx,
                                        decoration: BoxDecoration(),
                                        child: Container(
                                          width: bodysize!.maxWidth,
                                          height: bodysize!.maxHeight * 0.06,
                                          decoration: BoxDecoration(
                                            color: Color(0xFFF3F5F6),
                                            borderRadius:
                                                BorderRadius.circular(12),
                                          ),
                                          child: Align(
                                            alignment:
                                                AlignmentDirectional(0, 0),
                                            child: TextFormField(
                                              // focusNode: _focusNode1,
                                              onChanged: (value) {
                                                controller.model.phone = value;
                                              },
                                              // autofocus: true,
                                              obscureText: false,
                                              decoration: InputDecoration(
                                                labelStyle: TextStyle(
                                                  fontFamily: 'Readex Pro',
                                                  fontSize: 26.rpx,
                                                  letterSpacing: 0,
                                                ),
                                                hintText: '请输入手机号'.tr,
                                                hintStyle: TextStyle(
                                                  fontFamily: 'Readex Pro',
                                                  color: Color(0xFF929699),
                                                  fontSize: 26.rpx,
                                                  letterSpacing: 0,
                                                ),
                                                enabledBorder: InputBorder.none,
                                                focusedBorder: InputBorder.none,
                                                errorBorder: InputBorder.none,
                                                focusedErrorBorder:
                                                    InputBorder.none,
                                                contentPadding:
                                                    EdgeInsetsDirectional
                                                        .fromSTEB(20.rpx, 0, 0,
                                                            0.rpx),
                                              ),
                                              style: TextStyle(
                                                fontFamily: 'Readex Pro',
                                                fontSize: 26.rpx,
                                                letterSpacing: 0,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                    Padding(
                                      padding: EdgeInsetsDirectional.fromSTEB(
                                          0, 32.rpx, 0, 0),
                                      child: Container(
                                        width: bodysize!.maxWidth,
                                        height: 92.rpx,
                                        decoration: BoxDecoration(),
                                        child: Stack(
                                          children: [
                                            Align(
                                              alignment:
                                                  AlignmentDirectional(0, 0),
                                              child: Container(
                                                width: bodysize!.maxWidth,
                                                height: 92.rpx,
                                                decoration: BoxDecoration(
                                                  color: Color(0xFFF3F5F6),
                                                  borderRadius:
                                                      BorderRadius.circular(12),
                                                ),
                                                child: Align(
                                                  alignment:
                                                      AlignmentDirectional(
                                                          0, 0),
                                                  child: TextFormField(
                                                    // autofocus: true,
                                                    // focusNode: _focusNode2,
                                                    onChanged: (value) {
                                                      controller.model.code =
                                                          value;
                                                    },
                                                    obscureText: false,
                                                    decoration: InputDecoration(
                                                      labelStyle: TextStyle(
                                                        fontFamily:
                                                            'Readex Pro',
                                                        fontSize: 20.rpx,
                                                        letterSpacing: 0,
                                                      ),
                                                      hintText: '请输验证码'.tr,
                                                      hintStyle: TextStyle(
                                                        fontFamily:
                                                            'Readex Pro',
                                                        color:
                                                            Color(0xFF929699),
                                                        fontSize: 26.rpx,
                                                        letterSpacing: 0,
                                                      ),
                                                      enabledBorder:
                                                          InputBorder.none,
                                                      focusedBorder:
                                                          InputBorder.none,
                                                      errorBorder:
                                                          InputBorder.none,
                                                      focusedErrorBorder:
                                                          InputBorder.none,
                                                      contentPadding:
                                                          EdgeInsetsDirectional
                                                              .fromSTEB(20.rpx,
                                                                  0, 0, 0.rpx),
                                                    ),
                                                    style: TextStyle(
                                                      fontFamily: 'Readex Pro',
                                                      fontSize: 26.rpx,
                                                      letterSpacing: 0,
                                                    ),
                                                  ),
                                                ),
                                              ),
                                            ),
                                            Align(
                                              alignment: AlignmentDirectional(
                                                  0.4, 0.1),
                                              child: Container(
                                                width: 1.rpx,
                                                height: 38.rpx,
                                                decoration: BoxDecoration(
                                                  color:
                                                      stringToColor("#929699"),
                                                ),
                                              ),
                                            ),
                                            Align(
                                              alignment:
                                                  AlignmentDirectional(1.2, 0),
                                              child: Container(
                                                width:
                                                    bodysize!.maxWidth * 0.157,
                                                height:
                                                    bodysize!.maxHeight * 0.014,
                                                constraints: BoxConstraints(
                                                  minWidth: 118,
                                                  minHeight: 30,
                                                ),
                                                decoration: BoxDecoration(),
                                                child: Align(
                                                  alignment:
                                                      AlignmentDirectional(
                                                          0, 0),
                                                  child: Obx(() {
                                                    final CountdownController
                                                        countdownController =
                                                        Get.find<
                                                            CountdownController>();
                                                    return InkWell(
                                                      onTap: () async {
                                                        if (countdownController
                                                                .countdown
                                                                .value !=
                                                            0) {
                                                          return;
                                                        }
                                                        if (CommonVariables
                                                                .isNetWorkOn ==
                                                            false) {
                                                          TopSlideNotification.show(
                                                              context,
                                                              text:
                                                                  "网络未连接，请开启设备网络后重试"
                                                                      .tr,
                                                              textColor:
                                                                  themeController
                                                                      .currentColor
                                                                      .sc9);
                                                          return;
                                                        }
                                                        String msg =
                                                            await controller
                                                                .getCode(
                                                                    context);
                                                        if (msg.isNotEmpty) {
                                                          return;
                                                        }
                                                        countdownController
                                                                    .countdown
                                                                    .value ==
                                                                0
                                                            ? countdownController
                                                                .startCountdown(
                                                                    AppConstants
                                                                        .code_time)
                                                            : null;
                                                      },
                                                      child: Text(
                                                        countdownController
                                                                    .countdown
                                                                    .value ==
                                                                0
                                                            ? '获取验证码'.tr
                                                            : '${countdownController.countdown.value}' +
                                                                '秒'.tr,
                                                        style: TextStyle(
                                                          color:
                                                              Color(0xFF333333),
                                                          fontSize: 20.rpx,
                                                          letterSpacing: 0,
                                                        ),
                                                      ),
                                                    );
                                                  }),
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                    Padding(
                                      padding: EdgeInsetsDirectional.fromSTEB(
                                          0, 32.rpx, 0, 0),
                                      child: Container(
                                        width: bodysize!.maxWidth,
                                        height: 92.rpx,
                                        decoration: BoxDecoration(),
                                        child: Container(
                                          width: bodysize!.maxWidth,
                                          height: bodysize!.maxHeight * 0.06,
                                          decoration: BoxDecoration(
                                            color: Color(0xFFF3F5F6),
                                            borderRadius:
                                                BorderRadius.circular(12),
                                          ),
                                          child: Align(
                                            alignment:
                                                AlignmentDirectional(0, 0),
                                            child: Obx(() {
                                              return TextFormField(
                                                // autofocus: true,
                                                // focusNode: _focusNode1,
                                                onChanged: (value) {
                                                  controller.model.pd = value;
                                                },
                                                // obscureText: true,
                                                obscureText:
                                                    controller.model.pdshow!,
                                                decoration: InputDecoration(
                                                  labelStyle: TextStyle(
                                                    fontFamily: 'Readex Pro',
                                                    fontSize: 26.rpx,
                                                    letterSpacing: 0,
                                                  ),
                                                  hintText: '请输入新密码'.tr,
                                                  hintStyle: TextStyle(
                                                    fontFamily: 'Readex Pro',
                                                    color: Color(0xFF929699),
                                                    fontSize: 26.rpx,
                                                    letterSpacing: 0,
                                                  ),
                                                  enabledBorder:
                                                      InputBorder.none,
                                                  focusedBorder:
                                                      InputBorder.none,
                                                  errorBorder: InputBorder.none,
                                                  focusedErrorBorder:
                                                      InputBorder.none,
                                                  contentPadding:
                                                      EdgeInsetsDirectional
                                                          .fromSTEB(
                                                              10, 26.rpx, 0, 0),
                                                  suffixIcon: IconButton(
                                                    icon: Icon(
                                                      // 根据 pdshow 控制图标
                                                      controller.model.pdshow!
                                                          ? Icons.visibility_off
                                                          : Icons.visibility,
                                                      color: Color(0xFF333333),
                                                      size: 16,
                                                    ),
                                                    onPressed: () {
                                                      // 切换 pdshow 状态
                                                      controller.model.pdshow =
                                                          !controller
                                                              .model.pdshow!;
                                                      controller.updateAll();
                                                    },
                                                  ),
                                                ),
                                                style: TextStyle(
                                                  fontFamily: 'Readex Pro',
                                                  fontSize: 26.rpx,
                                                  letterSpacing: 0,
                                                ),
                                              );
                                            }),
                                          ),
                                        ),
                                      ),
                                    ),
                                    Padding(
                                      padding: EdgeInsetsDirectional.fromSTEB(
                                          0, 32.rpx, 0, 0),
                                      child: Container(
                                        width: bodysize!.maxWidth,
                                        height: 92.rpx,
                                        decoration: BoxDecoration(),
                                        child: Container(
                                          width: bodysize!.maxWidth,
                                          height: bodysize!.maxHeight * 0.06,
                                          decoration: BoxDecoration(
                                            color: Color(0xFFF3F5F6),
                                            borderRadius:
                                                BorderRadius.circular(12),
                                          ),
                                          child: Align(
                                            alignment:
                                                AlignmentDirectional(0, 0),
                                            child: Obx(() {
                                              return TextFormField(
                                                // autofocus: true,
                                                // focusNode: _focusNode2,
                                                onChanged: (value) {
                                                  controller.model.confirm =
                                                      value;
                                                },
                                                // obscureText: true,
                                                obscureText:
                                                    controller.model.cpdshow!,
                                                decoration: InputDecoration(
                                                  labelStyle: TextStyle(
                                                    fontFamily: 'Readex Pro',
                                                    fontSize: 26.rpx,
                                                    letterSpacing: 0,
                                                  ),
                                                  hintText: '确认新密码',
                                                  hintStyle: TextStyle(
                                                    fontFamily: 'Readex Pro',
                                                    color: Color(0xFF929699),
                                                    fontSize: 26.rpx,
                                                    letterSpacing: 0,
                                                  ),
                                                  enabledBorder:
                                                      InputBorder.none,
                                                  focusedBorder:
                                                      InputBorder.none,
                                                  errorBorder: InputBorder.none,
                                                  focusedErrorBorder:
                                                      InputBorder.none,
                                                  contentPadding:
                                                      EdgeInsetsDirectional
                                                          .fromSTEB(
                                                              10, 26.rpx, 0, 0),
                                                  suffixIcon: IconButton(
                                                    icon: Icon(
                                                      // 根据 pdshow 控制图标
                                                      controller.model.cpdshow!
                                                          ? Icons.visibility_off
                                                          : Icons.visibility,
                                                      color: Color(0xFF333333),
                                                      size: 16,
                                                    ),
                                                    onPressed: () {
                                                      // 切换 pdshow 状态
                                                      controller.model.cpdshow =
                                                          !controller
                                                              .model.cpdshow!;
                                                      controller.updateAll();
                                                    },
                                                  ),
                                                ),
                                                style: TextStyle(
                                                  fontFamily: 'Readex Pro',
                                                  fontSize: 26.rpx,
                                                  letterSpacing: 0,
                                                ),
                                              );
                                            }),
                                          ),
                                        ),
                                      ),
                                    ),
                                    Padding(
                                      padding: EdgeInsetsDirectional.fromSTEB(
                                          42.rpx, 38.rpx, 42.rpx, 0),
                                      child: Container(
                                        width: bodysize!.maxWidth,
                                        height: bodysize!.maxHeight * 0.022,
                                        constraints: BoxConstraints(
                                          minWidth: 466,
                                          minHeight: 30,
                                        ),
                                        decoration: BoxDecoration(),
                                        child: Container(
                                          width: bodysize!.maxWidth,
                                          height: bodysize!.maxHeight * 0.022,
                                          constraints: BoxConstraints(
                                            minWidth: 466,
                                            minHeight: 30,
                                          ),
                                          decoration: BoxDecoration(),
                                        ),
                                      ),
                                    ),
                                    Padding(
                                      padding: EdgeInsetsDirectional.fromSTEB(
                                          0, 58.rpx, 0, 0),
                                      child: Container(
                                          width: bodysize!.maxWidth,
                                          height: bodysize!.maxHeight * 0.056,
                                          decoration: BoxDecoration(),
                                          child: CustomCard(
                                            borderRadius: 16.rpx,
                                            gradientDirection:
                                                GradientDirection.vertical,
                                            onTap: () async {
                                              if (CommonVariables.isNetWorkOn ==
                                                  false) {
                                                TopSlideNotification.show(
                                                    context,
                                                    text: "网络未连接，请开启设备网络后重试".tr,
                                                    textColor: themeController
                                                        .currentColor.sc9);
                                                return;
                                              }
                                              String msg = await controller
                                                  .confirmCode(context);
                                              if (msg.isEmpty) {
                                                Get.toNamed("/loginPage");
                                              }
                                            },
                                            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(
                                                        16.rpx),
                                              ),
                                              child: Text(
                                                "提交",
                                                style: TextStyle(
                                                  fontFamily: 'Readex Pro',
                                                  color: Color(0XFF003058),
                                                  letterSpacing: 0,
                                                  fontSize: 26.rpx,
                                                ),
                                              ),
                                            ),
                                          )),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                )),
          ));
    });
  }
}
