{% extends 'base.html' %}

{% block title %}编辑监控记录 - 期货数据管理系统{% endblock %}

{% block styles %}
<!-- 引入 Select2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css">
<style>
    .select2-container--bootstrap4 .select2-selection--multiple {
        min-height: calc(1.5em + .75rem + 2px);
    }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>编辑监控记录</h2>
    <div>
        <a href="{{ url_for('monitor.detail', id=monitor.id) }}" class="btn btn-info">查看详情</a>
        <a href="{{ url_for('monitor.index') }}" class="btn btn-secondary">返回列表</a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form id="monitor-edit-form" class="needs-validation" novalidate>
            <input type="hidden" id="monitor_id" value="{{ monitor.id }}">
            <div id="monitor-data" 
                 data-position-mode-id="{{ monitor.position_mode_id or '' }}"
                 data-candle-pattern-ids="{{ monitor.candle_pattern_ids or '' }}"
                 data-candle-pattern="{{ monitor.candle_pattern or '' }}"
                 data-contract-letter="{{ monitor.contract_letter or '' }}" 
                 style="display: none;"></div>
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="future_info_id" class="form-label">期货品种 <span class="text-danger">*</span></label>
                    <div class="position-relative">
                        <input type="text" class="form-control" id="future_search_input" name="future_search_input" 
                               placeholder="输入期货品种名称或代码..." autocomplete="off" required>
                        <input type="hidden" id="future_info_id" name="future_info_id" required>
                        <div id="future_search_results" class="dropdown-menu w-100" style="display: none; max-height: 200px; overflow-y: auto;">
                            <!-- 搜索结果将在这里显示 -->
                        </div>
                    </div>
                    <div class="invalid-feedback">请选择期货品种</div>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="contract" class="form-label">合约代码 <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="contract" name="contract" value="{{ monitor.contract or '' }}" required>
                    <div class="invalid-feedback">请输入合约代码</div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="name" class="form-label">名称</label>
                    <input type="text" class="form-control" id="name" name="name" value="{{ monitor.name or '' }}" readonly required>
                    <div class="invalid-feedback">名称将根据期货品种自动填充</div>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="market" class="form-label">市场类型</label>
                    <select class="form-select" id="market" name="market" readonly disabled>
                        <option value="" selected disabled>请选择市场类型</option>
                        <option value="0" {% if monitor.market == 0 %}selected{% endif %}>国内</option>
                        <option value="1" {% if monitor.market == 1 %}selected{% endif %}>国外</option>
                    </select>
                    <div class="invalid-feedback">市场类型将根据期货品种自动填充</div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="opportunity" class="form-label">关注原因</label>
                    <select class="form-control" id="opportunity" name="opportunity">
                        <option value="">请选择关注原因</option>
                        <option value="支撑位" {% if monitor.opportunity == '支撑位' %}selected{% endif %}>支撑位</option>
                        <option value="压力位" {% if monitor.opportunity == '压力位' %}selected{% endif %}>压力位</option>
                        <option value="手画支撑位" {% if monitor.opportunity == '手画支撑位' %}selected{% endif %}>手画支撑位</option>
                        <option value="手画压力位" {% if monitor.opportunity == '手画压力位' %}selected{% endif %}>手画压力位</option>
                        <option value="5K支撑位" {% if monitor.opportunity == '5K支撑位' %}selected{% endif %}>5K支撑位</option>
                        <option value="5K压力位" {% if monitor.opportunity == '5K压力位' %}selected{% endif %}>5K压力位</option>
                        <option value="10K支撑位" {% if monitor.opportunity == '10K支撑位' %}selected{% endif %}>10K支撑位</option>
                        <option value="10K压力位" {% if monitor.opportunity == '10K压力位' %}selected{% endif %}>10K压力位</option>
                        <option value="20K支撑位" {% if monitor.opportunity == '20K支撑位' %}selected{% endif %}>20K支撑位</option>
                        <option value="20K压力位" {% if monitor.opportunity == '20K压力位' %}selected{% endif %}>20K压力位</option>
                        <option value="30K支撑位" {% if monitor.opportunity == '30K支撑位' %}selected{% endif %}>30K支撑位</option>
                        <option value="30K压力位" {% if monitor.opportunity == '30K压力位' %}selected{% endif %}>30K压力位</option>
                    </select>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="status" class="form-label">关注状态</label>
                    <select class="form-select" id="status" name="status">
                        <option value="0" {% if monitor.status == 0 %}selected{% endif %}>观察中</option>
                        <option value="1" {% if monitor.status == 1 %}selected{% endif %}>重点关注</option>
                        <option value="2" {% if monitor.status == 2 %}selected{% endif %}>已触发</option>
                        <option value="3" {% if monitor.status == 3 %}selected{% endif %}>已失效</option>
                    </select>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="key_price" class="form-label">关键价格</label>
                    <input type="number" step="any" class="form-control" id="key_price" name="key_price" 
                           value="{% if monitor.key_price %}{{ '%.2f'|format(monitor.key_price) }}{% endif %}">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="latest_price" class="form-label">最新价格</label>
                    <input type="number" step="any" class="form-control" id="latest_price" name="latest_price"
                           value="{% if monitor.latest_price %}{{ '%.2f'|format(monitor.latest_price) }}{% endif %}">
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="open_price" class="form-label">开仓价格</label>
                    <input type="number" step="any" class="form-control" id="open_price" name="open_price"
                           value="{% if monitor.open_price %}{{ '%.2f'|format(monitor.open_price) }}{% endif %}">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="position_mode_id" class="form-label">开仓模式</label>
                    <select class="form-select" id="position_mode_id" name="position_mode_id">
                        <option value="">请选择开仓模式</option>
                    </select>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-12 mb-3">
                    <label for="candle_pattern" class="form-label">K线形态</label>
                    <select class="form-control select2" id="candle_pattern" name="candle_pattern" multiple="multiple" data-placeholder="选择K线形态">
                        <!-- 选项将通过API加载 -->
                    </select>
                    <input type="hidden" id="candle_pattern_ids" name="candle_pattern_ids" value="{{ monitor.candle_pattern_ids or '' }}">
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="open_long_price" class="form-label">做多开仓价</label>
                    <input type="number" step="any" class="form-control" id="open_long_price" name="open_long_price" 
                           value="{% if monitor.open_long_price %}{{ '%.2f'|format(monitor.open_long_price) }}{% endif %}" readonly>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="open_short_price" class="form-label">做空开仓价</label>
                    <input type="number" step="any" class="form-control" id="open_short_price" name="open_short_price" 
                           value="{% if monitor.open_short_price %}{{ '%.2f'|format(monitor.open_short_price) }}{% endif %}" readonly>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="open_long_trigger_price" class="form-label">做多触发价</label>
                    <input type="number" step="any" class="form-control" id="open_long_trigger_price" name="open_long_trigger_price" 
                           value="{% if monitor.open_long_trigger_price %}{{ '%.2f'|format(monitor.open_long_trigger_price) }}{% endif %}" readonly>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="open_short_trigger_price" class="form-label">做空触发价</label>
                    <input type="number" step="any" class="form-control" id="open_short_trigger_price" name="open_short_trigger_price" 
                           value="{% if monitor.open_short_trigger_price %}{{ '%.2f'|format(monitor.open_short_trigger_price) }}{% endif %}" readonly>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="open_long_margin_per_unit" class="form-label">开多一手保证金</label>
                    <input type="number" step="any" class="form-control" id="open_long_margin_per_unit" name="open_long_margin_per_unit" 
                           value="{% if monitor.open_long_margin_per_unit %}{{ '%.2f'|format(monitor.open_long_margin_per_unit) }}{% endif %}" readonly>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="open_short_margin_per_unit" class="form-label">开空一手保证金</label>
                    <input type="number" step="any" class="form-control" id="open_short_margin_per_unit" name="open_short_margin_per_unit" 
                           value="{% if monitor.open_short_margin_per_unit %}{{ '%.2f'|format(monitor.open_short_margin_per_unit) }}{% endif %}" readonly>
                </div>
            </div>
            
            <div class="form-group mt-4">
                <button type="submit" class="btn btn-primary">保存修改</button>
                <button type="reset" class="btn btn-secondary">重置</button>
                <a href="{{ url_for('monitor.detail', id=monitor.id) }}" class="btn btn-info">取消</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<!-- 引入 jQuery -->
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入 Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('monitor-edit-form');
    const futureSearchInput = document.getElementById('future_search_input');
    const futureIdInput = document.getElementById('future_info_id');
    const searchResults = document.getElementById('future_search_results');
    const contractInput = document.getElementById('contract');
    const nameInput = document.getElementById('name');
    const marketSelect = document.getElementById('market');
    const monitorId = document.getElementById('monitor_id').value;
    
    // 从DOM数据属性获取监控数据
    const monitorDataElement = document.getElementById('monitor-data');
    const monitorData = {
        positionModeId: monitorDataElement.getAttribute('data-position-mode-id') || null,
        candlePatternIds: monitorDataElement.getAttribute('data-candle-pattern-ids') || '',
        candlePattern: monitorDataElement.getAttribute('data-candle-pattern') || '',
        contractLetter: monitorDataElement.getAttribute('data-contract-letter') || ''
    };

    let searchTimeout;
    let currentFutureData = null;
    
    // 存储开仓模式数据
    let positionModesData = [];
    
    // 存储K线形态选择顺序
    let candlePatternOrder = [];
    let candlePatternIdOrder = [];

    // 加载开仓模式选项
    function loadPositionModes() {
        fetch('/monitor/api/position_modes')
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    positionModesData = data.data; // 存储完整数据
                    const select = document.getElementById('position_mode_id');
                    select.innerHTML = '<option value="">请选择开仓模式</option>';
                    data.data.forEach(mode => {
                        const option = document.createElement('option');
                        option.value = mode.id;
                        option.textContent = mode.name;
                        if (monitorData.positionModeId && mode.id == monitorData.positionModeId) {
                            option.selected = true;
                        }
                        select.appendChild(option);
                    });
                } else {
                    console.error('加载开仓模式失败:', data.msg);
                }
            })
            .catch(error => {
                console.error('加载开仓模式出错:', error);
            });
    }

    // 加载K线形态选项
    function loadCandlePatterns() {
        fetch('/monitor/api/candle_patterns')
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    const select = $('#candle_pattern');
                    select.empty(); // 清空现有选项
                    data.data.forEach(pattern => {
                        const option = new Option(pattern.name, pattern.id, false, false);
                        select.append(option);
                    });
                    
                    // 初始化Select2
                    select.select2({
                        theme: 'bootstrap4',
                        placeholder: '选择K线形态',
                        allowClear: true,
                        closeOnSelect: false // 选择后不关闭，方便多选
                    });
                    
                    // 设置已选择的值和顺序
                    const existingIds = monitorData.candlePatternIds || $('#candle_pattern_ids').val();
                    if (existingIds) {
                        const idsArray = existingIds.split(',').map(id => id.trim()).filter(id => id);
                        
                        // 初始化K线形态顺序（基于数据库中保存的顺序）
                        if (monitorData.candlePattern) {
                            candlePatternOrder = monitorData.candlePattern.split('+').map(name => name.trim()).filter(name => name);
                            candlePatternIdOrder = idsArray; // 按相同顺序保存ID
                        }
                        
                        // 设置选中的值（这会触发select2:select事件，但我们需要避免重复添加）
                        select.val(idsArray).trigger('change');
                    }
                } else {
                    console.error('加载K线形态失败:', data.msg);
                }
            })
            .catch(error => {
                console.error('加载K线形态出错:', error);
            });
    }

    // K线形态选择事件 - 跟踪真实的用户选择顺序
    $('#candle_pattern').on('select2:select', function(e) {
        const selectedData = e.params.data;
        const selectedId = selectedData.id;
        const selectedText = selectedData.text;
        
        // 只有在用户主动选择时才添加到顺序数组（避免初始化时重复添加）
        if (!candlePatternIdOrder.includes(selectedId)) {
            candlePatternIdOrder.push(selectedId);
            candlePatternOrder.push(selectedText);
            
            // 更新隐藏的ID字段
            $('#candle_pattern_ids').val(candlePatternIdOrder.join(','));
            console.log('选择的K线形态ID（按用户点击顺序）:', candlePatternIdOrder);
            console.log('选择的K线形态名称（按用户点击顺序）:', candlePatternOrder);
        }
    });
    
    $('#candle_pattern').on('select2:unselect', function(e) {
        const unselectedData = e.params.data;
        const unselectedId = unselectedData.id;
        const unselectedText = unselectedData.text;
        
        // 从用户选择顺序数组中移除
        const idIndex = candlePatternIdOrder.indexOf(unselectedId);
        const textIndex = candlePatternOrder.indexOf(unselectedText);
        
        if (idIndex > -1) {
            candlePatternIdOrder.splice(idIndex, 1);
        }
        if (textIndex > -1) {
            candlePatternOrder.splice(textIndex, 1);
        }
        
        // 更新隐藏的ID字段
        $('#candle_pattern_ids').val(candlePatternIdOrder.join(','));
        console.log('取消选择后的K线形态ID（按用户点击顺序）:', candlePatternIdOrder);
        console.log('取消选择后的K线形态名称（按用户点击顺序）:', candlePatternOrder);
    });

    // 表单提交处理
    form.addEventListener('submit', function(event) {
        event.preventDefault();

        if (!form.checkValidity()) {
            event.stopPropagation();
            form.classList.add('was-validated');
            return;
        }

        // 收集表单数据
        const formData = {
            contract: contractInput.value.trim(),
            name: nameInput.value.trim(),
            market: marketSelect.value !== '' ? parseInt(marketSelect.value) : null,
            status: parseInt(document.getElementById('status').value),
            opportunity: document.getElementById('opportunity').value || null,
            key_price: document.getElementById('key_price').value ? parseFloat(document.getElementById('key_price').value) : null,
            open_price: document.getElementById('open_price').value ? parseFloat(document.getElementById('open_price').value) : null,
            latest_price: document.getElementById('latest_price').value ? parseFloat(document.getElementById('latest_price').value) : null,
            position_mode_id: document.getElementById('position_mode_id').value ? parseInt(document.getElementById('position_mode_id').value) : null,
            candle_pattern_ids: $('#candle_pattern_ids').val() || null,
            candle_pattern: candlePatternOrder.join('+') || null,
            open_long_margin_per_unit: document.getElementById('open_long_margin_per_unit').value ? parseFloat(document.getElementById('open_long_margin_per_unit').value) : null,
            open_short_margin_per_unit: document.getElementById('open_short_margin_per_unit').value ? parseFloat(document.getElementById('open_short_margin_per_unit').value) : null
        };

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

        // 发送更新请求
        fetch(`/monitor/update/${monitorId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
        .then(response => response.json())
        .then(data => {
            console.log('服务器响应:', data);
            if (data.code === 0) {
                // 直接跳转，不需要手动关闭弹窗
                window.location.href = `/monitor/`;
            } else {
                alert('更新失败：' + (data.msg || '未知错误'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('发生错误，请查看控制台了解详情');
        });
    });

    // 根据合约字母加载保证金信息
    function loadMarginInfo(contractLetter) {
        if (!contractLetter) return;
        
        fetch(`/monitor/api/margin_info/${contractLetter}`)
            .then(response => response.json())
            .then(data => {
                if (data.code === 0) {
                    const marginInfo = data.data;
                    // 计算保证金（需要价格信息）
                    calculateMargins(marginInfo);
                } else {
                    console.warn('获取保证金信息失败:', data.msg);
                }
            })
            .catch(error => {
                console.error('获取保证金信息出错:', error);
            });
    }

    // 设置保证金（直接从future_info获取固定金额）
    function calculateMargins(marginInfo) {
        // 直接使用从future_info查询到的固定保证金金额
        if (marginInfo.long_margin_amount) {
            document.getElementById('open_long_margin_per_unit').value = marginInfo.long_margin_amount.toFixed(2);
        }
        
        if (marginInfo.short_margin_amount) {
            document.getElementById('open_short_margin_per_unit').value = marginInfo.short_margin_amount.toFixed(2);
        }
    }

    // 初始化期货品种字段
    function initializeFutureField() {
        const contractCode = document.getElementById('contract').value;
        const name = document.getElementById('name').value;
        
        if (contractCode && name) {
            // 提取合约字母：去掉右侧4位数字
            const match = contractCode.match(/^([A-Za-z]+)(\d{4})$/);
            const contractLetter = match ? match[1] : contractCode.replace(/\d+/g, ''); // 后备方案
            
            // 通过合约字母查询期货品种信息
            if (contractLetter) {
                fetch(`/api/future_info/search?q=${encodeURIComponent(contractLetter)}&limit=1`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.code === 0 && data.data && data.data.length > 0) {
                            const future = data.data[0];
                            futureSearchInput.value = future.display_text;
                            futureIdInput.value = future.id;
                            currentFutureData = future;
                            console.log('已自动填充期货品种:', future);
                            
                            // 自动计算保证金
                            if (future.contract_letter) {
                                loadMarginInfo(future.contract_letter);
                            }
                        } else {
                            // 如果API查询失败，使用合约代码和名称拼接
                            futureSearchInput.value = `${contractCode} - ${name}`;
                            console.log('使用合约代码和名称拼接期货品种字段');
                            
                            // 尝试通过合约字母直接计算保证金
                            if (contractLetter) {
                                loadMarginInfo(contractLetter);
                            }
                        }
                    })
                    .catch(error => {
                        console.error('查询期货品种失败:', error);
                        futureSearchInput.value = `${contractCode} - ${name}`;
                        console.log('查询失败，使用合约代码和名称拼接');
                    });
            }
        }
    }

    // 开仓模式改变时自动填入相应的触发价到开仓价格
    document.getElementById('position_mode_id').addEventListener('change', function() {
        const selectedModeId = parseInt(this.value);
        if (selectedModeId) {
            const selectedMode = positionModesData.find(mode => mode.id === selectedModeId);
            if (selectedMode) {
                // 根据方向自动填入相应的触发价
                if (selectedMode.direction === 0) {
                    // 做多方向，填入做多触发价
                    const longTriggerPrice = document.getElementById('open_long_trigger_price').value;
                    if (longTriggerPrice) {
                        document.getElementById('open_price').value = longTriggerPrice;
                    }
                } else if (selectedMode.direction === 1) {
                    // 做空方向，填入做空触发价
                    const shortTriggerPrice = document.getElementById('open_short_trigger_price').value;
                    if (shortTriggerPrice) {
                        document.getElementById('open_price').value = shortTriggerPrice;
                    }
                }
                // direction为NULL的情况（虚拟、执行、无）不自动填入
                console.log('开仓模式选择:', selectedMode.name, '方向:', selectedMode.direction);
            }
        }
    });

    // 初始化加载数据
    loadPositionModes();
    loadCandlePatterns();
    initializeFutureField();
});
</script>
{% endblock %}