import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// ============================================================
/// TextField 输入框演示页（登录表单）
///
/// 一、两种使用方式：
///   1. 直接运行本页面：runApp(const MaterialApp(home: InputDemoPage()))
///   2. 复制 body 核心代码到任意 Scaffold 的 body 中。
///
/// 二、核心知识点：
///   1. TextEditingController 管理输入框内容，读取用 controller.text；
///   2. 控制器必须在 dispose() 里释放，否则内存泄漏；
///   3. obscureText 控制密码明文/密文（配合 setState 做"眼睛"切换）；
///   4. 注意：Scaffold 没有 padding 参数！外层间距要用 body 里的 Padding。
/// ============================================================
class InputDemoPage extends StatefulWidget {
  const InputDemoPage({super.key});

  @override
  State<InputDemoPage> createState() => _InputDemoPageState();
}

class _InputDemoPageState extends State<InputDemoPage> {
  // 控制器：负责管理输入框内容
  final TextEditingController _userCtrl = TextEditingController();
  final TextEditingController _pwdCtrl = TextEditingController();
  // 密码是否明文显示（默认密文）
  bool _showPwd = false;

  @override
  void dispose() {
    // 释放控制器，防止内存泄漏
    _userCtrl.dispose();
    _pwdCtrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TextField 登录表单 Demo')),
      body: Padding(
        // Scaffold 没有 padding 参数，间距写在 body 的 Padding 上
        padding: EdgeInsets.all(20.w),
        child: Column(
          children: [
            TextField(
              controller: _userCtrl,
              keyboardType: TextInputType.phone, // 弹数字键盘
              decoration: const InputDecoration(
                labelText: "手机号",
                hintText: "请输入11位手机号",
                prefixIcon: Icon(Icons.phone),
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 16.h),
            TextField(
              controller: _pwdCtrl,
              obscureText: !_showPwd, // 密文/明文由状态决定
              decoration: InputDecoration(
                labelText: "密码",
                hintText: "请输入密码",
                prefixIcon: const Icon(Icons.lock),
                border: const OutlineInputBorder(),
                // suffixIcon：右侧小眼睛，点击切换明文
                suffixIcon: IconButton(
                  icon: Icon(_showPwd ? Icons.visibility : Icons.visibility_off),
                  onPressed: () {
                    setState(() {
                      _showPwd = !_showPwd; // 修改状态触发重建
                    });
                  },
                ),
              ),
            ),
            SizedBox(height: 24.h),
            ElevatedButton(
              onPressed: () {
                // 获取输入内容
                String user = _userCtrl.text;
                String pwd = _pwdCtrl.text;
                if (kDebugMode) {
                  print("账号:$user，密码11:$pwd");
                }
              },
              child: const Text("登录"),
            ),
          ],
        ),
      ),
    );
  }
}