<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
<head>
    <title>计算器 - Struts2 表单示例</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; }
        h1 { color: #e74c3c; }
        .form-group { margin: 15px 0; }
        label { display: inline-block; width: 100px; }
        input, select { padding: 8px; font-size: 14px; }
        button { background: #3498db; color: white; padding: 10px 20px; border: none; cursor: pointer; }
        button:hover { background: #2980b9; }
        .result { background: #2ecc71; color: white; padding: 15px; margin: 20px 0; border-radius: 5px; }
        .error { color: #e74c3c; font-size: 12px; }
        .tip { background: #f9f9f9; padding: 15px; border-left: 4px solid #3498db; margin: 20px 0; }
        .quickbar { background:#fff7e6; padding:12px; border-left:4px solid #fa8c16; margin:20px 0; border-radius:6px; }
        .quickbar button { margin-right:8px; }
    </style>
</head>
<body>
    <h1>🔢 计算器 - Struts2 表单示例</h1>
    
    <s:if test="result != null">
        <div class="result">
            计算结果: <s:property value="num1"/> 
            <s:property value="operator"/> 
            <s:property value="num2"/> 
            = <s:property value="result"/>
        </div>
    </s:if>
    
    <div class="quickbar">
        <strong>快速实验：</strong>
        <button type="button" onclick="fillExample(12, '+', 8)">填入正确示例</button>
        <button type="button" onclick="fillExample(12, '/', 0)">填入除零错误</button>
        <button type="button" onclick="fillExample('', '*', '')">填入校验错误</button>
    </div>

    <s:form action="calc_execute" method="post">
        <div class="form-group">
            <label>数字 1:</label>
            <s:textfield name="num1" placeholder="输入第一个数字"/>
            <s:fielderror fieldName="num1" cssClass="error"/>
        </div>
        
        <div class="form-group">
            <label>运算符:</label>
            <s:select name="operator" list="{'+', '-', '*', '/'}" headerKey="" headerValue="选择运算符"/>
        </div>
        
        <div class="form-group">
            <label>数字 2:</label>
            <s:textfield name="num2" placeholder="输入第二个数字"/>
            <s:fielderror fieldName="num2" cssClass="error"/>
        </div>
        
        <div class="form-group">
            <button type="submit">计算</button>
        </div>
    </s:form>
    
    <div class="tip">
        <strong>学习点:</strong>
        <ul>
            <li><code>name</code> 属性对应 Action 的 setter 方法</li>
            <li><code>&lt;s:fielderror&gt;</code> 显示验证错误</li>
            <li><code>validate()</code> 方法进行数据验证</li>
        </ul>
    </div>
    
    <p><a href="learn">← 返回学习中心</a></p>

    <script>
        function fillExample(n1, op, n2) {
            const fields = document.querySelectorAll('input[type="text"]');
            const select = document.querySelector('select');
            if (fields[0]) fields[0].value = n1;
            if (select) select.value = op;
            if (fields[1]) fields[1].value = n2;
        }
    </script>
</body>
</html>
