{% extends 'base.html' %}

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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>添加期货信息</h2>
    <a href="{{ url_for('future_info.index') }}" class="btn btn-secondary">返回列表</a>
</div>

<div class="card">
    <div class="card-body">
        <form id="future-info-form">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="contract_letter">合约代码</label>
                        <input type="text" class="form-control" id="contract_letter" name="contract_letter" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="name">期货名称</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="market">市场</label>
                        <input type="text" class="form-control" id="market" name="market">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="exchange">交易所</label>
                        <input type="text" class="form-control" id="exchange" name="exchange">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="contract_multiplier">合约乘数</label>
                        <input type="number" class="form-control" id="contract_multiplier" name="contract_multiplier">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="long_margin_rate">做多保证金率</label>
                        <input type="number" step="0.01" class="form-control" id="long_margin_rate" name="long_margin_rate">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="short_margin_rate">做空保证金率</label>
                        <input type="number" step="0.01" class="form-control" id="short_margin_rate" name="short_margin_rate">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="open_fee">开仓费用（按手）</label>
                        <input type="number" step="0.01" class="form-control" id="open_fee" name="open_fee">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="close_fee">平仓费用（按手）</label>
                        <input type="number" step="0.01" class="form-control" id="close_fee" name="close_fee">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="close_today_rate">平今费用（按金额）</label>
                        <input type="number" step="0.01" class="form-control" id="close_today_rate" name="close_today_rate">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="close_today_fee">平今费用（按手）</label>
                        <input type="number" step="0.01" class="form-control" id="close_today_fee" name="close_today_fee">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="th_main_contract">主力合约</label>
                        <input type="text" class="form-control" id="th_main_contract" name="th_main_contract">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="current_main_contract">当前主力合约</label>
                        <input type="text" class="form-control" id="current_main_contract" name="current_main_contract">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="th_order">排序</label>
                        <input type="number" class="form-control" id="th_order" name="th_order">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="long_margin_amount">做多1手保证金</label>
                        <input type="number" step="0.01" class="form-control" id="long_margin_amount" name="long_margin_amount">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="short_margin_amount">做空1手保证金</label>
                        <input type="number" step="0.01" class="form-control" id="short_margin_amount" name="short_margin_amount">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="core_ratio">核心比率</label>
                        <input type="number" step="0.01" min="0" max="1" class="form-control" id="core_ratio" name="core_ratio">
                    </div>
                </div>
                <div class="col-md-6">
                    <!-- 空列，保持布局平衡 -->
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <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 id="trend_validation_feedback" class="invalid-feedback" style="display:none;"></div>
                        <div class="form-text">搜索并选择趋势特征，支持添加多个</div>
                    </div>
                </div>
            </div>
            <div class="form-group mt-4">
                <button type="submit" class="btn btn-primary">保存</button>
                <button type="reset" class="btn btn-secondary">重置</button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('future-info-form');
    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;
    
    // 加载所有趋势特征列表
    function loadTrendOptions() {
        fetch('/api/future_info/trends')
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    allTrends = data.data;
                    console.log('加载趋势特征列表:', allTrends.length, '个');
                }
            })
            .catch(error => {
                console.error('获取趋势特征失败:', error);
            });
    }

    // 初始化页面时加载趋势特征列表
    loadTrendOptions();
    
    // 搜索趋势特征
    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 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: document.getElementById('close_today_rate').value !== '' ? Number(document.getElementById('close_today_rate').value) : 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/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
        .then(response => response.json())
        .then(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('添加失败');
        });
    });

    // 重置表单时重置趋势特征选择
    form.addEventListener('reset', function() {
        selectedTrends = [];
        updateSelectedTrendsDisplay();
        updateHiddenInput();
        trendSearchInput.value = '';
        hideTrendSearchResults();
    });
});
</script>
{% endblock %}