zszq-trs/YLErpWeb/Views/ExchangeTrade/SpreadSetting.cshtml

@using YLErp.Modules.SystemModule
@model XBondSpread
@{
    ViewBag.Title = "偏移设置";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
}

@section CSS{
    <style>
        .offset-form-group { display: flex; align-items: center; gap: 8px; }
        .offset-form-group .form-control { width: 120px; }
        .help-block { margin-top: 5px; color: #999; }
        .form-footer { text-align: center; }
        .popover {
            min-width: 200px;
        }
        .popover-body {
            padding: 15px;
        }
        .popover-body .btn {
            margin: 0 5px;
            padding: 0.25rem 0.75rem;
            font-size: 0.875rem;
        }
    </style>
}


@section JS{
    <script>
        $(function() {
            var $bid = $("#bid");
            var $ofr = $("#ofr");
            var $popover;
            
            // 初始化popover
            $('[data-toggle="popover"]').popover({
                trigger: 'manual',
                container: 'body',
                sanitize: false, // 禁用HTML净化
                html: true // 允许HTML内容
            }).on('click', function(e) {
                // 阻止默认行为
                e.preventDefault();
                e.stopPropagation();
                
                // 如果已经有popover显示，则不再重复显示
                if ($(this).attr('aria-describedby')) {
                    return;
                }
                
                // 显示popover
                $popover = $(this).popover('show');
                
                // 点击确认按钮
                $(document).one('click', '#confirmSave', function(e) {
                    e.stopPropagation();
                    // 这里执行保存逻辑
                    saveSettings();
                    // 隐藏popover
                    $popover.popover('hide');
                });

                // 点击取消按钮
                $(document).one('click', '#cancelSave', function(e) {
                    e.stopPropagation();
                    $popover.popover('hide');
                });
            });
            
            // 阻止popover内部的点击事件冒泡
            $(document).on('click', '.popover', function(e) {
                e.stopPropagation();
            });

            // 点击页面其他区域关闭popover
            $(document).on('click', function(e) {
                !$(e.target).closest('.popover').length && $popover?.popover('hide');
            });

            // 关闭按钮点击事件
            $("#btnClose").click(function() {
                layer.closeMe();
            });

             // 保存设置
            function saveSettings() {
                var bid = $bid.val();
                var ofr = $ofr.val();
                
                if (!validInput($bid, bid)) return;
                if (!validInput($ofr, ofr)) return;
                
                // 保存到后台
                $.ajax({
                    type: "Post",
                    url: "/ExchangeTrade/AjaxSaveSpreadSetting",
                    data: { bid, ofr },
                    success: function (data) {
                        if (!data.success){
                            main.alert(data.msg);
                            return 
                        }
                        window.parent.showmiddlemessage('偏移设置成功');
                        // 关闭对话框
                        layer.closeMe();
                    }
                });
            }
        });

        function validInput($input, value) {
            var $formGroup = $input.closest('.form-group');
            $formGroup.find('.text-danger').remove();
            if (!!`${value}`.trim() && !/^-?\d+$/.test(`${Number(value)}`)) {
              $formGroup.append('<div class="text-danger small">只允许输入整数</div>');
              return false
            }
            return true
        }
    </script>
}

<div class="container-fluid" style="padding: 20px;">
    <div class="form-horizontal">
        <!-- 净价bid偏移 -->
        <div class="form-group">
            <div class="offset-form-group">
                <span class="control-label">净价bid偏移</span>
                <input type="number" id="bid" class="form-control" value="@(Model.bid)" />
                <span class="input-group-addon"> × 0.0001 (元)</span>
            </div>
            <div class="help-block">
                例：若此处输入3；买入净价为99.8055时，偏移后为99.8052
            </div>    
        </div>
        
        <!-- 净价ofr偏移 -->
        <div class="form-group">
            <div class="offset-form-group">
                <span class="control-label ">净价ofr偏移</span>
                <input type="number" id="ofr" class="form-control" value="@(Model.ofr)"  />
                <span class="input-group-addon"> × 0.0001 (元)</span>
            </div>
            <div class="help-block">
                例：若此处输入3；卖出净价为99.8055时，偏移后为99.8058
            </div>
        </div>

        <div class="form-group" style="margin-top: 20px;">
            <div class="help-block text-danger">保存后10分钟后生效</div>
        </div>
        
        <!-- 按钮区域 -->
        <div class="form-footer">
            <button 
                id="btnSave"
                type="button"
                class="btn btn-primary" 
                style="margin-right: 10px;" 
                data-toggle="popover"
                data-html="true"
                data-placement="top"
                data-content='<div class="text-center">
                    <p>请注意，此偏移数值即将于10分钟后生效，要继续吗？</p>
                    <button id="confirmSave" class="btn btn-sm btn-primary">继续</button>
                    <button id="cancelSave" class="btn btn-sm btn-default">取消</button>
                </div>'
            >保存</button>
            <button id="btnClose" type="button" class="btn btn-default">关闭</button> 
        </div>
    </div>
</div>