{% extends 'base.html' %}

{% block title %}编辑期货信息 - 期货数据管理系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-3">
        <div class="col">
            <h2>编辑期货信息</h2>
        </div>
        <div class="col-auto">
            <a href="{{ url_for('future_info.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回列表
            </a>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <form id="editForm" class="needs-validation" novalidate>
                <div class="row">
                    <!-- 基本信息 -->
                    <div class="col-md-6">
                        <h5 class="mb-3">基本信息</h5>
                        
                        <div class="mb-3">
                            <label for="contract_letter" class="form-label">合约字母 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="contract_letter" name="contract_letter" required>
                            <div class="invalid-feedback">请输入合约字母</div>
                        </div>

                        <div class="mb-3">
                            <label for="name" class="form-label">期货名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" required>
                            <div class="invalid-feedback">请输入期货名称</div>
                        </div>

                        <div class="mb-3">
                            <label for="market" class="form-label">市场 <span class="text-danger">*</span></label>
                            <select class="form-select" id="market" name="market" required>
                                <option value="0">国内</option>
                                <option value="1">国外</option>
                            </select>
                            <div class="invalid-feedback">请选择市场</div>
                        </div>

                        <div class="mb-3">
                            <label for="exchange" class="form-label">交易所</label>
                            <input type="text" class="form-control" id="exchange" name="exchange">
                        </div>

                        <div class="mb-3">
                            <label for="contract_multiplier" class="form-label">合约乘数</label>
                            <input type="number" class="form-control" id="contract_multiplier" name="contract_multiplier" step="1">
                        </div>

                        <div class="mb-3">
                            <label for="th_main_contract" class="form-label">同花主力合约</label>
                            <input type="text" class="form-control" id="th_main_contract" name="th_main_contract">
                        </div>

                        <div class="mb-3">
                            <label for="current_main_contract" class="form-label">当前主力合约</label>
                            <input type="text" class="form-control" id="current_main_contract" name="current_main_contract">
                        </div>

                        <div class="mb-3">
                            <label for="th_order" class="form-label">同花顺顺序</label>
                            <input type="number" class="form-control" id="th_order" name="th_order" step="1">
                        </div>
                    </div>

                    <!-- 交易参数和趋势信息 -->
                    <div class="col-md-6">
                        <h5 class="mb-3">交易参数</h5>

                        <div class="mb-3">
                            <label for="long_margin_rate" class="form-label">做多保证金率</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="long_margin_rate" name="long_margin_rate" step="0.01" min="0" max="1">
                                <span class="input-group-text">%</span>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="short_margin_rate" class="form-label">做空保证金率</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="short_margin_rate" name="short_margin_rate" step="0.01" min="0" max="1">
                                <span class="input-group-text">%</span>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="open_fee" class="form-label">开仓费用（按手）</label>
                            <input type="number" class="form-control" id="open_fee" name="open_fee" step="0.01">
                        </div>

                        <div class="mb-3">
                            <label for="close_fee" class="form-label">平仓费用（按手）</label>
                            <input type="number" class="form-control" id="close_fee" name="close_fee" step="0.01">
                        </div>

                        <div class="mb-3">
                            <label for="close_today_rate" class="form-label">平今费率（按金额）</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="close_today_rate" name="close_today_rate" step="0.000001" min="0" max="1">
                                <span class="input-group-text">%</span>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="close_today_fee" class="form-label">平今费用（按手）</label>
                            <input type="number" class="form-control" id="close_today_fee" name="close_today_fee" step="0.01">
                        </div>

                        <div class="mb-3">
                            <label for="long_margin_amount" class="form-label">做多1手保证金</label>
                            <input type="number" class="form-control" id="long_margin_amount" name="long_margin_amount" step="0.01">
                        </div>

                        <div class="mb-3">
                            <label for="short_margin_amount" class="form-label">做空1手保证金</label>
                            <input type="number" class="form-control" id="short_margin_amount" name="short_margin_amount" step="0.01">
                        </div>

                        <div class="mb-3">
                            <label for="core_ratio" class="form-label">核心比率</label>
                            <input type="number" class="form-control" id="core_ratio" name="core_ratio" step="0.01" min="0" max="1">
                        </div>

                        <h5 class="mb-3 mt-4">趋势信息</h5>
                        <div class="mb-3">
                            <label for="long_term_trend" class="form-label">长期趋势特征</label>
                            
                            <!-- 隐藏的输入框，用于存储最终的数据 -->
                            <input type="hidden" id="long_term_trend" name="long_term_trend">
                            
                            <!-- 趋势特征搜索和选择区域 -->
                            <div class="trend-selection-area">
                                <!-- 已选择的趋势特征标签 -->
                                <div id="selected_trends" class="selected-trends mb-2">
                                    <!-- 已选择的趋势特征标签将在这里显示 -->
                                </div>
                                
                                <!-- 趋势特征搜索输入框 -->
                                <div class="position-relative">
                                    <input type="text" class="form-control" id="trend_search_input" 
                                           placeholder="搜索并添加趋势特征..." autocomplete="off">
                                    <div id="trend_search_results" class="dropdown-menu w-100" style="display: none; max-height: 200px; overflow-y: auto;">
                                        <!-- 搜索结果将在这里显示 -->
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-text mt-2">搜索并选择趋势特征，支持添加多个</div>
                            <div id="trend_validation_feedback" class="invalid-feedback"></div>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col">
                        <button type="submit" class="btn btn-primary">保存更改</button>
                        <button type="button" class="btn btn-secondary" onclick="window.history.back()">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 从Flask传递的ID，转换为数字
    const futureId = parseInt("{{ future_id }}");
    const form = document.getElementById('editForm');
    const longTermTrendInput = document.getElementById('long_term_trend');
    const trendSearchInput = document.getElementById('trend_search_input');
    const trendSearchResults = document.getElementById('trend_search_results');
    const selectedTrendsContainer = document.getElementById('selected_trends');
    
    let allTrends = []; // 存储所有趋势特征数据
    let selectedTrends = []; // 存储已选择的趋势特征
    let searchTimeout;

    // 加载趋势信息数据
    fetch('/api/future_info/trends')
        .then(response => response.json())
        .then(data => {
            if (data.code === 0) {
                allTrends = data.data;
                console.log('加载趋势特征列表:', allTrends.length, '个');
                
                // 加载期货信息
                loadFutureInfo();
            }
        })
        .catch(error => {
            console.error('加载趋势信息失败:', error);
            // 即使趋势信息加载失败，也加载期货信息
            loadFutureInfo();
        });

    // 加载期货信息
    function loadFutureInfo() {
        fetch(`/api/future_info/get/${futureId}`)
            .then(response => response.json())
            .then(data => {
                if (data.code === 0 && data.data) {
                    const future = data.data;
                    console.log('从服务器获取的数据:', future);
                    
                    // 填充表单数据
                    document.getElementById('contract_letter').value = future.contract_letter || '';
                    document.getElementById('name').value = future.name || '';
                    document.getElementById('market').value = future.market;
                    document.getElementById('exchange').value = future.exchange || '';
                    document.getElementById('contract_multiplier').value = future.contract_multiplier || '';
                    document.getElementById('long_margin_rate').value = future.long_margin_rate || '';
                    document.getElementById('short_margin_rate').value = future.short_margin_rate || '';
                    document.getElementById('open_fee').value = future.open_fee || '';
                    document.getElementById('close_fee').value = future.close_fee || '';
                    
                    // 特别处理平今费率
                    const closeTodayRateInput = document.getElementById('close_today_rate');
                    closeTodayRateInput.value = future.close_today_rate || '';
                    console.log('平今费率值:', {
                        original: future.close_today_rate,
                        formatted: closeTodayRateInput.value
                    });
                    
                    document.getElementById('close_today_fee').value = future.close_today_fee || '';
                    document.getElementById('long_margin_amount').value = future.long_margin_amount || '';
                    document.getElementById('short_margin_amount').value = future.short_margin_amount || '';
                    document.getElementById('th_main_contract').value = future.th_main_contract || '';
                    document.getElementById('current_main_contract').value = future.current_main_contract || '';
                    document.getElementById('th_order').value = future.th_order || '';
                    document.getElementById('core_ratio').value = future.core_ratio || '';
                    
                    // 设置长期趋势特征
                    const trendValue = future.long_term_trend || '';
                    longTermTrendInput.value = trendValue;
                    
                    // 解析已有的趋势特征并设置到选择组件中
                    if (trendValue.trim()) {
                        const trendNames = trendValue.split('+').map(name => name.trim()).filter(name => name);
                        selectedTrends = [];
                        
                        trendNames.forEach(trendName => {
                            const trend = allTrends.find(t => t.name === trendName);
                            if (trend) {
                                selectedTrends.push(trend);
                            }
                        });
                        
                        updateSelectedTrendsDisplay();
                    }
                } else {
                    alert('加载期货信息失败：未找到对应的期货信息');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('加载期货信息失败');
            });
    }

    // 监听平今费率输入变化
    document.getElementById('close_today_rate').addEventListener('input', function(e) {
        console.log('平今费率输入值变化:', {
            value: e.target.value,
            valueAsNumber: e.target.valueAsNumber
        });
    });

    // 趋势特征搜索和选择功能
    
    // 搜索趋势特征
    function searchTrends(query) {
        if (!query.trim()) {
            hideTrendSearchResults();
            return;
        }

        // 过滤已选择的趋势特征
        const selectedTrendNames = selectedTrends.map(trend => trend.name);
        const filteredTrends = allTrends.filter(trend => 
            trend.name.toLowerCase().includes(query.toLowerCase()) &&
            !selectedTrendNames.includes(trend.name)
        );

        showTrendSearchResults(filteredTrends);
    }

    // 显示搜索结果
    function showTrendSearchResults(results) {
        trendSearchResults.innerHTML = '';
        
        if (results.length === 0) {
            trendSearchResults.innerHTML = '<div class="dropdown-item-text text-muted">未找到匹配的趋势特征</div>';
        } else {
            results.slice(0, 10).forEach(trend => { // 限制显示前10个结果
                const item = document.createElement('div');
                item.className = 'dropdown-item cursor-pointer';
                item.style.cursor = 'pointer';
                item.textContent = trend.name;
                item.addEventListener('click', () => selectTrend(trend));
                trendSearchResults.appendChild(item);
            });
        }
        
        trendSearchResults.style.display = 'block';
    }

    // 隐藏搜索结果
    function hideTrendSearchResults() {
        trendSearchResults.style.display = 'none';
    }

    // 选择趋势特征
    function selectTrend(trend) {
        // 检查是否已经选择
        if (selectedTrends.find(t => t.name === trend.name)) {
            return;
        }

        selectedTrends.push(trend);
        updateSelectedTrendsDisplay();
        updateHiddenInput();
        
        // 清空搜索框
        trendSearchInput.value = '';
        hideTrendSearchResults();
        
        console.log('选择了趋势特征:', trend.name);
    }

    // 删除趋势特征
    function removeTrend(index) {
        selectedTrends.splice(index, 1);
        updateSelectedTrendsDisplay();
        updateHiddenInput();
        
        console.log('删除趋势特征，剩余:', selectedTrends.length, '个');
    }

    // 更新已选择趋势特征的显示
    function updateSelectedTrendsDisplay() {
        selectedTrendsContainer.innerHTML = '';
        
        selectedTrends.forEach((trend, index) => {
            const badge = document.createElement('span');
            badge.className = 'badge bg-primary me-2 mb-2 d-inline-flex align-items-center';
            badge.innerHTML = `
                ${trend.name}
                <button type="button" class="btn-close btn-close-white ms-2" style="font-size: 0.7em;" aria-label="Remove"></button>
            `;
            
            // 添加删除事件
            const closeBtn = badge.querySelector('.btn-close');
            closeBtn.addEventListener('click', () => removeTrend(index));
            
            selectedTrendsContainer.appendChild(badge);
        });
    }

    // 更新隐藏输入框的值
    function updateHiddenInput() {
        const trendNames = selectedTrends.map(trend => trend.name);
        longTermTrendInput.value = trendNames.join('+');
        
        console.log('更新隐藏输入框值:', longTermTrendInput.value);
    }

    // 监听趋势特征搜索输入
    trendSearchInput.addEventListener('input', function() {
        const query = this.value.trim();
        
        // 使用防抖进行搜索
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            searchTrends(query);
        }, 300);
    });

    // 监听焦点离开事件，隐藏搜索结果
    trendSearchInput.addEventListener('blur', function() {
        // 延迟隐藏，允许用户点击搜索结果
        setTimeout(() => {
            hideTrendSearchResults();
        }, 200);
    });

    // 监听点击外部区域隐藏搜索结果
    document.addEventListener('click', function(event) {
        if (!event.target.closest('.trend-selection-area')) {
            hideTrendSearchResults();
        }
    });

    // 表单提交处理
    form.addEventListener('submit', function(event) {
        event.preventDefault();
        
        if (!form.checkValidity()) {
            event.stopPropagation();
            form.classList.add('was-validated');
            return;
        }

        // 直接提交，因为趋势特征已通过多选组件验证

        // 获取平今费率的值
        const closeTodayRateInput = document.getElementById('close_today_rate');
        const closeTodayRateValue = closeTodayRateInput.value;
        console.log('提交前平今费率值:', {
            inputValue: closeTodayRateValue,
            inputValueAsNumber: closeTodayRateInput.valueAsNumber,
            inputStep: closeTodayRateInput.step
        });

        // 收集表单数据
        const formData = {
            contract_letter: document.getElementById('contract_letter').value,
            name: document.getElementById('name').value,
            market: parseInt(document.getElementById('market').value),
            exchange: document.getElementById('exchange').value,
            contract_multiplier: document.getElementById('contract_multiplier').value ? Number(document.getElementById('contract_multiplier').value) : null,
            long_margin_rate: document.getElementById('long_margin_rate').value !== '' ? Number(document.getElementById('long_margin_rate').value) : null,
            short_margin_rate: document.getElementById('short_margin_rate').value !== '' ? Number(document.getElementById('short_margin_rate').value) : null,
            open_fee: document.getElementById('open_fee').value !== '' ? Number(document.getElementById('open_fee').value) : null,
            close_fee: document.getElementById('close_fee').value !== '' ? Number(document.getElementById('close_fee').value) : null,
            close_today_rate: closeTodayRateValue !== '' ? Number(closeTodayRateValue) : null,
            close_today_fee: document.getElementById('close_today_fee').value !== '' ? Number(document.getElementById('close_today_fee').value) : null,
            long_margin_amount: document.getElementById('long_margin_amount').value !== '' ? Number(document.getElementById('long_margin_amount').value) : null,
            short_margin_amount: document.getElementById('short_margin_amount').value !== '' ? Number(document.getElementById('short_margin_amount').value) : null,
            th_main_contract: document.getElementById('th_main_contract').value,
            current_main_contract: document.getElementById('current_main_contract').value,
            th_order: document.getElementById('th_order').value ? parseInt(document.getElementById('th_order').value) : null,
            long_term_trend: document.getElementById('long_term_trend').value,
            core_ratio: document.getElementById('core_ratio').value ? Number(document.getElementById('core_ratio').value) : null
        };

        console.log('准备提交的数据:', formData);

        // 发送更新请求
        fetch(`/api/future_info/update/${futureId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
        .then(response => response.json())
        .then(data => {
            console.log('服务器响应:', data);
            if (data.code === 0) {
                alert('更新成功');
                window.location.href = "{{ url_for('future_info.index') }}";
            } else {
                alert('更新失败：' + data.msg);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('更新失败');
        });
    });
});
</script>
{% endblock %}