<%@include file="/WEB-INF/common/layouts/common.jsp" %>
<%@ page language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <title></title>
    <%--<link rel="stylesheet" href="${static_common}/layui/layui/css/layui.css" type="text/css">--%>
    <%--<script src="${static_common}/layui/layui/layui.js"></script>--%>
    <script src="${static_common}/treeTable/jquery.treeTable.js"></script>
    <script src="${ctx}/resources/customize/zTree/js/jquery.ztree.all-3.5.js"></script>
    <script src="${ctx}/resources/customize/zTree/js/tree2.common.js"></script>
    <%@include file="/WEB-INF/common/layouts/import-css2.jsp" %>
    <style>
        .cont{
            display: flex;width: 50%;margin: 50px auto
        }
        .flx_1{
            flex: 1;
        }
        .flx_1 p{
            font-size: 16px;
            font-weight: bolder;
        }
        .layui-btn-normal{
            height: 30px;
            line-height: 30px;
            padding: 0 30px;
            border-radius: 5px;
            margin-top: 60px;
        }
        .demo-tree-more{
            margin-top: 30px;
        }
        .navbar .nav{
            margin-top:5px !important;
        }
        .collapse{
            display: block !important;
        }
    </style>
</head>
<body>
<%--<table id="demoTreeTb"></table>--%>

<form id="input_form" class="form-horizontal valid"
      action="${ctx}/customer/addNewCustomer"
      method="post">
    <div class="cont" >
        <div class=" flx_1">
            <p>平台组</p>
            <div id="plat" class="demo-tree-more">
                <div id="treeContainer" class="ui-layout-west"></div>
            </div>
            <button type="button" class="layui-btn layui-btn-normal" onclick="saveRule()">保存</button>
        </div>
        <div class=" flx_1">
            <p>直销对接组</p>
            <div id="sales" class="demo-tree-more">
                <div id="treeContainer2" class="ui-layout-west"></div>
            </div>
        </div>

    </div>
    <input type="hidden" id="platDeptId" name="platDeptId" value="" />
    <input type="hidden" id="saleDeptId" name="saleDeptId" value="" />
    <input type="hidden" id="platDeptName" name="platDeptName" value="" />
    <input type="hidden" id="saleDeptName" name="saleDeptName" value="" />
</form>

<script>
    var async = ${not empty param.async and param.async eq true};
    $(function () {
        // 渲染表格
        var zNodes = [
            <c:forEach items="${trees}" var="m">
            {
                "id": "${m.id}",
                "pId": "${m.parentId}",
                "name": "${m.name}",
                "open": true,
                "root": ${m.root}
            },
            </c:forEach>
        ];

        var zNodes2 = [
            <c:forEach items="${trees}" var="m">
            {
                "id": "${m.id}",
                "pId": "${m.parentId}",
                "name": "${m.name}",
                "open": true,
                "root": ${m.root}
            },
            </c:forEach>
        ];

        $.zTree.initMovableTree({
            zNodes: zNodes,
            urlPrefix: "${ctx}/department",
            async: async,
            onlyDisplayShow: ${empty param['show'] ? '0' : param['show']},
            autocomplete: {
                enable: false
            },
            editable: true,//$("#treeEditFlag").is(":checked"),
            containerId: 'treeContainer',
            maxLevel: 10,
            setting: {
                callback: {
                    onClick: function (event, treeId, treeNode, clickFlag) {
//                        alert(treeNode.id);
                        //保存id
                        $("#platDeptId").val(treeNode.id);
                        $("#platDeptName").val(treeNode.name);
                    }
                }
            }
        });

        $.zTree.initMovableTree({
            zNodes: zNodes2,
            urlPrefix: "${ctx}/department",
            async: async,
            onlyDisplayShow: ${empty param['show'] ? '0' : param['show']},
            autocomplete: {
                enable: false
            },
            editable: true,//$("#treeEditFlag").is(":checked"),
            containerId: 'treeContainer2',
            maxLevel: 10,
            setting: {
                callback: {
                    onClick: function (event, treeId, treeNode, clickFlag) {
                        $("#saleDeptId").val(treeNode.id);
                        $("#saleDeptName").val(treeNode.name);
                    }
                }
            }
        });

    });

    function saveRule(){
        var platDeptId = $("#platDeptId").val();
        var saleDeptId = $("#saleDeptId").val();
        var platDeptName = $("#platDeptName").val();
        var saleDeptName = $("#saleDeptName").val();
        if(platDeptId == undefined || platDeptId == ''){
            alert("请选择平台组");
            return false;
        }
        if(saleDeptId == undefined || saleDeptId == ''){
            alert("请选择直销组");
            return false;
        }

        $.ajax({
            url: '${ctx}/platformmanagement/saveRule',
            data: {"platDeptId": platDeptId, "saleDeptId": saleDeptId, "platDeptName": platDeptName, "saleDeptName": saleDeptName},
            type: "GET",
            success: function (data) {
                if (data == 'success') {
                    alert("保存成功");
                    window.location.href = "${ctx}/platformmanagement/ruleList";
                } else {
                    alert("操作失败，" + data.msg);
                }
            }
        });
    }
</script>

</body>

</html>
