@model IEnumerable<TradeAutoRule>

@{
    ViewBag.Title = "自动对冲规则";
    Layout = "~/Views/Shared/_MainLayout.cshtml";
}

<div id="vueCont" style="min-height:700px;">

    <div class="searchdiv">
        <div class="firstLine-wrap form-inline">
            <div class="form-group">
                <label>标的代码:</label>
                <input type="text" class="form-control" v-model="searchUnderlyingCode" style="text-align:left">
            </div>
            @*<span style="margin-right:100px;font-size:20px;color:#999;" class="text-muted">|</span>*@
            <div class="form-group">
                <button type="button" v-on:click="showEdit('')" class="btn btn-primary" style="width:auto;height:29px;border: none;border-radius: 3px;">新增</button>
            </div>
        </div>
    </div>
    <div class="yc-panel">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>标的代码</th>
                    <th>上限Delta</th>
                    <th>下限Delta</th>
                    <th>Delta对冲比率</th>
                    @*<th>盈亏调整</th>*@
                    <th>可用</th>
                    <th>自动执行</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in searchRows">
                    <td><a href="javascript:;" class="btn btn-link" v-on:click="showEdit(item.UnderlyingCode)">{{item.UnderlyingCode}}</a></td>
                    <td>{{item.MaxDelta}}</td>
                    <td>{{item.MinDelta}}</td>
                    <td>{{item.DeltaPercent}}</td>
                    @*<td>{{item.PnlAdjust}} {{item.PnlAdjustType}}</td>*@
                    <td>
                        <span v-if="item.Enable" class="glyphicon glyphicon-ok"></span>
                        <span v-else class="glyphicon glyphicon-remove text-muted"></span>
                    </td>
                    <td>
                        <span v-if="item.AutoExecute" class="glyphicon glyphicon-ok"></span>
                        <span v-else class="glyphicon glyphicon-remove text-muted"></span>
                    </td>
                    <td>
                        <a href="javascript:;" class="btn btn-sm btn-outline-danger" v-on:click="showEdit(item.UnderlyingCode)">编辑</a>
                        <a href="javascript:;" class="btn btn-sm btn-outline-danger" v-on:click="removeData(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    
</div>

@section JS{
    <script>

        function setRules(rowObj) {
            var index = vue.rows.findIndex(n => n.UnderlyingCode === rowObj.UnderlyingCode);
            if (index < 0) {
                vue.rows.push(rowObj);
            }
            else {
                Vue.set(vue.rows, index, rowObj)
            }
            layer.closeAll();
        }

        var vue = new Vue({
            el: '#vueCont',
            data: {
                rows: [],
                searchUnderlyingCode: ''
            },
            methods: {
                showEdit: function (UnderlyingCode) {
                    main.infopage("规则配置", "/trade_autorule/edit2?code=" + UnderlyingCode, {area:['620px','500px']});
                },
                removeData: function (id) {
                    var thisObj = this;
                    main.confirm("确认要删除吗?", "/trade_autorule/AjaxRemove/" + id).done(function (res) {
                        var index = thisObj.rows.findIndex(n => n.id == id);
                        thisObj.rows.splice(index, 1);
                    });
                }
            },
            computed: {
                searchRows: function () {
                    var code = this.searchUnderlyingCode;
                    if (code) {
                        var r = new RegExp(code, "i");
                        return this.rows.filter(x => x.UnderlyingCode.search(r) >= 0);
                    }
                    return this.rows;
                }
            }
        });

        vue.rows = @Html.Raw(JsonHelper.ToJson(Model) ?? "[]");
    </script>
}