<!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>
</head>
<body>
    {% include 'header.html' %}

    <!-- 主要内容区域 -->
    <div class="content-container">
        <div class="content-wrapper">
            <!-- 参数配置卡片 -->
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-cog"></i> 参数配置
                    <a href="{{ url_for('query') }}" class="layui-btn layui-btn-xs layui-btn-primary" style="float: right;">
                        <i class="fa fa-arrow-left"></i> 返回主页面
                    </a>
                </div>
                <div class="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 %}

                    <div class="layui-text" style="text-align: center; margin-bottom: 20px;">
                        <div style="width: 80px; height: 80px; background-color: #f2f2f2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
                            <i class="fa fa-cogs" style="font-size: 40px; color: #009688;"></i>
                        </div>
                        <p style="color: #666;">请设置和管理系统参数配置</p>
                    </div>

                    <!-- 表单区域 -->
                    <div class="layui-form" id="parameterForm" style="max-width: 600px; margin: 0 auto;">
                        <div class="message-box" id="updateTimeAlert" style="display: none; justify-content: center; margin-bottom: 15px;">
                            <i class="fa fa-info-circle"></i>
                            <span id="updateTimeContent"></span>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">参数1 <span class="layui-form-must">*</span></label>
                            <div class="layui-input-block">
                                <input type="text" id="param1" name="param1" required lay-verify="required" placeholder="请输入参数1的值" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">参数2</label>
                            <div class="layui-input-block">
                                <input type="text" id="param2" name="param2" placeholder="请输入参数2的值" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">参数3</label>
                            <div class="layui-input-block">
                                <input type="text" id="param3" name="param3" placeholder="请输入参数3的值" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">参数4</label>
                            <div class="layui-input-block">
                                <input type="text" id="param4" name="param4" placeholder="参数4为系统默认值，不可修改" autocomplete="off" class="layui-input" readonly>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">参数5</label>
                            <div class="layui-input-block">
                                <input type="text" id="param5" name="param5" placeholder="请输入参数5的值" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-primary" id="reloadButton">
                                    <i class="fa fa-refresh mr-1"></i> 重新加载
                                </button>
                                <button class="layui-btn layui-btn-normal" id="saveButton" lay-submit lay-filter="saveConfig">
                                    <i class="fa fa-save mr-1"></i> 保存配置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    layui.use(['form', 'layer'], function(){
        var form = layui.form;
        var layer = layui.layer;
        
        // 页面加载时获取参数配置
        loadParameterConfig();
        
        // 重新加载按钮点击事件
        document.getElementById('reloadButton').addEventListener('click', function() {
            loadParameterConfig();
        });
        
        // 表单提交
        form.on('submit(saveConfig)', function() {
            // 添加加载状态
            var saveButton = document.getElementById('saveButton');
            var originalText = saveButton.innerHTML;
            
            saveButton.disabled = true;
            saveButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 保存中...';
            
            // 表单验证
            if (!document.getElementById('param1').value.trim()) {
                showErrorMessage('参数1不能为空');
                saveButton.disabled = false;
                saveButton.innerHTML = originalText;
                return false;
            }
            
            const formData = {
                param1: document.getElementById('param1').value.trim(),
                param2: document.getElementById('param2').value.trim(),
                param3: document.getElementById('param3').value.trim(),
                // 参数4为只读，不提交到服务器
                param5: document.getElementById('param5').value.trim()
            };
            
            fetch('/save_parameter_config', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(data => {
                // 恢复按钮状态
                saveButton.disabled = false;
                saveButton.innerHTML = originalText;
                
                if (data.success) {
                    showSuccessMessage('参数配置保存成功');
                    // 重新加载参数配置
                    loadParameterConfig();
                } else {
                    showErrorMessage('保存参数配置失败：' + (data.error || ''));
                }
            })
            .catch(error => {
                // 恢复按钮状态
                saveButton.disabled = false;
                saveButton.innerHTML = originalText;
                
                let errorMessage = '保存参数配置失败，请稍后重试';
                if (error.responseJSON && error.responseJSON.error) {
                    errorMessage = error.responseJSON.error;
                }
                showErrorMessage(errorMessage);
                console.error('保存参数配置失败', error);
            });
            
            return false; // 阻止表单默认提交
        });
        
        // 加载参数配置
        function loadParameterConfig() {
            // 添加加载状态
            var reloadButton = document.getElementById('reloadButton');
            var originalText = reloadButton.innerHTML;
            
            reloadButton.disabled = true;
            reloadButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 加载中...';
            
            fetch('/get_parameter_config')
                .then(response => response.json())
                .then(data => {
                    // 恢复按钮状态
                    reloadButton.disabled = false;
                    reloadButton.innerHTML = originalText;
                    
                    if (data.success && data.parameters) {
                        const parameters = data.parameters;
                        document.getElementById('param1').value = parameters.param1 || '';
                        document.getElementById('param2').value = parameters.param2 || '';
                        document.getElementById('param3').value = parameters.param3 || '';
                        document.getElementById('param4').value = parameters.param4 || '';
                        document.getElementById('param5').value = parameters.param5 || '';
                        
                        // 显示更新时间
                        if (parameters.update_time) {
                            document.getElementById('updateTimeContent').textContent = '最后更新时间：' + parameters.update_time;
                            document.getElementById('updateTimeAlert').style.display = 'flex';
                        } else {
                            document.getElementById('updateTimeAlert').style.display = 'none';
                        }
                    } else {
                        showErrorMessage('获取参数配置失败：' + (data.error || ''));
                    }
                })
                .catch(error => {
                    // 恢复按钮状态
                    reloadButton.disabled = false;
                    reloadButton.innerHTML = originalText;
                    
                    showErrorMessage('获取参数配置失败，请稍后重试');
                    console.error('获取参数配置失败', error);
                });
        }
        
        // 显示错误消息
        function showErrorMessage(message) {
            layer.msg(message, {
                icon: 5,
                time: 3000
            });
        }
        
        // 显示成功消息
        function showSuccessMessage(message) {
            layer.msg(message, {
                icon: 1,
                time: 3000
            });
        }
    });
    </script>

    {% include 'footer.html' %}
</body>
</html>