VitalApp/lib/pages/login/view.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:vitalapp/components/alert_dialog.dart';
import 'package:vitalapp/components/button.dart';
import 'package:vitalapp/components/label_checkbox.dart';
import 'package:vitalapp/pages/login/controller.dart';
import 'package:vitalapp/pages/settings/server/controller.dart';
import 'package:vitalapp/pages/settings/server/view.dart';

class LoginPage extends GetView<LoginController> {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: true,
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Stack(
          children: [
            const _ColorBackgroundLayer(
              color: Color.fromARGB(
                255,
                239,
                246,
                255,
              ),
            ),
            _ImageBackgroundLayer(),
            Row(
              children: [
                SizedBox(
                  width: 600,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      const SizedBox(height: 66 / 2),
                      Container(
                        padding: const EdgeInsets.only(right: 10),
                        child: Image.asset("assets/images/login.png"),
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  width: 150,
                ),
                _buildCardLayer(
                  Container(
                    width: 400,
                    height: 450,
                    decoration: const BoxDecoration(
                      borderRadius: BorderRadius.all(
                        Radius.circular(8),
                      ),
                      color: Colors.white,
                    ),
                    child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 50),
                      width: 300,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const Text(
                            '杏聆荟健康平台',
                            style: TextStyle(
                              fontSize: 25,
                              color: Colors.black,
                            ),
                          ),
                          const SizedBox(
                            height: 50,
                          ),
                          _AccountInput(
                            value: controller.state.account,
                            onChanged: (value) {
                              controller.state.account = value;
                              controller.state.password = "";
                              controller.passwordEditingController.text = "";
                            },
                          ),
                          const SizedBox(height: 20),
                          _PasswordInput(
                            isPasswordVisible: false,
                            value: controller.state.password,
                            textEditingController:
                                controller.passwordEditingController,
                            onChanged: (value) =>
                                controller.state.password = value,
                            onSubmit: () {
                              controller.onSubmit();
                            },
                          ),
                          const SizedBox(height: 20),
                          SizedBox(
                            width: 300,
                            height: 56,
                            child: VButton(
                              onTap: () {
                                controller.onSubmit();
                              },
                              child: const Text(
                                "登 录",
                                style: TextStyle(
                                  fontSize: 18,
                                ),
                              ),
                            ),
                          ),
                          const SizedBox(height: 20),
                          Obx(
                            () => LabeledCheckbox(
                              label: const Text(
                                '自动登录',
                                style: TextStyle(
                                  fontSize: 18,
                                ),
                              ),
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 4.0),
                              value: controller.state.isAutoLogin,
                              onChanged: controller.onAutoLoginChanged,
                              mainAxisAlignment: MainAxisAlignment.start,
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton.small(
          child: const Icon(Icons.settings),
          onPressed: () async {
            // Get.toNamed("/login/gateway");
            Get.delete<ServerSettingController>();
            Get.put<ServerSettingController>(ServerSettingController4Login());
            await Get.dialog(
              SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    SizedBox(height: 90),
                    VAlertDialog(
                      width: 600,
                      title: "服务设置",
                      contentPadding: EdgeInsets.symmetric(horizontal: 18),
                      content: SizedBox(
                        height: 400,
                        child: ServerSettingPage(),
                      ),
                    ),
                  ],
                ),
              ),
            );
            Get.delete<ServerSettingController>();
          },
        ),
      ),
    );
  }

  Widget _buildCardLayer(
    Widget cardLayerChild,
  ) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(
          8,
        ),
      ),
      color: Colors.white,
      elevation: 10,
      child: cardLayerChild,
    );
  }
}

///图片背景层
class _ImageBackgroundLayer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox.expand(
      child: Image.asset(
        "assets/images/background.png",
        fit: BoxFit.cover,
      ),
    );
  }
}

///颜色背景层
class _ColorBackgroundLayer extends StatelessWidget {
  const _ColorBackgroundLayer({
    required this.color,
  });

  final Color color;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: color,
    );
  }
}

class _AccountInput extends StatelessWidget {
  final String value;

  final ValueChanged<String> onChanged;

  const _AccountInput({
    required this.value,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    final border = OutlineInputBorder(
      borderRadius: const BorderRadius.all(Radius.circular(8)),
      borderSide: BorderSide(
        color: Theme.of(context).primaryColor,
      ),
    );
    return SizedBox(
      height: 50,
      child: TextField(
        controller: TextEditingController(text: value),
        onChanged: (value) {
          onChanged.call(value);
        },
        keyboardType: TextInputType.name,
        style: const TextStyle(
          fontSize: 20,
        ),
        decoration: InputDecoration(
          fillColor: Colors.white,
          filled: true,
          hintText: "请输入用户名",
          hintStyle: const TextStyle(
            fontSize: 18,
            color: Colors.black54,
          ),
          alignLabelWithHint: true,
          counterText: '',
          isDense: true,
          isCollapsed: false,
          contentPadding:
              const EdgeInsets.symmetric(vertical: 12, horizontal: 26),
          enabledBorder: border,
          focusedBorder: border,
        ),
      ),
    );
  }
}

class _PasswordInput extends StatefulWidget {
  final String value;
  final ValueChanged<String> onChanged;
  final bool isPasswordVisible;
  final TextEditingController textEditingController;
  final VoidCallback onSubmit;

  const _PasswordInput({
    Key? key,
    required this.value,
    required this.onChanged,
    required this.isPasswordVisible,
    required this.textEditingController,
    required this.onSubmit,
  }) : super(key: key);

  @override
  _PasswordInputState createState() => _PasswordInputState();
}

class _PasswordInputState extends State<_PasswordInput> {
  bool _isPasswordVisible = false;
  // TextEditingController _textEditingController = TextEditingController();
  @override
  void initState() {
    _isPasswordVisible = widget.isPasswordVisible;
    // _textEditingController = TextEditingController(text: widget.value);

    if (mounted) {
      setState(() {});
    }
    super.initState();
  }

  // @override
  // void didUpdateWidget(_PasswordInput oldWidget) {
  //   super.didUpdateWidget(oldWidget);

  //   // 检查 Key 值是否发生变化
  //   if (widget.key != oldWidget.key) {
  //     _textEditingController.text = widget.value;
  //   }
  // }

  @override
  Widget build(BuildContext context) {
    // print("😊😊_textEditingController:${_textEditingController.hashCode}");
    final border = OutlineInputBorder(
      borderRadius: const BorderRadius.all(Radius.circular(8)),
      borderSide: BorderSide(
        color: Theme.of(context).primaryColor,
      ),
    );
    return SizedBox(
      height: 50,
      child: TextField(
        controller: widget.textEditingController,
        obscureText: !_isPasswordVisible,
        onChanged: (value) {
          widget.onChanged(value);
        },
        onSubmitted: (value) {
          print("submit");
          widget.onSubmit();
        },
        style: const TextStyle(fontSize: 20),
        decoration: InputDecoration(
          fillColor: Colors.white,
          filled: true,
          hintText: "请输入密码",
          hintStyle: const TextStyle(
            fontSize: 18,
            color: Colors.black54,
          ),
          alignLabelWithHint: true,
          counterText: '',
          isDense: true,
          isCollapsed: false,
          contentPadding:
              const EdgeInsets.symmetric(vertical: 12, horizontal: 26),
          enabledBorder: border,
          focusedBorder: border,
          suffixIcon: GestureDetector(
            onTap: () {
              setState(() {
                _isPasswordVisible = !_isPasswordVisible;
              });
            },
            child: Icon(
              _isPasswordVisible ? Icons.visibility : Icons.visibility_off,
            ),
          ),
        ),
      ),
    );
  }
}