@{
    ViewBag.Menu = "股票板块配置";
    ViewData["Title"] = "股票板块配置";
    Layout = Context.Request.Query["v"] == "1" ? "~/Views/Shared/_InfoLayout.cshtml" : "~/Views/Shared/_MainLayout.cshtml";
}

@section CSS{
    <style>
        #inputName,#editGroup {
            width: 230px;
        }

        .vline {
            margin: 0 8px;
            display: inline-block;
            border-right: 1px solid #aaa;
            width: 1px;
            height: 20px;
            vertical-align: middle;
        }
    </style>
}
    @section JS{
    <script src="~/Statics/libs/template/mustache.min.js?v=@(HtmlUtil.JsVersion)"></script>
    <script type="text/javascript">
        $(function () {
            getList(1);
            $('#selGroup').on('change', function () {
                getList($('#selGroup').val());
            });
            $('#breadcrumbs').children('.breadcrumb:first').children(":last").prepend('<span>板块性质管理</span>');
        });

        function getList(group) {
            $t = $('#table').find('tbody');
            $t.html('');
            main.post("/underlyingBlock/ajaxGetList?group=" + group).done(function (resp) {
                var html = Mustache.render($('#listItemTpl').html(), resp);
                $t.html(html);
            });
        }

        function editData(id, name,group) {
            id = parseInt(id) || 0;
            if(!group){
                group = $('#selGroup').val();
            }
            $('#inputId').val(id);
            $('#inputName').val(name);
            $('#editGroup').val(group);
            $('#editTitle').text(id ? '修改--' + name : '新增');
            $('#editModal').modal('show');
        }

        function saveData() {
            var id = parseInt($('#inputId').val()) || 0;
            var groupId = $('#editGroup').val();
            var name = $("#inputName").val();;
            if (groupId == 0) {
                main.alert("请选择板块别名");
                return;
            }
            if (name.length==0) {
                main.alert("请填写板块名称");
                return;
            }
            $('#inputGroup').val(groupId);
            var data = $('#editForm').serialize();
            main.post('/underlyingBlock/ajaxSaveData', data).done(function (resp) {
                $('#editModal').modal('hide');
                var html = Mustache.render($('#listItemTpl').html(), { obj: [resp.obj] });
                if (id) {
                    $('#item' + id).replaceWith(html);
                } else {
                    $('#table').find('tbody').prepend(html);
                }
            });
        }

        function removeDatas() {
            var ids = $('#table').find('input:checked').map(function () {
                return parseInt($(this).val());
            }).get();
            if (ids.length) {
                main.confirm("确定要删除选择项吗?", function () {
                    main.post('/underlyingBlock/ajaxRemoveDatas', { ids: ids }).done(function (resp) {
                        $('#table').find('input:checked').closest('tr').remove();
                    });
                });
            } else {
                return main.alert('请选择要删除的项');
            }
        }

        //板块性质配置
        function showBlockConfig() {
            main.infopage('板块性质别名配置', '/UnderlyingBlock/UnderlyingBlockConfig', { end() { location.reload(); } });
        }
    </script>
}

    <div class="searchdiv" id="searchdiv">
        <select id="selGroup">
        @for (var i = 0; i <= 5; i++)
        {
            <option value="@(i)">@(ViewData["block" + i])</option>
        }
    </select>
    <div class="vline"></div>
    <button class="btn btn-primary" onclick="editData()">新增</button>
    <button class="btn btn-primary" onclick="removeDatas()">删除选择项</button>
    <button class="btn btn-primary" onclick="showBlockConfig()">别名配置</button>
</div>

<div class="yc-panel">
    <table id="table" class="table table-bordered table-hover">
        <tbody></tbody>
    </table>
</div>

<script type="text/html" id="listItemTpl">
    {{#obj}}
    <tr id="item{{id}}">
        <td style="text-align: left;">
            <input type="checkbox" value="{{id}}" />
            <a href="javascript:;" onclick="editData({{id}},'{{Name}}',{{Group}})">{{Name}}</a>
        </td>
    </tr>
    {{/obj}}
</script>

<div class="modal" tabindex="-1" id="editModal">
    <div class="modal-dialog">
        <div class="modal-content" style="width:500px;">
            <div class="modal-header">
                <h5 class="modal-title" id="editTitle">新增</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editForm" onsubmit="return false;">
                    <div class="form-group">
                        <label class="formlabel half">板块别名</label>
                        <select id="editGroup">
                            @for (var i = 0; i <= 5; i++)
                            {
                                <option value="@(i)">@(ViewData["block" + i])</option>
                            }
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="formlabel half">板块名称</label>
                        <input type="text" maxlength="50" name="Name" id="inputName" value="" />
                    </div>
                    <input type="hidden" name="id" id="inputId" value="" />
                    <input type="hidden" name="group" id="inputGroup" value="" />
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveData()" id="btnSave">保存</button>
            </div>
        </div>
    </div>
</div>