@using Core.Web.WebHelper
@{
    ViewBag.Title = "权限菜单管理";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    .hiddentr {
        display: none;
    }

    .redColor {
        color: red;
    }
</style>

<div class="x-body" id="contentBody">
    <div class="layui-btn-group" style="padding-bottom:10px;">
        @Html.Action("ToolBar", "Home",
             new {
                 area="",
                 rightcode = (ViewBag.rightCode as string),
                 otherToolBars = new Core.Web.WebHelper.ToolBar[]
                 {
                     new  Core.Web.WebHelper.ToolBar(ToolBarConfig.CONST_Other1, "向上", "layui-btn-warm","layui-icon-up") ,
                     new  Core.Web.WebHelper.ToolBar(ToolBarConfig.CONST_Other2, "向下", "layui-btn-warm" ,"layui-icon-down")
                 }
             }
             )
    </div>
    <div id="mytoolbar">
        <form>
            名称：
            <div class="layui-inline">
                <input type="text" name="txt_rname" id="txt_rname" required lay-verify="required" placeholder="名称" autocomplete="off" class="layui-input">
            </div>
            <input class="layui-btn " data-method="search" type="button" value="查询">
            <input class="layui-btn  layui-btn-reset" type="reset" value="清空" />
        </form>
    </div>

    <table class="layui-hide" id="tab_kefuzhuangtaiyi1" lay-filter="wochao"></table>
</div>
<script>
    var table;
    $(function () {
        //var tempwidth = 1410;
        //var tempheight = 1115;
        //var width = $(window).width();
        //var height = Math.ceil(width * (tempheight / tempwidth));
        //$("body").height($(window).height() + 150);

        //$(window).resize(function () {//自动适应大小
        //    //console.log("resize");
        //    table.resize('tab_kefuzhuangtaiyi1');
        //});
    });
</script>
<script>
    var selectRow = {};
    var winindex;
    var layer;
    var rowid;
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;
        element.on('tab(tonghuajiankong)', function (n) {
            $(".bodytable").addClass("hidden");
            $("#kefuzhuangtai" + (n.index + 1)).removeClass("hidden");
        });
        element.on('tab(maintab)', function (n) {
            if (n.index == 0)
                $("#bottomcard").removeClass("hidden");
            else
                $("#bottomcard").addClass("hidden");
        });
    });
    layui.use(['laypage', 'layer', 'table', 'laydate'], function () {
        var laydate = layui.laydate;
        layer = layui.layer;
        table = layui.table;
        table.render({
            id: 'testReload'//列表别名ID
            , elem: '#tab_kefuzhuangtaiyi1'
            , url: 'GetList'
            , method: 'POST'
            , height: "full-150"
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , page: false
            //, limit: 30
            //, height: "full-250"
            //, size:"sm"
            , cols: [[
                {
                    field: 'NAME', title: '名称', width: 300, templet: function (d) {
                        var html = '<span style="padding-left:' + (d.TYPE - 1) * 20 + 'px;" myparentids="' + d.PARENTSTR + '" myparent="' + d.PRENTID + '" nmyid="' + d.ID + '"  mytype="' + d.TYPE + '""></span>';
                        if (d.ISHAVECHILD == 1)
                            html += '<i class="layui-icon layui-icon-subtraction manmagerhidden" myid="' + d.ID + '"  style="border:1px solid #c0c4cc;cursor:pointer;" onclick="HiddenOrShow(' + d.ID + ')"></i>&nbsp;&nbsp;';
                        else
                            html += '<i class="layui-icon layui-icon-file" ></i>&nbsp;&nbsp;';



                        if (d.ISHIDDEN == 1)
                            html += '<span class="layui-badge  layui-bg-black">' + d.TYPE + '</span>';
                        else
                            html += '<span class="layui-badge layui-bg-blue">' + d.TYPE + '</span>';
                        return html + '&nbsp;&nbsp;<span class="mspan">' + d.NAME + "</span>"
                    }
                }
                , { field: 'CODE', title: '编码', width: 100, }
                , { field: 'URL', title: '地址' }
                , {
                    field: 'ISHIDDEN', title: '显示状态', width: 90, templet: function (d) {
                        if (d.ISHIDDEN == 1)
                            return '<i class="layui-icon layui-icon-close"></i>'
                        else
                            return '<i class="layui-icon layui-icon-ok"  style="color:green;"></i>'
                        return "";
                    }
                }
                , {
                    field: 'ISFORBIDDEN', title: '状态', width: 90, templet: function (d) {
                        if (d.ISFORBIDDEN == 1)
                            return '<span class="layui-badge">禁用</span>'
                        else
                            return '<span class="layui-badge layui-bg-green">正常</span>'
                        return "";
                    }
                }
                , {
                    field: 'buttonlist', title: '按钮', templet: function (d) {
                        var html = "";
                        $(d.buttonlist).each(function (n, bda) {
                            if (bda.CODE.indexOf("Other") > -1)
                                html += '<span class="layui-badge layui-bg-cyan" code="' + bda.CODE + '" myname="' + bda.NAME + '">' + bda.NAME + '</span>&nbsp;';
                            else
                                html += '<span class="layui-badge layui-bg-blue" code="' + bda.CODE + '" myname="' + bda.NAME + '">' + bda.NAME + '</span>&nbsp;';
                        });
                        return html;

                    }
                }
                , { field: 'ICON', title: '图标', width: 120, }
                , {
                    field: 'ID', title: 'ID', width: 110, templet: function (e) {
                        return "<span youId='" + e.ID + "'>" + e.ID + "</span>";
                    }
                }
                //, { field: 'SORTID', title: '排序'}
                //, { field: 'CTIME', title: '创建时间' }
                //, { field: 'CREATEUSER', title: '创建人'}
            ]],
            done: function () {
                if (selectRow.ID != "undefined" && selectRow.ID != null) {
                    //console.log($("#contentBody").find("td[data-field='ID']:contains('" + selectRow.ID + "')").html());
                    //var kongjian = $("#contentBody").find("td[data-field='ID']:contains('" + selectRow.ID + "')");
                    var kongjian = $("#contentBody").find("[youid='" + selectRow.ID + "']").parent().parent();
                    kongjian.click();
                    //console.log(kongjian.offset());
                    //console.log(kongjian.position());
                    $(".layui-table-body").animate({ scrollTop: kongjian.position().top - 200 }, 100)
                }
                $("[data-method=\"search\"]").click();
            }

        });
        //监听行单击事件（单击事件为：rowDouble）
        table.on('row(wochao)', function (obj) {
            var data = obj.data;
            //console.log(data);
            //标注选中样式
            obj.tr.addClass('self-table-click').siblings().removeClass('self-table-click');
            selectRow = data;
        });


        var active = {

            add: function () {
                var width = $(window).width() * 0.7;
                var height = $(window).height() * 0.7;

                winindex = layer.open({
                    type: 2,
                    content: (selectRow.ID == "undefined" || selectRow.ID == null) ? 'Edit' : 'Edit?pid=' + selectRow.ID,
                    title: '<i class="layui-icon layui-icon-file-b" style="font-size: 16px; color: #1E9FFF;"></i>&nbsp;<span style="font-size: 16px; ">新增权限菜单</span>',
                    area: ['' + width + 'px', '' + height + 'px']
                });
            }, edit: function () {
                var width = $(window).width() * 0.7;
                var height = $(window).height() * 0.7;
                if (selectRow.ID == "undefined" || selectRow.ID == null) {
                    //layer.alert("请先选中一条记录！", { title: '提示' });
                    layer.msg("请先选中一条记录！", { icon: 7 });
                    return;
                }
                winindex = layer.open({
                    type: 2,
                    content: 'Edit?id=' + selectRow.ID,
                    title: '<i class="layui-icon layui-icon-survey" style="font-size: 16px; color: #1E9FFF;"></i>&nbsp;<span style="font-size: 16px; ">编辑权限菜单</span>',
                    area: ['' + width + 'px', '' + height + 'px']
                });
            }, other1: function () {
                if (selectRow.ID == "undefined" || selectRow.ID == null) {
                    layer.alert("请先选中一条记录！", { title: '提示' });
                    return;
                }
                console.log("prentid:" + selectRow.PRENTID);
                var alltypenode = $(".x-body").find("[myparent='" + selectRow.PRENTID + "']");
                var getIndex = 0;
                $(alltypenode).each(function (n, data) {
                    console.log(data);
                    var text = $(data).attr("nmyid");
                    //console.log(data);
                    if (text == selectRow.ID) {
                        getIndex = n;
                        return false;
                    }
                });
                if (getIndex == 0) {
                    layer.msg("已经是第一位了，不能在往上了！", { icon: 2 });
                } else {
                    rowid = selectRow.ID;
                    var loadingindex = layer.load(3, { shade: true });
                    $.ajax({
                        type: "POST",
                        url: "Sort",
                        data: { id1: selectRow.ID, id2: $(alltypenode[getIndex - 1]).attr("nmyid") },
                        dataType: "json",
                        success: function (da) {
                            layer.close(loadingindex);
                            if (da.result == true) {
                                layer.msg('排序成功！', { icon: 1 });
                                TableReload();
                            } else {
                                layer.msg(da.retmsg, { icon: 2 });
                            }

                        },
                        error: function () {
                            layer.close(loadingindex);
                            layer.msg('排序失败！', { icon: 2 });
                        }
                    });
                }


            }, other2: function () {

                if (selectRow.ORDERID == "undefined" || selectRow.ID == null) {
                    layer.alert("请先选中一条记录！", { title: '提示' });
                    return;
                }
                console.log("prentid:" + selectRow.PRENTID);
                var alltypenode = $(".x-body").find("[myparent='" + selectRow.PRENTID + "']");
                var getIndex = 0;
                $(alltypenode).each(function (n, data) {
                    var text = $(data).attr("nmyid");
                    //console.log(data);
                    if (text == selectRow.ID) {
                        getIndex = n;
                        return false;
                    }
                });
                if (getIndex == alltypenode.length - 1) {
                    layer.msg("已经是最后一位了，不能在向下了！", { icon: 2 });
                } else {
                    rowid = selectRow.ID;
                    var loadingindex = layer.load(3, { shade: true });
                    $.ajax({
                        type: "POST",
                        url: "Sort",
                        data: { id1: selectRow.ID, id2: $(alltypenode[getIndex + 1]).attr("nmyid") },
                        dataType: "json",
                        success: function (da) {
                            layer.close(loadingindex);
                            if (da.result == true) {
                                layer.msg('排序成功！', { icon: 1 });
                                TableReload();
                            } else {
                                layer.msg(da.retmsg, { icon: 2 });
                            }

                        },
                        error: function () {
                            layer.close(loadingindex);
                            layer.msg('排序失败！', { icon: 2 });
                        }
                    });
                }

            }, delete: function () {
                if (selectRow.ID == "undefined" || selectRow.ID == null) {
                    layer.alert("请先选中一条记录！", { title: '提示' });
                    return;
                }
                layer.confirm('你确定要删除这条记录吗?', { icon: 3, title: '提示' }, function (index) {
                    //do something
                    var loadingindex = layer.load(3, { shade: true });
                    var data = { id: selectRow.ID };
                    $.ajax({
                        type: "POST",
                        url: "Delete",
                        data: data,
                        dataType: "json",
                        success: function (da) {
                            layer.close(loadingindex);
                            if (da.result == true) {
                                layer.msg('操作成功！', { icon: 1 });
                                TableReload();
                            } else {
                                layer.msg(da.retmsg, { icon: 2 });
                            }
                        },
                        error: function () {
                            layer.close(loadingindex);
                            layer.msg('操作失败！', { icon: 2 });
                        }
                    });
                    //layer.close(index);
                });

            }, search: function () {

                $(".redColor").each(function (i, n) {
                    $(this).after($(this).attr("ntitle"));
                    $(this).remove();
                });
                var txt = $.trim($("#txt_rname").val());
                if (txt == "")
                    return;
                $("#contentBody tbody tr td[data-field='CODE'],[data-field='ID'] .layui-table-cell ").each(function () {
                    var html = $(this).html();
                    html = html.replace(txt, "<b ntitle=\"" + txt + "\" class=\"redColor\">" + txt + "</b>");
                    $(this).html(html);

                });
                $("#contentBody tbody tr td[data-field='NAME'] .layui-table-cell .mspan").each(function () {
                    var html = $(this).html();
                    html = html.replace(txt, "<b ntitle=\"" + txt + "\" class=\"redColor\">" + txt + "</b>");
                    $(this).html(html);
                });
            }
        };
        $('.layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            //console.log(method);
            active[method] ? active[method].call(this, othis) : '';

        });
    });
    function Closed() {
        layer.close(winindex);
    }
    function TableReload() {
        table.reload('testReload', {
            page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }
    function HiddenOrShow(id) {
        var clickbutton = $("[myid='" + id + "']");
        var isHidden = $(clickbutton).hasClass("layui-icon-subtraction");
        if (isHidden)
            $(clickbutton).removeClass("layui-icon-subtraction").addClass("layui-icon-addition");
        else
            $(clickbutton).removeClass("layui-icon-addition").addClass("layui-icon-subtraction");
        $("[myparentids]").each(function (n, m) {
            var str = $(this).attr("myparentids");
            var myparentid = parseInt($(this).attr("myparent"));
            if (str.indexOf("[" + id + "]") > -1) {
                if (isHidden)
                    $(this).parent().parent().parent().addClass("hiddentr");
                else {
                    if ($("[myid='" + myparentid + "']").hasClass("layui-icon-subtraction"))
                        $(this).parent().parent().parent().removeClass("hiddentr");
                }
            }
        });

    }

</script>