<%@ page import="org.apache.commons.lang.StringUtils" %>
<%@ page import="com.lightinit.hsdataplatform.dictionary.DicResourceCatelogType" %>
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String basePath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
    <jsp:include page="../../../common/admin/head.jsp"></jsp:include>
</head>
<body>
    <jsp:include page="../../../common/admin/body_pre.jsp"></jsp:include>
    <div class="row hidden-print">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h2>标签管理</h2>
                    <ol class="breadcrumb">
                        <li>
                            <a href="javascript:void(0);" >配置中心</a>
                        </li>
                        <li class="active">
                            <strong>标签管理</strong>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#tabTheme" aria-controls="tabTheme" role="tab" data-toggle="tab">标签管理</a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="tabTheme">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="ibox">
                                <div class="ibox-content">
                                    <div id="divThemeTree"></div>
                                    <button id="btnAdd" type="button" class="btn btn-sm btn-primary btn-position"><i class="fa fa-plus"></i>新增标签</button>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="panel panel-primary">
                                        <div class="panel-heading">
                                            编辑当前目录
                                        </div>
                                        <div class="panel-body">
                                            <form id="formThemeEdit" action="<%=basePath%>/admin/tag/edit.action" method="post" class="form-horizontal" enctype="multipart/form-data">
                                                <input type="hidden" name="id" />
                                                <jsp:include page="form.jsp"></jsp:include>
                                                <div class="form-group">
                                                    <div class="col-md-2"></div>
                                                    <div class="col-md-9 text-right">
                                                        <button type="button" class="btn btn-primary right" onclick='edit(this, "#divThemeTree")'><i class="fa fa-check"></i>保存</button>
                                                        <button type="button" class="btn btn-danger right" onclick='del(this, "#divThemeTree")'><i class="fa fa-trash-o"></i>删除</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="panel panel-primary">
                                        <div class="panel-heading">
                                            新增子目录
                                        </div>
                                        <div class="panel-body">
                                            <form id="formThemeAdd" action="<%=basePath%>/admin/tag/edit.action" method="post" class="form-horizontal" enctype="multipart/form-data">
                                                <div class="form-group">
                                                    <label class="col-md-2 control-label">父级名称：</label>
                                                    <div class="col-md-9">
                                                        <select  name="parentId" class="form-control">
                                                            <c:forEach items="${mainNameAndValues}" var="item" >
                                                                <option value="${item.value}">${item.name}</option>
                                                            </c:forEach>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-md-2 control-label">标签分类名称：</label>
                                                    <div class="col-md-9">
                                                        <input type="text" name="categoryName" class="form-control" />
                                                        <span class="help-block"></span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-md-2 col-sm-2 control-label">标签分类图标：</label>
                                                    <div class="col-md-9 col-sm-9">
                                                        <p class="form-control-static"></p>
                                                        <input type="file" name="imgCatelog" />
                                                        <input type="hidden" name="categoryImg" />
                                                        <span class="help-block"></span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-md-2 control-label">标签分类描述：</label>
                                                    <div class="col-md-9">
                                                        <input type="text" name="categoryDesc" class="form-control"/>
                                                        <span class="help-block"></span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-md-2 control-label">所有标签：</label>
                                                    <div class="col-md-9">
                                                        <%--<input type="text" name="tags" class="form-control"/>--%>
                                                        <textarea class="form-control" rows="3" name="tags"></textarea>
                                                        <span class="help-block"></span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="col-md-2"></div>
                                                    <div class="col-md-9 text-right">
                                                        <button type="button" class="btn btn-primary right" onclick='add(this, "#divThemeTree")'><i class="fa fa-check"></i>保存</button>
                                                        <button type="button" class="btn btn-default right" onclick='resetForm("#formThemeAdd")'><i class="fa fa-reply"></i>重置</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <jsp:include page="../../../common/admin/body_post.jsp"></jsp:include>
    <script type="text/javascript">

        var allResourceCatelog = ${allTagJsonStr};

        function getModelById(id) {
            var models = $.grep(allResourceCatelog, function (element, index) {
                return element.id == node.id;
            });
            if (models && models && models.length > 0){
                return models[0];
            }
            return null;
        }

        var defaultTreeViewSelectedFunction = function(event, node){
            var models = $.grep(allResourceCatelog, function (element, index) {
                return element.id == node.id;
            });
            if (!models){
                $.showAlert({message: "未找到数据对象"});
                return;
            }
            var model = models[0];
            if (!model){
                $.showAlert({message: "未找到数据对象"});
                return;
            }

            var mContainer = $.getJqObj(this);

            var divForm1 = mContainer.closest(".row").children("div").eq(1).children("div").eq(0);

            var id = divForm1.find('input[name="id"]');
            var parentId = divForm1.find('input[name="parentId"]');
            var parentName = divForm1.find('input[name="parentName"]');
            var categoryName = divForm1.find('input[name="categoryName"]');
            var catelogImg = divForm1.find('input[name="catelogImg"]');
            var categoryDesc = divForm1.find('input[name="categoryDesc"]');
            var tags = divForm1.find('input[name="tags"]');
            var ctrlCatelogImgFileName = divForm1.find('p.form-control-static');
            debugger ;
            id.val(model.id);
            parentName.val(model.parentName);
            parentId.val(model.parentId);
            categoryName.val(model.categoryName);
            categoryDesc.val(model.categoryDesc);
            tags.val(model.tags);
            catelogImg.val(model.categoryImg) ;
            ctrlCatelogImgFileName.text(model.tagImgFileName) ;


            divForm1.removeFormValidationStyle();

            var divForm2 = mContainer.closest(".row").children("div").eq(1).children("div").eq(1);
            // var ctrlCatelogCode2 = divForm2.find('input[name="catelogCode"]');
            // ctrlCatelogCode2.val(model.catelogCode);
        };

        function resetForm(pForm){
            var jqForm = $.getJqObj(pForm);
            var jqForm = $.getJqObj(pForm);
            var categoryName = jqForm.find('input[name="categoryName"]');
            var imgCatelog = jqForm.find('input[name="imgCatelog"]');
            var categoryDesc = jqForm.find('input[name="categoryDesc"]');
            var tags = jqForm.find('input[name="tags"]');
            var ctrlViewOrder = jqForm.find('input[name="viewOrder"]');
            ctrlViewOrder.val(100);
            jqForm[0].reset();
        }

        function resetFileInput(fileInput) {
            var jqObj = $.getJqObj(fileInput);
            jqObj.after(jqObj.clone().val(""));
            jqObj.remove();
        }

        var defaultTreeViewUnselectedFunction = function(event, node){
            var mContainer = $.getJqObj(this);
            var divForm1 = mContainer.closest(".row").children("div").eq(1).children("div").eq(0);
            var jqForm1 = divForm1.find("form");
            resetForm(jqForm1);
            var divForm2 = mContainer.closest(".row").children("div").eq(1).children("div").eq(1);
            var ctrlCatelogCode2 = divForm2.find('input[name="catelogCode"]');
            ctrlCatelogCode2.val("");
        };

        var defaultTreeViewOptions = {
            levels: 1,
            showTags: true,
            onNodeSelected: defaultTreeViewSelectedFunction,
            onNodeUnselected: defaultTreeViewUnselectedFunction
        }

        function bindTree(pContainer, treeViewOptions, onBinded) {
            var container = $.getJqObj(pContainer);
            var finalTreeViewOptions = $.extend(true, defaultTreeViewOptions, treeViewOptions);
            $.ajax({
                type : "get",
                url : "<%=basePath%>/admin/tag/tagTreeData.action" ,
                success : function(returnData) {
                    if (!(returnData instanceof Array)){
                        $.showTip({ msg: "TreeView数据请求出错" });
                        return;
                    }
                    finalTreeViewOptions.data = returnData;
                    container.treeview(finalTreeViewOptions);
                    if (onBinded && typeof onBinded  == 'function'){
                        onBinded();
                    }
                },
                error : function() {
                    $.showTip({ msg: "TreeView数据请求出错" });
                }
            });
        }

        bindTree("#divThemeTree");

        function refreshTree(divTree, resultState){
            var treeJqObj = $.getJqObj(divTree);
            var expandedNodes = treeJqObj.treeview('getExpanded');
            var selectedNodes = treeJqObj.treeview('getSelected');
            treeJqObj.treeview('remove');
            bindTree(divTree, null, function () {
                if (expandedNodes && expandedNodes instanceof Array){
                    for(var i = 0; i < expandedNodes.length; i++){
                        var expandedNode = expandedNodes[i];
                        treeJqObj.treeview('expandNode', [ expandedNode.nodeId, { silent: true } ]);
                    }
                }
                if (selectedNodes && selectedNodes instanceof Array && selectedNodes.length > 0){
                    var selectedNode = selectedNodes[0];
                    var node = treeJqObj.treeview('getNode', selectedNode.nodeId);
                    if (node.id == selectedNode.id){
                        treeJqObj.treeview('selectNode', [ selectedNode.nodeId, { silent: true } ]);
                        treeJqObj.treeview('expandNode', [ selectedNode.nodeId, { silent: true } ]);

                        // 数据刷新后赋值
                        var models = $.grep(allResourceCatelog, function (element, index) {
                            return element.id == selectedNode.id;
                        });
                        if (models && models.length > 0){
                            var model = models[0];
                            // 数据刷新后给当前目录的图片路径赋值
                            var divForm1 = treeJqObj.closest(".row").children("div").eq(1).children("div").eq(0);
                            var ctrlCatelogImg = divForm1.find('input[name="catelogImg"]');
                            var ctrlCatelogImgFileName = divForm1.find('p.form-control-static');
                            ctrlCatelogImg.val(model.catelogImg);
                            ctrlCatelogImgFileName.text(model.catelogImgFileName);
                            resetFileInput(divForm1.find('input[type="file"]'));

                            // 数据刷新后给新增子目录表单的目录编码赋值
                            var divForm2 = treeJqObj.closest(".row").children("div").eq(1).children("div").eq(1);
                            var ctrlCatelogCode2 = divForm2.find('input[name="catelogCode"]');
                            ctrlCatelogCode2.val(model.catelogCode);
                        }
                    }
                }
            });
        }

        function updateData(model){
            var isAdd = true;
            for (var i = 0; i < allResourceCatelog.length; i++){
                if (model.id == allResourceCatelog[i].id){
                    allResourceCatelog[i] = model;
                    isAdd = false;
                    break;
                }
            }
            if (isAdd){
                allResourceCatelog.push(model);
            }
        }

        function edit(sender, divTree) {
            var form = $(sender).closest("form");
            var treeJqObj = $.getJqObj(divTree);
            var selectedNodes = treeJqObj.treeview('getSelected');
            var selectedNode = selectedNodes && selectedNodes.length > 0 ? selectedNodes[0] : null;
            if (!selectedNode){
                $.showAlert({message: "请选中节点"});
                return;
            }
            var formSerialize = $(sender).closest("form").serialize();

            var ajaxSubmitArgs = {
                form: form,
                ajaxSubmitOptions: {
                    onSuccess: function (resultState) {
                        updateData(resultState.data);
                        refreshTree(divTree, resultState);
                    }
                }
            };
            $.ajaxValSubmit(ajaxSubmitArgs);
        }

        function add(sender, divTree) {
            var form = $(sender).closest("form");
            var treeJqObj = $.getJqObj(divTree);
            var selectedNodes = treeJqObj.treeview('getSelected');
            var selectedNode = selectedNodes && selectedNodes.length > 0 ? selectedNodes[0] : null;
            // if (selectedNode){
            //     form.find('input[name=parentId]').val(selectedNode.id);
            // }
            var formSerialize = $(sender).closest("form").serialize();

            var ajaxSubmitArgs = {
                form: form,
                ajaxSubmitOptions: {
                    onSuccess: function (resultState) {
                        updateData(resultState.data);
                        refreshTree(divTree, resultState);
                        resetForm(form);
                    }
                }
            };
            $.ajaxValSubmit(ajaxSubmitArgs);
        }

        function del(sender, divTree) {
            var form = $(sender).closest("form");
            var treeJqObj = $.getJqObj(divTree);
            var selectedNodes = treeJqObj.treeview('getSelected');
            var selectedNode = selectedNodes && selectedNodes.length > 0 ? selectedNodes[0] : null;
            if (!selectedNode){
                $.showAlert({message: "请选中节点"});
                return;
            }

            var ajaxGetArgs = {
                ajaxGetOptions: {
                    url: "<%=basePath%>/admin/tag/delete.action/" + selectedNode.id,
                    onSuccess: function (resultState) {
                        refreshTree(divTree, resultState);
                        resetForm(form);
                    }
                }
            };
            $.delWithConfirm({ func: $.ajaxGet, funcArgs: ajaxGetArgs });
        }

        var validateOptions = {
            rules: {
                categoryName: "required",
                categoryDesc: "required",
            }
        }
        $("#formThemeEdit").validate(validateOptions);
        $("#formThemeAdd").validate(validateOptions);
        $("#formBasicEdit").validate(validateOptions);
        $("#formBasicAdd").validate(validateOptions);
        $("#formSectionEdit").validate(validateOptions);
        $("#formSectionAdd").validate(validateOptions);
        $("#formCustomEdit").validate(validateOptions);
        $("#formCustomAdd").validate(validateOptions);

        $('[data-toggle="tooltip"]').tooltip();
    </script>
</body>
</html>