@model  CRM.Core.Model.Map.Bas_Permisson
@{
    ViewBag.Title = "编辑权限菜单";
    Layout = "~/Views/Shared/_formlite.cshtml";
}
@{
    string isok = ViewBag.isOk == null ? "1" : Convert.ToString(ViewBag.isOk);
}
<style>
    .treeCooseColor {
        background-color: #f3ebbc;
    }

        .treeCooseColor :hover {
            background-color: #f3ebbc;
        }
    .layui-form-checkbox[lay-skin="primary"] span {
        padding-left: 18px;
    }
</style>
<script>
        var isOk = "@Html.Raw(isok)";
</script>

<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-xs4">
            
            <div id="test9" class="demo-tree demo-tree-box"></div>
        </div>
        <div class="layui-col-xs8">
            <form id="wocaaa" class="layui-form" action="">
                <div class="layui-form-item" style="margin-top:20px;">
                    <label class="layui-form-label">权限名称</label>
                    <div class="layui-input-block my_form_iterm">
                        <input type="hidden" />
                        @Html.HiddenFor(m => m.PRENTID,
       new Dictionary<string, object> {
                              { "lay-verify", "required" },
                              { "lay-reqtext", "请在左边选择父节点" },
                              { "autocomplete","off" },
                              { "class","layui-input" }
       })
                        @Html.HiddenFor(m => m.ID)
                        @Html.HiddenFor(m => m.TYPE)
                        @Html.HiddenFor(m => m.SORT)
                        @Html.HiddenFor(m => m.CEID)
                        @Html.TextBoxFor(m => m.NAME,
         new Dictionary<string, object> {
                                { "lay-verify", "required" },
                                { "lay-reqtext", "菜单名称是必填项，岂能为空？" },
                                { "autocomplete","off" },
                                { "placeholder","请输入名称" },
                                { "class","layui-input" }
         })
                        @*<input type="text" name="RNAME" lay-verify="required" lay-reqtext="角色名称是必填项，岂能为空？" autocomplete="off" placeholder="请输入角色" class="layui-input">*@
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">编码</label>
                    <div class="layui-input-block my_form_iterm">
                        @Html.TextBoxFor(m => m.CODE,
        new Dictionary<string, object> {
                               { "lay-verify", "required" },
                               { "lay-reqtext", "编码岂能为空？" },
                               { "autocomplete","off" },
                               { "placeholder","请输入编码" },
                               { "class","layui-input" }
        })
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图标</label>
                    <div class="layui-input-block my_form_iterm">
                        @Html.TextBoxFor(m => m.ICON,
        new Dictionary<string, object> {
                               { "autocomplete","off" },
                               { "placeholder","请输入图标" },
                               { "class","layui-input" }
        })
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单URL</label>
                    <div class="layui-input-block my_form_iterm">
                        @Html.TextBoxFor(m => m.URL,
        new Dictionary<string, object> {
                               { "autocomplete","off" },
                               { "placeholder","请输入URL" },
                               { "class","layui-input" }
        })
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">显示状态</label>
                    <div class="layui-input-block my_form_iterm">
                        <input type="checkbox" name="ISHIDDEN" @Html.Raw(Model.ISHIDDEN == 0 ? "checked='checked'" : "") lay-skin="switch" lay-text="显示|隐藏">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">禁用状态</label>
                    <div class="layui-input-block my_form_iterm">
                        <input type="checkbox" name="ISFORBIDDEN" @Html.Raw(Model.ISFORBIDDEN == 0 ? "checked='checked'" : "") lay-skin="switch" lay-text="正常|禁用">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">弹出超链</label>
                    <div class="layui-input-block my_form_iterm">
                        <input type="checkbox" name="isblank" @Html.Raw(Model.isblank == 1 ? "checked='checked'" : "") lay-skin="switch" lay-text="弹出|不弹出">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单按钮</label>
                    <div class="layui-input-block my_form_iterm" style="line-height: 36px;">
                        <div class="layui-input-inline" id="buttonlist">
                            @if (Model.buttonlist != null)
                            {
                                foreach (CRM.Core.Model.Map.Bas_Permisson_Button bda in Model.buttonlist)
                                {
                                    if (bda.CODE.IndexOf("Other") > -1)
                                    {
                                        <span class="layui-badge layui-bg-cyan" code="@Html.Raw(bda.CODE)" myname="@Html.Raw(bda.NAME)" site="@Html.Raw(bda.SITE)">@Html.Raw(bda.NAME)</span><span>&nbsp;</span>
                                    }
                                    else
                                    {
                                        <span class="layui-badge layui-bg-blue" code="@Html.Raw(bda.CODE)" myname="@Html.Raw(bda.NAME)" site="@Html.Raw(bda.SITE)">@Html.Raw(bda.NAME)</span><span>&nbsp;</span>
                                    }
                                }
                            }
                        </div>
                        <div class="layui-input-inline" style="color:#46819e">
                            <a href="javascript:ShowEditButton()">
                                <i class="layui-icon">
                                    &#xe639;
                                </i>编辑按钮
                            </a>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block my_form_iterm">
                        <button class="layui-btn layui-btn-ok" lay-submit lay-filter="formDemo">保存</button>
                        <button onclick="parent.Closed()" type="button" class="layui-btn layui-btn-primary">取消</button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block my_form_iterm">
                        <font color="green">注释：目前界面菜单只支持3级，请不要超过3级！</font>
                    </div>
                </div>

                @if (isok == "1")
                {
                    <div class="layui-form-item">
                        <label class="layui-form-label erro_msg">错误提示：</label>
                        <div class="layui-input-block my_form_iterm erro_msg">
                            @Html.Raw(ViewBag.Msg)
                        </div>
                    </div>
                }
            </form>
        </div>
    </div>
</div>
<script>
    var data = [{ "xh": 1, "name": "新增", "code": "Add", "site": "1" },
        { "xh": 2, "name": "编辑", "code": "Edit", "site": "1" },
        { "xh": 3, "name": "详细", "code": "Details", "site": "1" },
        { "xh": 4, "name": "删除", "code": "Delete", "site": "1" },
        { "xh": 5, "name": "审核", "code": "Check", "site": "1" },
        { "xh": 6, "name": "导出", "code": "Export", "site": "1" },
        { "xh": 7, "name": "按钮1", "code": "Other1", "site": "1" },
        { "xh": 8, "name": "按钮2", "code": "Other2", "site": "1" },
        { "xh": 9, "name": "按钮3", "code": "Other3", "site": "1" },
        { "xh": 10, "name": "按钮4", "code": "Other4", "site": "1" },
        { "xh": 11, "name": "按钮5", "code": "Other5", "site": "1" },
        { "xh": 12, "name": "按钮6", "code": "Other6", "site": "1" },
        { "xh": 13, "name": "按钮7", "code": "Other7", "site": "1" },
        { "xh": 14, "name": "按钮8", "code": "Other8", "site": "1" },
        { "xh": 15, "name": "按钮9", "code": "Other9", "site": "1" }
    ];

</script>
@if (Model.buttonlist != null)
{
    foreach (CRM.Core.Model.Map.Bas_Permisson_Button bda in Model.buttonlist)
    {
        <script>
            @Html.Raw("data.filter(m => m.code =='"+bda.CODE+ "')[0].site='"+ bda.SITE +"';")
            @Html.Raw("data.filter(m => m.code =='"+bda.CODE+ "')[0].LAY_CHECKED=true;")
            @if (bda.CODE.IndexOf("Other") > -1)
            {
                @Html.Raw("data.filter(m => m.code =='" + bda.CODE + "')[0].rname='" + bda.NAME + "';");
            }
        </script>
    }
}
<script>
    var table;
    layui.use(["tree", 'form', 'table'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var tree = layui.tree;
        table = layui.table;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            if (isOk == "1") {

                //console.log(data.field);
                var mydata = data.field;
                if (mydata.ISFORBIDDEN == "on")
                    mydata.ISFORBIDDEN = "0";
                else
                    mydata.ISFORBIDDEN = "1";

                if (mydata.ISHIDDEN == "on")
                    mydata.ISHIDDEN = "0";
                else
                    mydata.ISHIDDEN = "1";

                if (mydata.isblank == "on")
                    mydata.isblank = "1";
                else
                    mydata.isblank = "0";

                mydata.buttonlist = [];
                $("[myname]").each(function (n, mda) {
                    mydata.buttonlist[n] = { NAME: $(this).attr("myname"), CODE: $(this).attr("code"), SITE: $(this).attr("site") };
                });
                //console.log(mydata);
                var loadingindex = layer.load(3, { shade: true });
                $.ajax({
                    type: "POST",
                    url: "Save",
                    data: mydata,
                    dataType: "json",
                    success: function (da) {
                        layer.close(loadingindex);
                        if (da.result == true) {
                            parent.layer.msg('操作成功！', { icon: 1 });
                            parent.TableReload();
                            parent.Closed();
                        } else {
                            layer.msg(da.retmsg, { icon: 2 });
                        }
                    },
                    error: function () {
                        layer.close(loadingindex);
                        layer.msg('操作失败！', { icon: 2 });
                    }
                });
                return false;
            } else {
                layer.msg('系统错误!请关闭编辑页重试！', { icon: 2 });
                return false;
            }
        });
        $.ajax({
            type: "POST",
            url: "GetList",
            dataType: "json",
            success: function (da) {
                if (da.code == 0) {
                    var modelid = "@Html.Raw(Model.ID)";
                    var treedata = [{ title: '根节点', id: 0, spread: true, children: [], type: 0 }];
                    $(da.data.filter(m => m.PRENTID == 0)).each(function (n, wa) {
                        treedata[0].children[n] = {
                            title: wa.NAME
                            , id: wa.ID
                            , spread: true
                            , type: wa.TYPE
                            , children: []
                            , disabled: (modelid != "1" && (wa.ID == parseInt(modelid) || wa.PARENTSTR.indexOf("[" + modelid + "]") > -1)) ? true : false
                        }
                        if (wa.ISHAVECHILD)
                            Child(wa.ID, treedata[0].children[n]);
                    });

                    function Child(parendid, iterm) {
                        $(da.data.filter(m => m.PRENTID == parendid)).each(function (n, wa) {
                            iterm.children[n] = {
                                title: wa.NAME
                                , id: wa.ID
                                , spread: true
                                , type: wa.TYPE
                                , children: []
                                , disabled: (modelid != "1" && (wa.ID == parseInt(modelid) || wa.PARENTSTR.indexOf("[" + modelid + "]") > -1)) ? true : false
                            }
                            if (wa.ISHAVECHILD)
                                Child(wa.ID, iterm.children[n]);
                        });
                    }
                    //console.log(treedata);
                    //开启节点操作图标
                    tree.render({
                        elem: '#test9'
                        , data: treedata
                        , id: "demoId"
                        , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
                        //, edit: ['add', 'update', 'del'] //操作节点的图标
                        , click: function (obj) {
                            //console.log("你点击了");
                            $(".treeCooseColor").removeClass("treeCooseColor");
                            $("[data-id='" + obj.data.id + "']").children().first().addClass("treeCooseColor");
                            //choosenode = obj.data;
                            $("#PRENTID").val(obj.data.id);
                            $("#TYPE").val(obj.data.type + 1);
                        }
                    });
                    var checkId = "@Html.Raw(Model.PRENTID!=0? Model.PRENTID:(Request.QueryString["pid"]!=null?Convert.ToDecimal(Request.QueryString["pid"]): Convert.ToDecimal(0)))";
                    if (checkId == "")
                        checkId = "1";
                    //console.log($("[data-id='" + checkId + "']").children().first().find(".layui-tree-txt").html());
                    $("[data-id='" + checkId + "']").children().first().find(".layui-tree-txt").click();
                    //tree.setChecked('demoId', parseInt(checkId)); //单个勾选 id 为 1 的节点

                } else {
                    layer.msg(da.retmsg, { icon: 2 });
                }
            },
            error: function () {
                layer.msg('获取权限菜单失败！', { icon: 2 });
            }
        });


        table.render({
            elem: '#mytable'
            , data: data
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , limit: 200
            , cols: [[
                { type: 'checkbox' },
                { field: 'xh', width: 60, title: '序号' }
                , { field: 'name', width: 80, title: '名称' }
                , { field: 'code', width: 80, title: '编码' }
                , { field: 'rname', width: 160, title: '其他名称', edit: 'text' }
                , { field: 'site', title: '显示位置', templet: '#siteTpl', align: "center" }
            ]]
        });

        form.on('checkbox(site)', function (obj) {
            console.log(obj);
            var code = obj.elem.getAttribute("code");
            var value = obj.elem.getAttribute("value");
            var item = data.find(x => x.code == code);
            if (obj.elem.checked) {
                item.site += ("," + value);
            } else {
                item.site = item.site.replace(value, "").replace(",", "");
            }
            if (item.site == "") {
                item.site = "1";
            }
            console.log(data);
        });

        //table.on('row(mytable)', function (obj) {
        //    var data = obj.data;
        //    //console.log(data);
        //    //标注选中样式
        //    obj.tr.addClass('self-table-click').siblings().removeClass('self-table-click');
        //    selectRow = data;
        //});
    });
    function ShowEditButton() {
        layer.open({
            type: 1,
            content: $('#buttoneditdiv'),
            title: '<i class="layui-icon layui-icon-fonts-clear" style="font-size: 16px; color: #1E9FFF;"></i>&nbsp;<span style="font-size: 16px; ">编辑按钮</span>',
            area: ['700px', '450px'],
            btn: ['确定', '取消'],
            yes: function (index, layero) {
                $("#buttonlist").html("");
                var checkdata = table.checkStatus("mytable");
                //console.log(checkdata.data);
                var html = "";
                var isok = true;

                $(checkdata.data).each(function (n, ms) {
                    if (ms.code.indexOf("Other") > -1 && $.trim(ms.rname) == "") {
                        layer.msg("自定义按钮，请输入名称！", { icon: 2 });
                        isok = false;
                        return false;
                    }
                    console.log(ms);
                    if (ms.code.indexOf("Other") > -1)
                        html += '<span class="layui-badge layui-bg-cyan" code="' + ms.code + '" myname="' + ms.rname + '" site="' + ms.site + '">' + ms.rname + '</span>&nbsp;';
                    else
                        html += '<span class="layui-badge layui-bg-blue" code="' + ms.code + '" myname="' + ms.name + '" site="' + ms.site + '">' + ms.name + '</span>&nbsp;';
                });
                if (isok) {
                    $("#buttonlist").append(html);
                    layer.close(index);
                }
            },
            btn2: function (index, layero) {
            }
        });
    }
</script>


@section outbody
{
    <div id="buttoneditdiv" style="display:none;" class="layui-form">
        <table class="layui-hide" id="mytable" lay-filter="mytable"></table>
    </div>

}
<script type="text/html" id="siteTpl">
    <div class="layui-btn-container" >
        <input type="checkbox" code="{{d.code}}" value="1" name="site[1]" lay-skin="primary" lay-filter="site" title="头部" {{# if(d.site.indexOf("1") != -1){ }} checked {{# } }}>
        <input type="checkbox" code="{{d.code}}" value="2" name="site[2]" lay-skin="primary" lay-filter="site" title="列表" {{# if(d.site.indexOf("2") != -1){ }} checked {{# } }}>
    </div>
</script>