<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<html>
<head>
    <title>缺陷类别列表</title>
    <meta charset="utf-8">
    <%@include file="../../jspf/comm.jspf" %>
    <%@ include file="../../jspf/ztreeCommom.jsp" %>
    <style>
        .body {
            overflow-x: hidden;
            overflow-y: hidden;
            height: calc(100vh - 0px);
        !important;
        }

        .content {
            /*margin-left: 20px;*/
            border-width: 0 0 0 1px;
            border-style: solid;
            border-color: #2e6da4;
            /*background-color: #2e6da4;*/
            height: calc(100vh - 50px);
        }

        .divCss {
            margin-top: 10px;
        }

        .control-label {
            margin-right: -25px;
        }

        .titleCss {
            text-align: center;
            vertical-align: middle;
            background-color: #2e6da4;
            color: #fff;
            font-size: 19px;
            font-weight: bold;
            height: 30px;
            margin-bottom: 10px;
            margin-top: 0px;
            width: 115.5%;
        }

        .treeBtn1 {
            margin-left: 10px;
            margin-top: 10px;
            margin-right: 10px;
            width: 42%;
        }

        .treeBtn {
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            width: 42%;
        }

        /*.zTreeDemo{
            height: 800px;
            overflow: auto;
        }*/


        #form1 {
            margin-top: 55px;
            margin-left: 20px;
            width: 100%;
        !important;
        }

        #ztree {
            margin-top: 10px;
            margin-left: -35px;
            height: calc(100vh - 180px);
            overflow: auto;
        !important;
        }

        #leftCol {
            background-color: #fff;
            height: calc(100vh - 20px);
        !important;

        }

        #key {
            margin-left: 10px;
            margin-bottom: 5px;
            width: 70%;
        !important;
        }

        #searchBtn {
            width: 20%;
        !important;
        }
    </style>
</head>
<body>
<div class="col-md-3" id="leftCol">
    <div class="row titleCss">
        &nbsp;缺陷类别列表
    </div>
    <div class="row form-inline">
        <input type="text" id="key" value="" class="input-sm empty" placeholder="缺陷类别名称"/>
        <button type="button" class="btn btn-primary btn-sm" id="searchBtn">查询</button>
    </div>
    <div class="row">
        <button type="button" class="btn  btn-success btn-sm treeBtn1" onclick="expandAll();">全部展开</button>
        <button type="button" class="btn  btn-success btn-sm treeBtn" onclick="collapseAll();">全部收缩</button>
    </div>
    <div class="row">
        <!--树-->
        <div class="zTreeDemo">
            <ul id="ztree" class="ztree"></ul>
        </div>
    </div>
</div>
<!--内容-->
<div class="col-md-8 content">
    <div class="row titleCss">
        &nbsp;缺陷类别信息
    </div>
    <form id="form1">
        <div class="row">
            <button type="button" class="btn btn-primary btn-sm" id="saveBtn">保存类别</button>
            <button type="button" class="btn btn-danger btn-sm" id="delBtn">删除类别</button>
            <button type="button" class="btn btn-warning  btn-sm" id="addBtn">添加类别</button>
        </div>
        <div class="row divCss">
            <div class="form-group">
                <label class="col-sm-2 control-label">类别代码：</label>
                <div class="col-sm-10"><input type="text" hidden id="id" name="id">
                    <input type="text" class="input-sm form-control" id="typeFlag" name="typeFlag">
                </div>
                <div class="col-sm-1"></div>
            </div>
        </div>
        <div class="row divCss">
            <div class="form-group">
                <label class="col-sm-2 control-label">类别名称：</label>
                <div class="col-sm-10">
                    <input type="text" class="input-sm form-control" id="typeName" name="typeName">
                </div>
                <div class="col-sm-1"></div>
            </div>
        </div>
        <div class="row divCss">
            <div class="form-group">
                <label class="col-sm-2 control-label">分值：</label>
                <div class="col-sm-4">
                    <input type="text" class="input-sm form-control" id="price" name="price">
                </div>
                <div class="col-sm-1"></div>
            </div>
        </div>
        <div class="row divCss">
            <div class="form-group">
                <label class="col-sm-2 control-label">类别排序：</label>
                <div class="col-sm-4">
                    <input type="number" class="input-sm form-control" id="typeSort" name="typeSort">
                </div>
                <div class="col-sm-1"></div>
            </div>
        </div>
        <div class="row divCss">
            <div class="form-group">
                <label class="col-sm-2 control-label">是否有效：</label>
                <div class="col-sm-2">
                    <select id="effective" class="input-sm form-control">                
                        <option value="1">有效</option>
                                       
                        <option value="0">无效</option>
                    </select>
                </div>
                <div class="col-sm-1"></div>
            </div>
        </div>
        <div class="row divCss">
            <div class="form-group">
                <label class="col-sm-2 control-label">备注：</label>
                <div class="col-sm-10">
                    <textarea class="input-sm form-control" rows="5" id="remark" name="recallReason"></textarea>
                </div>
                <div class="col-sm-1"></div>
            </div>
        </div>
        <%--<div style="margin-left:30px;margin-top: 50px;">

        </div>--%>
    </form>
</div>

<script type="text/javascript">
    var zNodes = [];
    var nodeList = [];

    function initTree() {
        zNodes = [];
        //获取所有缺陷类别列表
        $.ajax({
            url: "${path}/faultType/faultTypeList",
            type: "POST",
            data: {},
            async: true,
            success: function (result) {
                zNodes.push({id: 0, pId: 0, name: "缺陷类别列表", open: true});
                if (result != null) {
                    for (var i = 0; i < result.length; i++) {
                        var obj = {};
                        obj.id = result[i].id;
                        obj.pId = 0;
                        obj.name = result[i].typeName;
                        obj.price = result[i].price;
                        obj.typeFlag = result[i].typeFlag;
                        obj.typeSort = result[i].typeSort;
                        obj.remark = result[i].remark;
                        obj.effective = result[i].effective;
                        zNodes.push(obj);
                    }
                }
                $.fn.zTree.init($("#ztree"), setting, zNodes);
                var treeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);
                $("#delBtn").hide();
                var node;
                var currId = $("#id").val();
                if (currId != "" && currId != null) {
                    //修改选中已选节点
                    node = treeObj.getNodeByParam("id", currId);
                } else {
                    //添加选中父节点
                    node = treeObj.getNodeByParam("id", 0);
                }
                treeObj.selectNode(node, true);//将指定ID的节点选中
            }, error: function () {
                toastr.error("加载失败!");
            }
        });


    }

    function emptyEntity() {
        $("#id").val("");
        $("#typeFlag").val("");
        $("#typeName").val("");
        $("#price").val(0);
        $("#effective").val(1);
        $("#typeSort").val("");
        $("#remark").val("");
    }

    var setting = {
        view: {
            addHoverDom: false,
            removeHoverDom: false,
            selectedMulti: false,
            autoCancelSelected: false
        },
        check: {
            enable: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: "0"
            }
        },
        edit: {
            enable: false
        },
        callback: {
            beforeClick: function (treeId, treeNode) {
                if (treeNode.id != 0) {
                    $("#form1").show();
                    $("#id").val(treeNode.id);
                    $("#typeFlag").val(treeNode.typeFlag);
                    if (treeNode.typeFlag == "defined") {
                        $("#typeFlag").attr("readonly", true);
                        $("#delBtn").hide();

                    } else {
                        $("#typeFlag").attr("readonly", false);
                        $("#delBtn").show();
                    }
                    $("#typeSort").val(treeNode.typeSort);
                    $("#typeName").val(treeNode.name);
                    $("#price").val(treeNode.price);
                    $("#effective").val(treeNode.effective);
                    $("#remark").val(treeNode.remark);
                } else {
                    //$("#form1").hide();
                    $("#delBtn").hide();
                    emptyEntity();
                }
            }
        }
    };

    function focusKey(e) {
        if (key.hasClass("empty")) {
            key.removeClass("empty");
        }
    }

    function blurKey(e) {
        if (key.get(0).value === "") {
            key.addClass("empty");
        }
    }

    /**
     * 遍历树节点，将
     * 1.自身不满足搜索条件
     *     且
     * 2.其子节点不包含有满足条件的节点
     * 的节点加入到filterResult中
     *
     * @param node 查询的节点
     * @param inputStr 搜索条件
     * @param filterResult 过滤的结果集
     * @return 该节点是否满足条件
     */
    function filterNodes(node, inputStr, filterResult) {
        if (node != null) {
            //自身是否符合搜索条件
            var selfMatch = node.name.indexOf(inputStr) > -1;
            //子节点是否有满足的条件的节点
            var childMatch = false;

            var children = node.children;
            if (children != undefined) {
                for (index in children) {
                    childMatch = filterNodes(children[index], inputStr, filterResult) || childMatch;
                }
            }

            //自身不满足搜索条件 且其子节点不包含有满足条件的节点
            if (!selfMatch && !childMatch) {
                filterResult.push(node);
            }

            return selfMatch || childMatch;
        } else {
            return true;
        }
    }

    function searchNode() {
        var zTree = $.fn.zTree.getZTreeObj("ztree");
        var value = $("#key").val();
        if (value == "") {
            //显示隐藏的节点
            var nodes = zTree.getNodesByParam("isHidden", true);
            zTree.showNodes(nodes);
        } else {
            //显示隐藏的节点
            nodes = zTree.getNodesByParam("isHidden", true);
            zTree.showNodes(nodes);

            var root = zTree.getNodeByParam("level", "0");

            var hiddenNodes = new Array();


            filterNodes(root, value, hiddenNodes);
            zTree.hideNodes(hiddenNodes);
        }
        zTree.expandAll(true);
    }


    function updateNodes(highlight) {
        var zTree = $.fn.zTree.getZTreeObj("ztree");
        for (var i = 0, l = nodeList.length; i < l; i++) {
            zTree.showNode(nodeList[i]);
        }
    }

    // function getFontCss(treeId, treeNode) {
    //     return (!!treeNode.highlight) ? {color: "#A60000", "font-weight": "bold"} : {
    //         color: "#333",
    //         "font-weight": "normal"
    //     };
    // }
    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            searchNode();
        }
    });

    $(function () {
        key = $("#key");
        key.bind("focus", focusKey)
            .bind("blur", blurKey)
            .bind("propertychange", searchNode)
            .bind("input", searchNode);

        var url = window.location.href;
        var index = url.substring(url.lastIndexOf('?') + 1).replace("num=", "");
        if (index != null && index != "" && index.indexOf("add") != -1) {
            $("#addBtn").show();
        } else {
            $("#addBtn").hide();
        }
        if (index != null && index != "" && index.indexOf("save") != -1) {
            $("#saveBtn").show();
        } else {
            $("#saveBtn").hide();
        }
        if (index != null && index != "" && index.indexOf("del") != -1) {
            $("#delBtn").show();
        } else {
            $("#delBtn").hide();
        }

        initTree();

        function getEntity() {
            var entity = {};
            entity.id = $("#id").val();
            entity.typeFlag = $("#typeFlag").val();
            entity.typeName = $("#typeName").val();
            entity.price = $("#price").val();
            entity.typeSort = $("#typeSort").val();
            entity.effective = $("#effective").val();
            entity.remark = $("#remark").val();
            return entity;
        }

        $("#searchBtn").click(function () {
            searchNode();
        });


        $("#delBtn").click(function () {
            if ($("#id").val() == null || $("#id").val() == "") {
                toastr.warning("请选中一个缺陷类");
                return;
            }
            $.ajax({
                url: "${path}/faultType/delById",
                type: "POST",
                data: {id: $("#id").val()},
                success: function (result) {
                    if (result == 1) {
                        var ztree = $.fn.zTree.getZTreeObj("ztree");
                        var nodes = ztree.getSelectedNodes();
                        for (var i = 0, l = nodes.length; i < l; i++) {
                            ztree.removeNode(nodes[i]);
                        }
                        $("#id").val("");
                        //添加选中父节点
                        var node = ztree.getNodeByParam("id", 0);
                        ztree.selectNode(node, true);//将指定ID的节点选中
                        $("#form1").hide();
                        toastr.success("删除成功!")
                    } else {
                        toastr.error("删除失败!")
                    }
                }, error: function () {
                    toastr.error("删除失败!")
                }
            });
        });
        $("#addBtn").click(function () {
            emptyEntity();
        });

        $("#saveBtn").click(function () {
            var entity = getEntity();

            if (entity.typeFlag.length > 32) {
                toastr.warning("代码长度不超过32!");
                return;
            } else if (entity.typeName == null || entity.typeName == "") {
                toastr.warning("名称必填");
                return;
            } else if (entity.typeName.length > 200) {
                toastr.warning("名称长度不超过200!");
                return;
            } else if (entity.typeSort == null || entity.typeSort == "") {
                toastr.warning("排序必填");
                return;
            }
            if (entity.price == null || entity.price == "") {
                //分值默认为0
                entity.price = 0;
            }
            var ztree = $.fn.zTree.getZTreeObj("ztree");
            //修改缺陷类别
            $.ajax({
                url: "${path}/faultType/updateByClo",
                type: "POST",
                data: entity,
                success: function (result) {
                    if (result == 1) {
                        toastr.success("修改成功!");
                        initTree();
                    } else {
                        toastr.error("修改失败!");
                    }

                }, error: function () {
                    toastr.error("加载失败!")
                }
            });
        });
    });

    //展开
    function expandAll() {
        var treeObj = $.fn.zTree.getZTreeObj("ztree");
        treeObj.expandAll(true);
    }

    //收缩
    function collapseAll() {
        var treeObj = $.fn.zTree.getZTreeObj("ztree");
        treeObj.expandAll(false);
    }
</script>

</body>
</html>