{% extends "base.html" %}

{% block content %}
<section class="device-info">
    <h2>设备信息</h2>
    {% if success is defined %}
        <script>
            // 创建弹窗元素
            const alertBox = document.createElement('div');
            alertBox.style.position = 'fixed';
            alertBox.style.top = '50%';
            alertBox.style.left = '50%';
            alertBox.style.transform = 'translate(-50%, -50%)';
            alertBox.style.padding = '20px';
            alertBox.style.borderRadius = '5px';
            alertBox.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)';
            alertBox.style.zIndex = '10000';
            alertBox.style.color = 'white';
            alertBox.style.fontWeight = 'bold';
            
            // 根据success值设置背景颜色
            alertBox.style.backgroundColor = "{{ 'green' if success else 'red' }}";
            
            // 设置弹窗内容
            alertBox.textContent = '{{ message }}';
            
            // 添加关闭按钮
            const closeBtn = document.createElement('button');
            closeBtn.textContent = '关闭';
            closeBtn.style.marginTop = '10px';
            closeBtn.style.padding = '5px 10px';
            closeBtn.style.border = 'none';
            closeBtn.style.borderRadius = '3px';
            closeBtn.style.backgroundColor = 'white';
            closeBtn.style.cursor = 'pointer';
            
            closeBtn.onclick = function() {
                document.body.removeChild(alertBox);
            };
            
            alertBox.appendChild(closeBtn);
            document.body.appendChild(alertBox);
        </script>
    {% endif %}
    <div class="info-grid">
        <div class="info-item">
            <span class="label">设备类型</span>
            <span class="value">{{ device.dev_type }}</span>
        </div>
        <div class="info-item">
            <span class="label">设备SN</span>
            <span class="value">{{ device.dev_sn }}</span>
        </div>
        <div class="info-item">
            <span class="label">固件版本</span>
            <span class="value">{{ device.firmware_ver }}</span>
        </div>
        <div class="info-item">
            <span class="label">在线状态</span>
            <span class="value" style="color: {% if device.online == '在线' %}green{% else %}red{% endif %};">{{ device.online }}</span>
        </div>
    </div>
</section>

<section class="device-configuration">
    <h2>参数配置</h2>

    <!-- WiFi配置表单 -->
    <div class="config-section">
        <h3>WiFi配置(例: wbjw/wbjw2025, e103-abc/12345678 )</h3>
        <form class="config-form" method="POST" action="{{ url_for('devices') }}">
            <input type="hidden" name="device_id" value="{{ device.id }}">
            <input type="hidden" name="dev_sn" value="{{ device.dev_sn }}">
            <input type="hidden" name="save_config" value="1">
            <input type="hidden" name="config_type" value="wifi">
            <div class="form-group">
                <label for="ssid">SSID</label>
                <input type="text" id="ssid" name="ssid" value="{{ device.wifi_ssid if 'wifi_ssid' in device else '' }}">
            </div>
            <div class="form-group">
                <label for="wifi_password">密码</label>
                <input type="password" id="wifi_password" name="wifi_password">
            </div>
            <button type="submit" class="save-config">保存WiFi配置</button>
        </form>
    </div>

    <!-- 云平台配置表单 -->
    <div class="config-section">
        <h3>云平台配置</h3>
        <form class="config-form" method="POST" action="{{ url_for('devices') }}">
            <input type="hidden" name="device_id" value="{{ device.id }}">
            <input type="hidden" name="dev_sn" value="{{ device.dev_sn }}">
            <input type="hidden" name="save_config" value="1">
            <input type="hidden" name="config_type" value="platform">
            <div class="form-group">
                <label>云平台选择</label>
                <div class="radio-group">
                    {% for platform in platform_c %}
                    <label>
                        <input type="radio" name="cloud-platform"
                               value="{{ platform.name }}"
                               {{ 'checked' if 'cloud_platform' in device and device.cloud_platform == platform.name else '' }}>
                        {{ platform.name }}
                    </label>
                    {% endfor %}
                </div>
            </div>
            <button type="submit" class="save-config">保存云平台配置</button>
        </form>
    </div>

    <!-- 网络类型配置表单 -->
    <div class="config-section">
        <h3>网络类型配置</h3>
        <form class="config-form" method="POST" action="{{ url_for('devices') }}">
            <input type="hidden" name="device_id" value="{{ device.id }}">
            <input type="hidden" name="dev_sn" value="{{ device.dev_sn }}">
            <input type="hidden" name="save_config" value="1">
            <input type="hidden" name="config_type" value="network">
            <div class="radio-group">
                <label>
                    <input type="radio" name="network-type" value="WiFi"
                           {{ 'checked' if 'network_type' in device and device.network_type == 'WiFi' else '' }}> WiFi
                </label>
                <label>
                    <input type="radio" name="network-type" value="有线网"
                           {{ 'checked' if 'network_type' in device and device.network_type == '有线网' else '' }}> 有线网
                </label>
            </div>
            <button type="submit" class="save-config">保存网络类型</button>
        </form>
    </div>
    <!-- 保存所有配置按钮 -->
    <div class="save-all-config-container">
        <button id="save-all-config" class="save-config">保存所有配置</button>
    </div>
</section>

<div class="back-btn-container">
    <a href="{{ url_for('devices') }}" class="back-btn">返回设备列表</a>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 保存配置按钮效果
    document.querySelectorAll('.save-config').forEach(btn => {
        btn.addEventListener('click', function(e) {
            // 阻止默认提交行为，先显示提示再提交
            e.preventDefault();

            const form = this.closest('form');
            // alert('配置已保存');
            form.submit();
        });
    });

    // 保存所有配置按钮效果
    document.getElementById('save-all-config').addEventListener('click', function(e) {
        e.preventDefault();

        // 创建一个新表单，包含所有配置数据
        const allConfigForm = document.createElement('form');
        allConfigForm.method = 'POST';
        allConfigForm.action = "{{ url_for('devices') }}";

        // 添加设备ID
        const deviceIdInput = document.createElement('input');
        deviceIdInput.type = 'hidden';
        deviceIdInput.name = 'device_id';
        deviceIdInput.value = '{{ device.id }}';
        allConfigForm.appendChild(deviceIdInput);
        
        // 添加设备SN
        const deviceSnInput = document.createElement('input');
        deviceSnInput.type = 'hidden';
        deviceSnInput.name = 'dev_sn';
        deviceSnInput.value = '{{ device.dev_sn }}';
        allConfigForm.appendChild(deviceSnInput);

        // 添加保存配置标识
        const saveConfigInput = document.createElement('input');
        saveConfigInput.type = 'hidden';
        saveConfigInput.name = 'save_config';
        saveConfigInput.value = '1';
        allConfigForm.appendChild(saveConfigInput);

        // 添加配置类型为all
        const configTypeInput = document.createElement('input');
        configTypeInput.type = 'hidden';
        configTypeInput.name = 'config_type';
        configTypeInput.value = 'all';
        allConfigForm.appendChild(configTypeInput);

        // 收集WiFi配置
        const ssidInput = document.createElement('input');
        ssidInput.type = 'hidden';
        ssidInput.name = 'ssid';
        ssidInput.value = document.getElementById('ssid').value;
        allConfigForm.appendChild(ssidInput);

        const wifiPasswordInput = document.createElement('input');
        wifiPasswordInput.type = 'hidden';
        wifiPasswordInput.name = 'wifi_password';
        wifiPasswordInput.value = document.getElementById('wifi_password').value;
        allConfigForm.appendChild(wifiPasswordInput);

        // 收集云平台配置
        const cloudPlatformInput = document.createElement('input');
        cloudPlatformInput.type = 'hidden';
        cloudPlatformInput.name = 'cloud-platform';
        const selectedPlatform = document.querySelector('input[name="cloud-platform"]:checked');
        cloudPlatformInput.value = selectedPlatform ? selectedPlatform.value : '';
        allConfigForm.appendChild(cloudPlatformInput);

        // 收集网络类型配置
        const networkTypeInput = document.createElement('input');
        networkTypeInput.type = 'hidden';
        networkTypeInput.name = 'network-type';
        const selectedNetworkType = document.querySelector('input[name="network-type"]:checked');
        networkTypeInput.value = selectedNetworkType ? selectedNetworkType.value : '';
        allConfigForm.appendChild(networkTypeInput);

        // 提交表单
        document.body.appendChild(allConfigForm);
        allConfigForm.submit();
    });
</script>
{% endblock %}