<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>参数配置 - 车主信息查询系统</title>
    <!-- 引入Layui CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
    <!-- 引入Font Awesome -->
    <link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
    
    <!-- 引入Layui JS -->
    <script src="{{ url_for('static', filename='layui.js') }}"></script>
    <script>
        layui.use(['layer', 'form', 'element', 'table'], function(){
            var layer = layui.layer;
            var form = layui.form;
            var element = layui.element;
            var table = layui.table;
        });
    </script>
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 引入统一的顶部导航栏 -->
        {% include 'header.html' %}
        
        <!-- 为了保持原有布局，添加一个占位div -->
        <div class="layui-header" style="height: 60px; background-color: #f2f2f2;"></div>

        <!-- 主要内容区域 -->
        <div class="layui-body">
            <div class="layui-fluid">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                <i class="fa fa-cog"></i> 系统参数配置
                            </div>
                            <div class="layui-card-body">
                                <!-- 消息提示区域 -->
                                {% if error %}
                                <div class="layui-bg-red message-box">
                                    <i class="fa fa-exclamation-circle"></i> {{ error }}
                                </div>
                                {% endif %}
                                {% if success %}
                                <div class="layui-bg-green message-box">
                                    <i class="fa fa-check-circle"></i> {{ success }}
                                </div>
                                {% endif %}
                                
                                <!-- 参数配置表单 -->
                                <form class="layui-form" method="POST">
                                    <div class="layui-tab layui-tab-card">
                                        <ul class="layui-tab-title">
                                            <li class="layui-this">基本设置</li>
                                            <li>查询设置</li>
                                            <li>安全设置</li>
                                        </ul>
                                        <div class="layui-tab-content">
                                            <!-- 基本设置 -->
                                            <div class="layui-tab-item layui-show">
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">系统名称</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="system_name" value="{{ config.system_name if config else '车主信息查询系统' }}" class="layui-input" lay-verify="required">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">系统版本</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="system_version" value="{{ config.system_version if config else '1.0.0' }}" class="layui-input" lay-verify="required">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">管理员邮箱</label>
                                                    <div class="layui-input-block">
                                                        <input type="email" name="admin_email" value="{{ config.admin_email if config else '' }}" class="layui-input" lay-verify="email">
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <!-- 查询设置 -->
                                            <div class="layui-tab-item">
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">每页记录数</label>
                                                    <div class="layui-input-block">
                                                        <input type="number" name="page_size" value="{{ config.page_size if config else 10 }}" class="layui-input" lay-verify="required|number">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">查询超时(秒)</label>
                                                    <div class="layui-input-block">
                                                        <input type="number" name="query_timeout" value="{{ config.query_timeout if config else 30 }}" class="layui-input" lay-verify="required|number">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">最大查询结果</label>
                                                    <div class="layui-input-block">
                                                        <input type="number" name="max_results" value="{{ config.max_results if config else 1000 }}" class="layui-input" lay-verify="required|number">
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <!-- 安全设置 -->
                                            <div class="layui-tab-item">
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">密码最小长度</label>
                                                    <div class="layui-input-block">
                                                        <input type="number" name="min_password_length" value="{{ config.min_password_length if config else 8 }}" class="layui-input" lay-verify="required|number">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">会话超时(分钟)</label>
                                                    <div class="layui-input-block">
                                                        <input type="number" name="session_timeout" value="{{ config.session_timeout if config else 30 }}" class="layui-input" lay-verify="required|number">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">登录失败锁定</label>
                                                    <div class="layui-input-block">
                                                        <input type="checkbox" name="enable_login_lock" value="1" title="启用" lay-skin="switch" {% if config and config.enable_login_lock %}checked{% endif %}>
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">失败次数限制</label>
                                                    <div class="layui-input-block">
                                                        <input type="number" name="login_fail_limit" value="{{ config.login_fail_limit if config else 5 }}" class="layui-input" lay-verify="required|number">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="submit" class="layui-btn" lay-submit>保存配置</button>
                                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!-- 引入统一的页脚 -->
    {% include 'footer.html' %}
    </div>

    <script>
    layui.use(['form', 'element', 'layer'], function(){
        var form = layui.form;
        var element = layui.element;
        var layer = layui.layer;
        
        // 表单验证
        form.verify({
            number: function(value) {
                if(!/^\d+$/.test(value)) {
                    return '必须为数字';
                }
            },
            email: function(value) {
                if(value && !/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)) {
                    return '邮箱格式不正确';
                }
            }
        });
        
        // 表单提交
        form.on('submit', function(data){
            // 表单数据会自动提交，这里可以添加额外的验证逻辑
            return true;
        });
    });
    </script>
</body>
</html>