@using ShwasherSys.Authorization.Permissions
@using ShwasherSys.Models
@using ShwasherSys.Models.Modal

@*@model WisdomRehearsal.Roles.Dto.RoleDto*@
@{

    ViewBag.Title = "区域维护";
    ViewBag.ActiveMenu = PermissionNames.PagesBasicInfoRegions; //The menu item will be active for this page.
    //CurrentUserViewModel currentUser = ViewBag.CurrentUser;
}
<link href="~/Content/Plugins/bootstrap-table/extensions/treegrid/jquery.treegrid.min.css" rel="stylesheet" />
<div class="table-box mr-4">
    @Html.Action("ToolMenu", "Layout", new { pageName = ViewBag.ActiveMenu, SelectList = new { } })
    <table id="table"
           data-url="/api/services/app/Regions/GetAll"
           data-striped="true" data-id-field="id" data-unique-id="id"
           data-method="post"
           data-side-pagination="server"
           data-content-type="application/x-www-form-urlencoded; charset=UTF-8"
           data-cache="false"
           data-pagination="true"
           data-page-size="1000"
           data-page-number="1"
           data-page-list="[1000]"
           data-buttons-class="primary btn-sm"
           data-query-params="QueryParams"
           data-response-handler="ResponseHandler"
           data-click-to-select="false"
           data-single-select="true">
        <thead>
            <tr class="row" id="header">
                <th data-field="state" data-checkbox="true"></th>
                <th data-align="" data-field="regionName">名称</th>
                <th data-align="center" data-field="id">编号</th>
                <th data-align="center" data-formatter="ActionsFormatter">操作菜单</th>

                @*<th data-align="center" data-field="LastModificationTime">@L("LastModificationTime")</th>
                    <th data-align="center" data-field="LastModifierUserId">@L("LastModifierUserId")</th>*@
            </tr>
        </thead>
    </table>
</div>

@section modal {
    <!-- Modal -->
    <div class="modal fade" id="modal" role="dialog" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered" role="document">
            <div class="modal-content">
                @Html.Partial("Modals/_ModalHeader", new ModalHeaderViewModel("功能菜单"))
                @{
                    var inputs = new List<InputViewModel>
                        {
                            new InputViewModel("fatherRegionID", hide:true),
                            new InputViewModel("id", displayName: "编号"),
                            new InputViewModel("regionName", displayName: "区域名称"),
                            new InputViewModel("sort", displayName: "同级序号",@class:"number"),
                        };

                    //var specials = new List<SpecialInputModel>();
                }
                @Html.Partial("Modals/_ModalBody", new ModalBodyViewModel(inputs))
                @Html.Partial("Modals/_ModalFooter", "0")
            </div>
        </div>
    </div>
}

@section scripts
{
    <script src="~/Content/Plugins/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.js"></script>
    <script src="~/Content/Plugins/bootstrap-table/extensions/treegrid/jquery.treegrid.min.js"></script>
    <script type="text/javascript">
        $("#Tool1").css("display", "none");
        var $table = $("#table");
        var actions = [];
        $(function() {
            LoadTable();
            $("#Tool1").find(".btn[data-type]").each(function (i, e) {
                var btnType = $(e).data("type").replace("_", "");
                var btnUrl = $(e).data("url") || "";
                var btnName = $(e).text();
                var btnClass = $(e).attr("class");
                var btnIcon = $(e).find("i").attr("class");
                actions.push({ type: btnType, name: btnName, "class": btnClass, icon: btnIcon, url: btnUrl });
                $(e).remove();
            });
            //$("#Tool1").css("display", "block");
        });

        function LoadTable() {
            $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales[window.lang]);
            $table.bootstrapTable({
                idField: 'id',
                treeShowField: 'regionName',
                parentIdField: 'fatherRegionID',
                onLoadSuccess: OnLoadSuccess,
                onAll: OnAll
                //onClickRow: OnClickRow,
                //queryParams: QueryParams
                // bootstrap-table-treetreegrid.js 插件配置
            });
        }
        function OnLoadSuccess() {
            $table.treegrid({
                //initialState: 'collapsed',
                treeColumn: 1,
                expanderExpandedClass: 'iconfont icon-folder-open-fill',
                expanderCollapsedClass: 'iconfont icon-folder-fill',
                onChange: function() {
                    //$table.bootstrapTable('resetWidth');
                }
            });
            $(".level-2").closest("tr").treegrid("collapse");
            $("td span.treegrid-expander:not(.iconfont)").addClass("iconfont icon-folder");
            abp.ui.clearBusy();
            $("td").off("dblclick").on("dblclick",function() { $($(this).closest("tr")).treegrid("toggle"); });
        }
        function btnCreate(id, $this) {
            console.log("Add", id);
            var row;
            if (typeof id === "string" && id !== "") {
                row = $table.bootstrapTable("getRowByUniqueId", id);
            }
            if (row) {
                var url = $($this).data("url") + "";
                OpenModal({
                    modaltitle: window.opCreate,
                    url:url,
                    data: { fatherRegionID: row.id }
                    /*save: function() {
                        SaveAjax({
                            url: url,

                            success: function (res) {
                                console.log(res);
                                if (res.success) {
                                    abp.message.success(abp.localization.localize("OpSuccess"));
                                    $("#modal").modal("hide");
                                    RefreshTable();
                                }
                            }
                        });
                    }*/
                });
            } else {
                abp.message.warn(abp.localization.localize("ChooseOneToOp"));
            }
        }
        function btnUpdate(id, $this) {
            console.log("Update", id);
            var row;
            if (typeof id === "string" && id !== "") {
                row = $table.bootstrapTable("getRowByUniqueId", id);
            }
            if (row) {
                var url = $($this).data("url") + "";
                OpenModal({ modaltitle: window.opUpdate, data: row, url: url, disabled: "id" });

            } else {
                abp.message.warn(abp.localization.localize("ChooseOneToOp"));
            }
        }
        function btnDelete(id, $this) {
            console.log("Delete", id);
            var row;
            if (typeof id === "string" && id !== "") {
                row = $table.bootstrapTable("getRowByUniqueId", id);
            }
            if (row) {
                var url = $($this).data("url") + "";
                abp.message.confirm(abp.localization.localize("DeleteConfirmMsg"), abp.localization.localize("DeleteConfirmTitle"), function () {
                    SaveAjax({ url: url, data: { Id: row.id }, isValidate: false });
                });
            } else {
                abp.message.warn(abp.localization.localize("ChooseOneToOp"));
            }
        }
        //格式化图标
        function IconFormatter(v) {
            if (v !== "") {
                return '<span class="iconfont ' + v + '"></span>';
            }

            return v;
        }
        //操作按钮
        function ActionsFormatter(v,r) {
            var str = '<div class="btn-group btn-group-xs">';

            for (var i = 0; i < actions.length; i++) {
                str += '<span class="' + actions[i]["class"] + '" data-url="' + actions[i]["url"] + '" onclick="' + actions[i]["type"] + '(\'' + r.id + '\',this)"><i class="' + actions[i]["icon"] + '"></i>' + actions[i]["name"]+' </span>';
            }
            str += '</div>';
            return str;
        }
        //自定义属性
        function RowAttributes(r) {
            return {
                //"data-level": r._level,
                "data-function": r.id,
                "data-parent": r.fatherRegionID
            };
        }
    </script>
}