@{
    ViewBag.Title = "部门架构";
    ViewBag.FullTitle = "系统管理";

    Layout = "~/Views/Shared/_MainLayout.cshtml";
}
@section CSS{
    <link href="~/Statics/libs/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <link href="~/Style/Css/departmentView.css" rel="stylesheet" />
}
@section JS{

    <script src="~/Statics/libs/zTree/js/jquery.ztree.all-3.5.min.js?v=@(HtmlUtil.JsVersion)"></script>
    <script language="JavaScript">
    <!--
        var setting = {
            edit: {
                enable: true,
                showRemoveBtn: false,
                showRenameBtn: false,
                drag: {
                    isCopy: false,
                    isMove: true
                }
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: NodeClick,
                beforeDrop: zTreeBeforeDrop
            }
        };

        $(document).ready(function () {
            loadTree();
            $('#btnAdd').toggle();
            $('#btnDelete').toggle();
            $('#btnEdit').toggle();
            $('#btnUser').toggle();
            $('#btnSubmit').toggle();
            $('#btnCancel').toggle();
            $("#areaCode").hide();
            $("#areaDescription").hide();

            $("#txtType").change(function () {
                if ($(this).val() == "营业部") {
                    $("#areaCode").show();
                    $("#areaDescription").show();
                }
                else {
                    $("#areaCode").hide();
                    $("#areaDescription").hide();
                }
            });
        });
        function loadTree() {
            $.post("departmentjson", {}, function (data, textStatus) {
                this;
                var nodes = eval(data);
                $.fn.zTree.init($("#treeDemo"), setting, nodes.obj);
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");

                var treenodes = zTree.getNodes();
                if (treenodes.length > 0) zTree.expandNode(treenodes[0]);
            });
        }
        function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
            if ((targetNode == null || (moveType != "inner" && !targetNode.parentTId))) return false;

            treeNodes[0].pId = targetNode.id;
            $.post("updatedepartmentparent", { id: treeNodes[0].id, pid: targetNode.id }, function (data, textStatus) {
                this;
                var a = eval(data);
                if (a.success == false) {
                    alert(a.obj);
                    return;
                }
            });
            return true;
        };
        function NodeClick(event, treeId, treeNode, clickFlag) {
            nodeClick(treeNode);
        }
        function nodeClick(treeNode) {
            document.getElementById('deptid').value = treeNode.id;

            if (document.getElementById('txtName') != undefined) {
                document.getElementById('txtName').value = treeNode.name;
                $("#txtType").val(treeNode.tag);

                $("#txtAddress").val(treeNode.area);
                $("#txtTel").val(treeNode.tel);
                $("#txtCode").val(treeNode.code);
                $("#txtDescription").val(treeNode.description);
            }

            if (treeNode.tag == "营业部") {
                $("#areaCode").show();
                $("#areaDescription").show();
            }
            else {
                $("#areaCode").hide();
                $("#areaDescription").hide();
            }



            $('#pid').val('');

            $('#btnAdd').show();
            if (treeNode.name != "ROOT") {
                $('#btnDelete').show();
                $('#btnEdit').show();
                $('#btnUser').show();

                $('#departmentUserArea').show();
            }
            else {
                $('#btnDelete').hide();
                $('#btnEdit').hide();
                $('#btnUser').hide();

                $('#departmentUserArea').hide();
            }
            $('#btnSubmit').hide();
            $('#btnCancel').hide();
            getusers(treeNode.id);
        }
        function EditNode() {
            $('#btnSubmit').show();
            $('#btnCancel').show();
            $('#btnAdd').hide();
            $('#btnDelete').hide();
            $('#btnEdit').hide();
            $('#btnUser').hide();
        }
        function AfterEditNode() {
            $('#btnSubmit').hide();
            $('#btnCancel').hide();
            $('#btnAdd').show();
            $('#btnDelete').show();
            $('#btnEdit').show();
            $('#btnUser').show();
        }
        function Cancel() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes = zTree.getSelectedNodes();
            if (nodes.length > 0) {
                var node = nodes[0];
                nodeClick(node);
            }

        }
        function Submit() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes = zTree.getSelectedNodes();
            if (nodes.length == 0) {
                alert("请先选择一个节点");
            }
            var node = nodes[0];
            var id = $("#deptid").val();
            var pid = $("#pid").val();

            $.post("updatedepartment"
                , { id: id, pid: pid, name: document.getElementById('txtName').value, departmentType: $('#txtType').val(), tel: $('#txtTel').val(), area: $('#txtAddress').val(), code: $('#txtCode').val(), description: $('#txtDescription').val() }
                , function (data, textStatus) {
                    this;
                    var a = eval(data);
                    if (a.success == false) {
                        alert(a.obj);
                        return;
                    }
                    node = $.extend(node, a);
                    node.Name = document.getElementById('txtName').value;
                    node.Area = document.getElementById('txtAddress').value;
                    node.Tel = document.getElementById('txtTel').value;
                    node.Code = document.getElementById('txtCode').value;
                    node.DepartmentType = document.getElementById('txtType').value;
                    node.Description = document.getElementById('txtDescription').value;
                    if ($('#pid').val() == '') {

                        zTree.updateNode(node);
                    } else {
                        var c = { id: a.Id, pId: a.PId, name: a.Name, tag: a.DepartmentType, tel: a.Tel, area: a.Area, code: a.Code};
                        var n = zTree.addNodes(node, c, false);
                        var newnode = zTree.getNodeByParam("id", a.Id);
                        zTree.selectNode(newnode);

                        zTree.updateNode(newnode);
                        nodeClick(newnode);
                    }
                    main.message("修改成功");
                });
            AfterEditNode();
        }
        function AddChild() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes = zTree.getSelectedNodes();
            if (nodes.length == 0) {
                alert("请先选择父节点");
                return;
            }
            var node = nodes[0];
            EditNode();
            $('#txtName').val('');
            $('#deptid').val(0);
            $('#pid').val(node.id);

        }
        function DeleteNode() {


            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes = zTree.getSelectedNodes();
            if (nodes.length == 0) {
                alert("请先选择一个节点");
            }
            var node = nodes[0];
            if (!confirm("确认删除" + node.name + "?")) return false;
            var id = $("#deptid").val();
            $.post("deletedepartment", { id: id }, function (data, textStatus) {
                this;
                var a = eval(data);
                if (a.success == false) {
                    alert(a.obj);
                    return;
                }
                var newnode = zTree.getNodeByParam("id", node.pId);
                zTree.selectNode(newnode);
                nodeClick(newnode);
                zTree.removeNode(node);

            });
        }

        const consTpl = _.template($("#tmplView").html());
        function getusers(id) {
            $.post("departmentuser", { id: id }, function (data, textStatus) {
                this;
                var a = eval(data);

                if (a.success == false) {
                    alert(a.obj);
                    return;
                }
                var html = _.map(a.obj, x => {
                    return consTpl(x);
                }).join('');
                $("#usertbody").html(html);
            });
        }
        function EditUser() {
            var id = $("#deptid").val();
            if (id == "") { alert("请先选择一个部门"); return; }
            layer.open({
                type: 2,
                area: ['80%', '80%'],
                fixed: false, //不固定
                maxmin: true,
                content: 'DepartmentUserEdit/' + id
            });
        }
        //-->
    </script>
}
<div class="content_wrap row">
    <div class="col-md-2 yc-panel" style="min-height:450px;margin-right:20px;margin-left:20px;">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="col-md-9 infoDiv yc-panel" style="min-height: 450px;padding-left:10px;">
        @if (CurUser.系统管理.部门架构修改)
        {
            <div style="height: 50px; margin-top: -10px;padding-top:10px; margin-bottom: 10px; ">
                <input class="btn btn-primary" id="btnAdd" type="button" value="增加部门" onclick="AddChild();" />
                <input class="btn btn-primary" id="btnUser" type="button" value="调整部门人员" onclick="EditUser();" />
                <input class="btn btn-primary" id="btnEdit" type="button" value="编辑" onclick="EditNode();" />
                <input class="btn btn-primary" id="btnDelete" type="button" value="删除" onclick="DeleteNode();" />
                <input type="hidden" id="deptid" /><input type="hidden" id="pid" />
            </div>
        }

        <div class="col-md-5" id="departmentInfoArea">
            <div>
                <span class="badge badge-info" style="width:90px;height:30px;line-height:25px;background-color:#4b545c!important">部门信息</span><br /><br />
                <table class="form" style="width: 400px;">
                    <tr>
                        <td class="form-item">
                            部门类型：
                        </td>
                        <td>
                            <select name="txtType" id="txtType">
                                <option></option>
                                <option>总部</option>
                                <option>项目</option>
                                <option>部门</option>
                                <option>营业部</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="form-item">
                            部门名称：
                        </td>
                        <td>
                            <input type="text" id="txtName" style="margin-top:10px;" />
                        </td>
                    </tr>
                    <tr id="areaCode">
                        <td class="form-item">
                            部门代码：
                        </td>
                        <td>
                            <input type="text" id="txtCode" style="margin-top:10px;" />
                        </td>
                    </tr>
                    <tr>
                        <td class="form-item">
                            地址：
                        </td>
                        <td>
                            <input type="text" id="txtAddress" style="margin-top:10px;" />
                        </td>
                    </tr>
                    <tr>
                        <td class="form-item">
                            电话：
                        </td>
                        <td>
                            <input type="text" id="txtTel" style="margin-top:10px;" />
                        </td>
                    </tr>
                    <tr id="areaDescription">
                        <td class="form-item">
                            描述：
                        </td>
                        <td>
                            <input type="text" id="txtDescription" style="margin-top:10px;" />
                        </td>
                    </tr>
                </table>
            </div><br /><br />
            @if (CurUser.系统管理.部门架构修改)
            {
                <input id="btnSubmit" type="button" class="btn btn-primary" value="提交" onclick="Submit();" />
                <input id="btnCancel" type="button" class="btn btn-primary" value="放弃" onclick="Cancel();" />
            }
        </div>
        <div class="col-md-5" id="departmentUserArea">
            <div>
                <span class="badge badge-info" style="width:90px;height:30px;line-height:25px;background-color:#4b545c!important">部门人员</span><br /><br />
                <script id="tmplView" type="text/html">
                    <tr><td>${username} ${workno}</td>
                </script>
                <table class="table table-bordered table-striped" width="300">
                    <tr><td>姓名</td></tr>
                    <tbody id="usertbody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div><div>

</div>