<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户表单 - Struts2</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 700px; margin: 40px auto; padding: 20px; background:#f7f8fa; }
        h1 { color: #e74c3c; }
        .form-group { margin: 15px 0; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input { width: 100%; padding: 10px; font-size: 14px; box-sizing: border-box; }
        button { background: #3498db; color: white; padding: 12px 24px; border: none; cursor: pointer; margin-top: 10px; border-radius:6px; }
        button:hover { background: #2980b9; }
        .lab, .tip { background:#fff; padding:15px; border-radius:10px; margin:18px 0; box-shadow:0 4px 14px rgba(0,0,0,.06); }
        .lab { background:#fff7e6; border-left:4px solid #fa8c16; }
        .quick { display:flex; gap:10px; flex-wrap:wrap; }
        .quick button { margin-top:0; }
    </style>
</head>
<body>
    <h1><s:if test="user.id == null">添加用户</s:if><s:else>编辑用户</s:else></h1>

    <div class="lab">
        <strong>实验任务卡</strong>
        <ul>
            <li>试着新增一个完整用户，提交后观察为什么回到列表页</li>
            <li>再故意填一个不合理年龄，看当前脚手架是否已经做服务端校验</li>
            <li>思考：如果要做更严谨校验，你会把规则放在 Action、拦截器，还是 XML/注解里？</li>
        </ul>
    </div>

    <div class="tip">
        <strong>快速填充示例</strong>
        <div class="quick">
            <button type="button" onclick="fillExample('赵六','zhaoliu@example.com',26)">填入正常示例</button>
            <button type="button" onclick="fillExample('测试用户','bad-email',-1)">填入异常示例</button>
        </div>
    </div>
    
    <s:form action="%{user.id == null ? 'user_add' : 'user_update'}" method="post">
        <s:hidden name="user.id"/>
        
        <div class="form-group">
            <label>姓名:</label>
            <s:textfield name="user.name" placeholder="请输入姓名"/>
            <s:fielderror fieldName="user.name" cssStyle="color:#e74c3c;font-size:12px;"/>
        </div>
        
        <div class="form-group">
            <label>邮箱:</label>
            <s:textfield name="user.email" placeholder="请输入邮箱"/>
            <s:fielderror fieldName="user.email" cssStyle="color:#e74c3c;font-size:12px;"/>
        </div>
        
        <div class="form-group">
            <label>年龄:</label>
            <s:textfield name="user.age" placeholder="请输入年龄"/>
            <s:fielderror fieldName="user.age" cssStyle="color:#e74c3c;font-size:12px;"/>
        </div>
        
        <button type="submit">保存</button>
    </s:form>
    
    <div class="tip">
        <strong>学习点</strong>
        <ul>
            <li>表单字段名 <code>user.name</code> / <code>user.email</code> / <code>user.age</code> 会映射到嵌套对象</li>
            <li>当进入编辑页时，Action 会先根据 <code>id</code> 找到已有对象并回填</li>
            <li>提交成功后通过 <code>redirectAction</code> 返回列表页，避免刷新重复提交</li>
        </ul>
    </div>
    
    <p><a href="user">← 返回用户列表</a></p>

    <script>
        function fillExample(name, email, age) {
            const inputs = document.querySelectorAll('input[type="text"]');
            if (inputs[0]) inputs[0].value = name;
            if (inputs[1]) inputs[1].value = email;
            if (inputs[2]) inputs[2].value = age;
        }
    </script>
</body>
</html>
