@model IEnumerable<client_margin_config>
@{
    ViewBag.Title = "互换预付金率维护";
    Layout = "~/Views/Shared/_MainLayout.cshtml";
    var pageObj = new
    {
        canEdit = CurUser.基础参数管理.互换预付金率修改,
    };
}
<div class="searchdiv">
    @Html.MyAceDropdownInput("ClientId", "客户名称", ClientDataModel.GetAllClient(), true, true, null, false)
    @MyControls.SearchBtn()
    @if (pageObj.canEdit)
    {
        @MyControls.Btn("新增", "addConfig()")
    }
    <div class="row" style="margin-top:15px">
        <div class="col-md-12">
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="configTable">
                    <thead>
                        <tr>
                            <th width="250">操作</th>
                            <th>客户名称</th>
                            <th>生效日期</th>
                            <th>利率债期限</th>
                            <th>初始保证金率</th>
                            <th>维持保证金率</th>
                            <th>互换默认天数</th>
                            <th>操作人</th>
                            <th>操作时间</th>
                        </tr>
                    </thead>
                    <tbody id="configTableBody">
                        <!-- 数据将通过Ajax加载 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    // 页面权限配置
    var pageObj = @Html.Raw(Json.Serialize(pageObj));
    
    $(document).ready(function () {
        loadData();
        initEventHandlers();
    });

    // 初始化事件处理器
    function initEventHandlers() {
        // 回车键查询
        $('#ClientId, #ValueDate').on('keypress', function(e) {
            if (e.which === 13) {
                SearchClick();
            }
        });

        // 表格行点击高亮
        $(document).on('click', '#configTable tbody tr', function() {
            $(this).siblings().removeClass('row-selected');
            $(this).addClass('row-selected');
        });

        // 快捷键支持
        $(document).on('keydown', function(e) {
            // Ctrl+R 查询
            if (e.ctrlKey && e.which === 82) {
                e.preventDefault();
                loadData();
            }
            // F5 查询
            if (e.which === 116) {
                e.preventDefault();
                loadData();
            }
        });
    }

    function loadData() {
        var searchData = {
            ClientId: $('#ClientId').val(),
            ValueDate: $('#ValueDate').val()
        };

        main.post('/ClientMarginConfig/ClientMarginConfigQuery', searchData).done(function (result) {
            if (result.success) {
                renderTable(result.obj);
            } else {
                main.alert('加载数据失败：' + result.message);
            }
        });
    }


    function renderTable(data) {
        var tbody = $('#configTableBody');
        tbody.empty();

        if (!data || data.length === 0) {
            tbody.append('<tr><td colspan="9" class="text-center text-muted"><i class="fa fa-info-circle"></i> 暂无数据</td></tr>');
            return;
        }

        $.each(data, function (index, item) {
            try {
                var detailsCount = (item.details && item.details.length > 0) ? item.details.length : 1;
                
                // 主行数据
                var mainRowClass = detailsCount > 1 ? 'main-row' : '';
                var row = '<tr class="' + mainRowClass + '">';
                
                // 操作列 - 合并单元格
                row += '<td class="text-center" rowspan="' + detailsCount + '">';
                if (pageObj.canEdit) {
                    row += '<input type="button" class="wentiEdit" title="修改" onclick="editConfig(\'' + item.EncryptId + '\')" value="修改" />';
                    row += '<input type="button" class="wentiEdit" title="删除" onclick="deleteConfig(\'' + item.EncryptId + '\')" value="删除" />';
                } else {
                    row += '<span class="text-muted"></span>';
                }
                row += '</td>';
                
                // 客户名称 - 合并单元格
                row += '<td rowspan="' + detailsCount + '"><strong>' + escapeHtml(item.client_name || '--') + '</strong></td>';
                
                // 生效日期 - 合并单元格
                var valueDate = formatDate(item.value_date);
                row += '<td rowspan="' + detailsCount + '">' + valueDate + '</td>';
                
                // 显示第一条详情信息
                if (item.details && item.details.length > 0) {
                    var detail = item.details[0];
                    row += generateDetailCells(detail);
                } else {
                    row += '<td class="text-muted">--</td>';
                    row += '<td class="text-muted">--</td>';
                    row += '<td class="text-muted">--</td>';
                    row += '<td class="text-muted">--</td>';
                }
                
                // 操作人和操作时间 - 合并单元格
                var operator = item.OptName || item.OptName || '--';
                var operateTime = formatDateTime(item.OptDate);
                row += '<td rowspan="' + detailsCount + '">' + escapeHtml(operator) + '</td>';
                row += '<td rowspan="' + detailsCount + '">' + operateTime + '</td>';
                row += '</tr>';
                
                tbody.append(row);
                
                // 如果有多个详情，显示其他详情行
                if (item.details && item.details.length > 1) {
                    for (var i = 1; i < item.details.length; i++) {
                        var detailRow = '<tr class="detail-row">';
                        // 不需要操作、客户名称、生效日期、操作人、操作时间列，因为已经合并
                        detailRow += generateDetailCells(item.details[i]);
                        detailRow += '</tr>';
                        tbody.append(detailRow);
                    }
                }
            } catch (error) {
                console.error('渲染表格行时出错:', error, item);
                var errorRow = '<tr><td colspan="9" class="text-danger"><i class="fa fa-exclamation-triangle"></i> 数据渲染异常</td></tr>';
                tbody.append(errorRow);
            }
        });
    }

    function SearchClick() {
        loadData();
    }

    function addConfig() {
         main.infopage("新增互换预付金率", '/ClientMarginConfig/ClientMarginConfigEdit', { area: ['750px', '700px'] });
    }

    function editConfig(id) {
         main.infopage("修改互换预付金率", '/ClientMarginConfig/ClientMarginConfigEdit?enid=' + id, { area: ['750px', '700px'] });
    }

    function deleteConfig(id) {
        if (confirm('确定要删除这条记录吗？')) {
            $.post('/ClientMarginConfig/ClientMarginConfigDelete', { enid: id }, function (result) {
                if (result.success) {
                    main.alert('删除成功');
                    SearchClick();
                } else {
                    main.alert('删除失败：' + result.message);
                }
            });
        }
    }

    // 辅助函数：HTML转义
    function escapeHtml(text) {
        if (!text) return '--';
        var map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return text.toString().replace(/[&<>"']/g, function(m) { return map[m]; });
    }

    // 辅助函数：格式化日期
    function formatDate(dateStr) {
        if (!dateStr) return '--';
        try {
            var date = new Date(dateStr);
            if (isNaN(date.getTime())) return '--';
            return date.getFullYear() + '-' + 
                   String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                   String(date.getDate()).padStart(2, '0');
        } catch (e) {
            return '--';
        }
    }

    // 辅助函数：格式化日期时间
    function formatDateTime(dateStr) {
        if (!dateStr) return '--';
        try {
            var date = new Date(dateStr);
            if (isNaN(date.getTime())) return '--';
            return date.getFullYear() + '-' + 
                   String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                   String(date.getDate()).padStart(2, '0') + ' ' +
                   String(date.getHours()).padStart(2, '0') + ':' +
                   String(date.getMinutes()).padStart(2, '0');
        } catch (e) {
            return '--';
        }
    }

    // 辅助函数：格式化百分比
    function formatPercentage(value) {
        if (value === null || value === undefined || value === '') return '--';
        try {
            var num = parseFloat(value);
            if (isNaN(num)) return '--';
            return num.toFixed(2) + '%';
        } catch (e) {
            return '--';
        }
    }

    // 辅助函数：生成详情单元格HTML
    function generateDetailCells(detail) {
        return '<td>' + detail.bond_term_desc + '</td>' +
               '<td class="text-right">' + formatPercentage(detail.init_rate) + '</td>' +
               '<td class="text-right">' + formatPercentage(detail.maintain_rate) + '</td>' +
               '<td class="text-center">' + (detail.swap_days || '--') + '天</td>';
    }
</script>

<style>
    /* 表格样式优化 */
    #configTable {
        font-size: 13px;
    }
    
    #configTable th {
        background-color: #f8f9fa;
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #dee2e6;
    }
    
    #configTable td {
        vertical-align: middle;
        border: 1px solid #dee2e6;
        padding: 8px;
    }
    
    /* 文本对齐 */
    .text-right {
        text-align: right;
    }
    
    .text-center {
        text-align: center;
    }
    
    /* 空数据样式 */
    .text-muted {
        color: #6c757d;
        font-style: italic;
    }
    
    /* 错误信息样式 */
    .text-danger {
        color: #dc3545;
        font-weight: bold;
    }
    
    /* 响应式表格 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 表格行悬停效果 */
    #configTable tbody tr:hover {
        background-color: #f8f9fa;
        cursor: pointer;
    }
    
    @@media (max-width: 768px) {
        .responsive-table table {
            min-width: 800px;
        }
        
        #configTable {
            font-size: 12px;
        }
        
        #configTable th,
        #configTable td {
            padding: 4px;
        }
        
    }
</style>