<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html >
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>部门与监测点的绑定</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/animate/animate.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/iconfont/iconfont.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.css">

    <style type="text/css">
        #rightContent label {
            max-width: none;
        }

        .btn {
            padding: 2px 6px;
        }

        .table {
            margin-bottom: 5px;
            border-collapse: separate;
            border-color: #006a6a;
            font-size: 12px;
        }

        .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
            padding-left: 0px !important;
        }

        .width1 {
            width: 150px
        }

        .width2 {
            width: 250px
        }

        .width3 {
            width: 145px
        }

        .left-menus {
            overflow-y: scroll;
            z-index: 904;
            bottom: 35px;
            left: 20px;
            width: 240px;
            padding-top: 0;
            background: rgba(255, 255, 255, 0.3);
        }

        .font12 {
            text-align: right;
            font-weight: normal;
        }

        #zd, #jcd {
            font-size: 14px;
            font-weight: bolder;
        !important
        }
    </style>
</head>
<body>
<div class="left-menu" style="color:#333;top:5%;bottom:15%;overflow-y:scroll;">
    <label style="font-size: 14px;">基础监测点：</label>
    <input style="width:155px;" id="search_value" type="text" value="" placeholder="请输入关键词"/>
    <input type="button" value="搜索"  class="btn themeBGColor" onclick="javascript: searchNode(search_value.value)"
           style="padding:0 5px;">
    <div id="tree" class="ztree" style="padding:8px 2px;"></div>
</div>
<div class="left-menu mt15" style="color:#333;top:85%;height:10%;overflow-y:hidden">
    <div class="layui-form-item" id="buttonarea">
        <div style="width:200px;">
            <button type="button" id="noBand" onclick="noBand()" class="btn themeBGColor">未绑定
            </button>
            <button type="button" id="otherBand" onclick="otherBand()" class="btn themeBGColor">
                其他绑定
            </button>
        </div>
    </div>
</div>
<div class="fl" style="margin-top: 15%;margin-left: 35%;">
    <table class="table" rules="groups" style="width:64%">
        <tr>
            <td align="right" class="width1">所属部门:</td>
            <td align="left" class="width2"><label class="width3" name="deptname" id="deptname"></label></td>
        </tr>
        <tr>
            <td align="right" class="width1">所属行政:</td>
            <td align="left" class="width2"><label class="width3" name="areaname" id="areaname" disabled></label></td>
        </tr>
        <tr>
            <td align="right" class="width1">部门类型:</td>
            <td align="left" class="width2"><label class="width3" name="customDepts" id="customDepts" disabled></label></td>
        </tr>
    </table>
    <div style="margin-left: 17%;">
        <button type="button" id="getBand" class="btn themeBGColor" style="margin-left:5px">进行绑定-------></button>
        <button type="button" id="getchangBand" class="btn themeBGColor" style="display:none;margin-left:5px">换绑操作-------></button>
    </div>
    <div style="margin-left: 17%;margin-top: 5%">
        <button type="button" id="closeBand" class="btn themeBGColor" style="margin-left:5px;"><-------解除绑定</button>
    </div>
</div>
<div class="left-menu" style="color:#333;top:5%;bottom:15%;overflow-y:scroll;margin-left: 65%;">
    <label style="font-size: 14px;">目标检测点:</label>
    <input style="width:155px;" id="search_value1" type="text" value="" placeholder="请输入关键词"/>
    <input type="button" value="搜索" class="btn themeBGColor" onclick="javascript: searchNode1(search_value1.value)"
           style="padding:0 5px;">
    <div id="tree1" class="ztree" style="padding:8px 2px;"></div>
</div>
<select style="display: none" id="areaIndex">
</select>
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
<script src="${ctx}/js/plugin/bootstrap/jquery.dataTables.min.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/plugin/xss/xss.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.excheck.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script>
    var deptsIndex = parent.deptsIndex;
    var customDept;
    var isother = 0;//0表示未绑定的，1表示其他绑定的
    //获取当前父节点的area
    var area = "";
    $(document).ready(function () {
        getdeptsAll(deptsIndex);
    })

    function getArea(parentNodeId) {
        $.ajax({
            type: "POST",
            url: "/pqs9900/depts/getAllArea",
            aysnc: false,
            data: {"deptsIndex": parentNodeId},
            success: function (data) {
                if (data.parentNodeId == 0) {
                    area = 0;
                } else {
                    area = data.area;
                }
                getTree(area, customDept, isother);
                getmyselfTree(area);
            }
        })
    }

    //获取当前部门的所有信息
    function getdeptsAll(deptsIndex) {
        $.ajax({
            type: "POST",
            url: "/pqs9900/depts/getAllArea",
            aysnc: false,
            data: {"deptsIndex": deptsIndex},
            success: function (data) {
                var parentNodeId = data.parentNodeId;
                customDept = data.customDept;
                if (customDept == 0) {
                    $("#noBand").attr("style", "display:block;margin-left: 19%;");
                    $("#otherBand").attr("style", "display:block;margin-left: 53%;margin-top: -13%;");
                    $("#customDepts").text("非自定义");
                } else {
                    $("#noBand").attr("style", "display:none;");
                    $("#otherBand").attr("style", "display:none;");
                    $("#customDepts").text("自定义");
                }
                getArea(parentNodeId);
                $("#deptname").text(data.deptsName);
                $.each(data.areas, function (i, item) {
                    if(item.dicIndex == data.area){
                        $("#areaname").text(item.dicName)
                    }
                })

            }
        })
    }

    //部门与监测点的联动
    var treeObj = null;
    var treeObj1 = null;
    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        check: {
            enable: true,
            autoCheckTrigger: false,
            chkStyle: "checkbox",
            chkboxType: {"Y": "ps", "N": "ps"}
        }
    };
    //左侧
    function getTree(area, customDept, isother) {
        jQuery.ajax({
            type: 'POST',
            dataType: "json",
            url: '/pqs9900/depts/deptsLinetree',
            data: {
                area: area,
                deptsIndex: deptsIndex,
                customDept: customDept,
                isother: isother
            },
            async: false,
            error: function () {},
            success: function (data) {
                var datalist = [];
                for (var i = 0; i < data.length; i++) {
                    var str = '';

                    str += '{' + "id:" + data[i].id;
                    str += ',' + "name:'" + data[i].name + "'";
                    str += ',' + "nodeIndex:" + data[i].nodeIndex;
                    str += ',' + "nodeType:" + data[i].nodeType;
                    str += ',' + "ppId:" + data[i].ppId;
                    if (data[i].nodeType == "0" || data[i].nodeType == "1") {
                        str += ',' + "open:" + true;
                    } else {
                        str += ',' + "open:" + false;
                    }
                    str += ',' + "describe:" + data[i].describe;
                    str += ',' + "rd_Index:'" + data[i].rdIndex + "'";
                    str += ',' + "pId:" + data[i].pId + '}';
                    datalist.push(str);
                }
                datalist = eval('[' + datalist + ']');// string->json数组
                var zNodes = datalist;

                treeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
            }
        });

//
//            $(document).ready(function(){
//                treeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
//            });
    }

    //进行左侧树的切换
    function noBand() {
        isother = 0;
        getTree(area, customDept, isother);
        $("#getBand").attr("style", "display:block;margin-left:5px");
        $("#getchangBand").attr("style", "display:none;margin-left: 62%;margin-left:5px");
    }

    function otherBand() {
        isother = 1;
        getTree(area, customDept, isother);
        $("#getBand").attr("style", "display:none;margin-left:5px");
        $("#getchangBand").attr("style", "display:block;margin-left: 62%;margin-left:5px");
    }

    //右侧
    function getmyselfTree(area) {
        jQuery.ajax({
            type: 'POST',
            dataType: "json",
            url: '/pqs9900/depts/getmyselfTree',
            data: {
                area: area,
                deptsIndex: deptsIndex
            },
            async: false,
            error: function () {},
            success: function (data) {
                var datalist = [];
                for (var i = 0; i < data.length; i++) {
                    var str = '';

                    str += '{' + "id:" + data[i].id;
                    str += ',' + "name:'" + data[i].name + "'";
                    str += ',' + "nodeIndex:" + data[i].nodeIndex;
                    str += ',' + "nodeType:" + data[i].nodeType;
                    str += ',' + "ppId:" + data[i].ppId;
                    if (data[i].nodeType == "0" || data[i].nodeType == "1") {
                        str += ',' + "open:" + true;
                    } else {
                        str += ',' + "open:" + false;
                    }
                    str += ',' + "describe:" + data[i].describe;
                    str += ',' + "rd_Index:'" + data[i].rdIndex + "'";
                    str += ',' + "pId:" + data[i].pId + '}';
                    datalist.push(str);
                }
                datalist = eval('[' + datalist + ']');// string->json数组
                var zNodes = datalist;

                treeObj1 = $.fn.zTree.init($("#tree1"), setting, zNodes);
            }
        });

//
//            $(document).ready(function(){
//                treeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
//            });
    }

    // 模糊搜索name满足条件的节点
    function searchNode(value) {
        if (value == "") return;

        // 获取搜索的节点
        var nodes = treeObj.getNodesByParamFuzzy("name", value);
        // 关闭所有节点的高亮
        var allNodes = treeObj.transformToArray(treeObj.getNodes());
        for (var i = 0; i < allNodes.length; i++) {
            allNodes[i].highlight = false;
            treeObj.updateNode(allNodes[i]);
        }
        // 展开第一层节点
        treeObj.expandAll(false);
        treeObj.expandNode(treeObj.getNodes()[0], true);
        // 高亮并展开搜索到的节点
        for (var i = 0; i < nodes.length; i++) {
            nodes[i].highlight = true;
            treeObj.updateNode(nodes[i]); // 更新节点，让高亮生效
            treeObj.expandNode(nodes[i].getParentNode(), true);
        }
    }

    // 模糊搜索name满足条件的节点
    function searchNode1(value) {
        if (value == "") return;

        // 获取搜索的节点
        var nodes = treeObj1.getNodesByParamFuzzy("name", value);
        // 关闭所有节点的高亮
        var allNodes = treeObj1.transformToArray(treeObj1.getNodes());
        for (var i = 0; i < allNodes.length; i++) {
            allNodes[i].highlight = false;
            treeObj1.updateNode(allNodes[i]);
        }
        // 展开第一层节点
        treeObj1.expandAll(false);
        treeObj1.expandNode(treeObj1.getNodes()[0], true);
        // 高亮并展开搜索到的节点
        for (var i = 0; i < nodes.length; i++) {
            nodes[i].highlight = true;
            treeObj1.updateNode(nodes[i]); // 更新节点，让高亮生效
            treeObj1.expandNode(nodes[i].getParentNode(), true);
        }
    }

    //绑定操作
    $("#getBand").click(function() {
        var treecheck = [];
        var zTree = jQuery.fn.zTree.getZTreeObj("tree");
        var totalcount = zTree.getCheckedNodes(true).length;
        if (zTree != null) {
            var nodes = zTree.getCheckedNodes(true);
            for (var i = 0; i < totalcount; i++) {
                if (nodes[i].isParent == true) {

                } else {
                    treecheck.push(nodes[i].nodeIndex);
                }
            }
            if(treecheck.length == 0){
                layer.msg('请至少勾选一项',{icon:2,time:1000});
            }else if(totalcount < 5){
                layer.msg('暂未选择监测点！',{icon:2,time:1000});
            }else{
                $.ajax({
                    url:'/pqs9900/deptsline/getBindLine',
                    type:'POST',
                    dataType:"text",
                    data:{
                        deptsIndex:deptsIndex,
                        treecheck:JSON.stringify(treecheck)
                    },
                    success:function(data){
                        var info=$.parseJSON(data);
                        if(info.code==200){
                            layer.msg(info.message,{icon:1,time:2000}, function () {
                                getTree(area, customDept, isother);
                                getmyselfTree(area);
                            });
                        }else if(info.code==400){
                            layer.msg(info.message,{icon:2,time:1000});
                        }else{
                            layer.msg(info.message,{icon:2,time:1000});
                        }
                    }

                });
            }
        }
    })
    //换绑操作
    $("#getchangBand").click(function() {
        var treecheck = [];
        var zTree = jQuery.fn.zTree.getZTreeObj("tree");
        var totalcount = zTree.getCheckedNodes(true).length;
        if (zTree != null) {
            var nodes = zTree.getCheckedNodes(true);
            for (var i = 0; i < totalcount; i++) {
                if (nodes[i].isParent == true) {

                } else {
                    treecheck.push(nodes[i].nodeIndex);
                }
            }
            if(treecheck.length == 0){
                layer.msg('请至少勾选一项',{icon:2,time:1000});
            }else if(totalcount < 5){
                layer.msg('暂未选择监测点！',{icon:2,time:1000});
            }else{
                $.ajax({
                    url:'/pqs9900/deptsline/changeBindLine',
                    type:'POST',
                    dataType:"text",
                    data:{
                        deptsIndex:deptsIndex,
                        treecheck:JSON.stringify(treecheck)
                    },
                    success:function(data){
                        var info=$.parseJSON(data);
                        if(info.code==200){
                            layer.msg(info.message,{icon:1,time:2000}, function () {
                                getTree(area, customDept, isother);
                                getmyselfTree(area);
                            });
                        }else if(info.code==400){
                            layer.msg(info.message,{icon:2,time:1000});
                        }else{
                            layer.msg(info.message,{icon:2,time:1000});
                        }
                    }

                });
            }
        }
    })
    //解除绑定
    $("#closeBand").click(function() {
        var treecheck = [];
        var zTree = jQuery.fn.zTree.getZTreeObj("tree1");
        var totalcount = zTree.getCheckedNodes(true).length;
        if (zTree != null) {
            var nodes = zTree.getCheckedNodes(true);
            for (var i = 0; i < totalcount; i++) {
                if (nodes[i].isParent == true) {

                } else {
                    treecheck.push(nodes[i].nodeIndex);
                }
            }
            if(treecheck.length == 0){
                layer.msg('请至少勾选一项',{icon:2,time:1000});
            }else if(totalcount < 5){
                layer.msg('暂未选择监测点！',{icon:2,time:1000});
            }else{
                $.ajax({
                    url:'/pqs9900/deptsline/deleteBindLine',
                    type:'POST',
                    dataType:"text",
                    data:{
                        deptsIndex:deptsIndex,
                        treecheck:JSON.stringify(treecheck)
                    },
                    success:function(data){
                        var info=$.parseJSON(data);
                        if(info.code==200){
                            layer.msg(info.message,{icon:1,time:2000}, function () {
                                getTree(area, customDept, isother);
                                getmyselfTree(area);
                            });
                        }else if(info.code==400){
                            layer.msg(info.message,{icon:2,time:1000});
                        }else{
                            layer.msg(info.message,{icon:2,time:1000});
                        }
                    }

                });
            }
        }
    })
</script>
</body>
</html>