<%@ page contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- 移动设备 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <jsp:include page="../../common.jsp"/>

    <style>
        .inline_right_btn {
            display: inline;
            position: absolute;
            right: 15px;
        }

        /*修改源码点击选中变色*/
        .custom-tree-item-clicked {
            color: green;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>数据字典</legend>
</fieldset>
<div class="layui-col-md4">
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-card">
            <div class="layui-card-header" style="padding: 10px 15px">
                <div class="layui-inline" style="position: relative">
                    字典树
                </div>
                <button id="initAdd" type="button" class="layui-btn inline_right_btn" onclick="initDictAdd()" style="display: none">添加字典组
                </button>
            </div>
            <div class="layui-card-body">
                <div id="test1" class="demo-tree demo-tree-box" style="height: 600px; overflow: scroll;"></div>
            </div>
        </div>
    </div>
</div>

<div class="layui-col-md8" style="padding-left: 20px">
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div id="divDictGroup" class="layui-card" style="margin-bottom: 0px">
            <div class="layui-card-header" style="padding: 10px 15px">
                <div class="layui-inline" style="position: relative">
                    字典组信息
                </div>
                <button type="button" onclick="delDictGroup()" class="inline_right_btn layui-btn layui-btn-danger">删除字典组
                </button>
            </div>
            <div class="layui-card-body">
                <form id="formDictGroup" class="layui-form" action="">
                    <input type="text" name="id" autocomplete="off" placeholder="请输入名称"
                           class="layui-input" style="display: none">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" lay-verify="required" autocomplete="off"
                                       placeholder="请输入名称"
                                       class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">字典编码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="code" lay-verify="required" autocomplete="off"
                                       placeholder="请输入字典编码"
                                       class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">序号</label>
                            <div class="layui-input-inline">
                                <input type="number" name="sort" lay-verify="required" autocomplete="off"
                                       placeholder="请输入序号"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                            <input type="text" name="desc" lay-verify="required" autocomplete="off" placeholder="描述内容"
                                   class="layui-input"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn"  lay-submit lay-filter="formDictGroup">添加字典组</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div id="divDictItem" class="layui-card" style="display: none">

            <div class="layui-card-header" style="padding: 10px 15px">
                <div class="layui-inline" style="position: relative">
                    字典项
                </div>
                <button type="button" onclick="delDictItem()" class="inline_right_btn layui-btn layui-btn-danger">删除字典
                </button>
            </div>

            <div class="layui-card-body">
                <form id="formDictItem" class="layui-form" action="">
                    <input type="text" name="id" lay-verify="" autocomplete="off" placeholder="请输入名称"
                           class="layui-input" style="display: none">
                    <input type="text" name="pId" lay-verify="" autocomplete="off" placeholder="请输入名称"
                           class="layui-input" style="display: none">
                    <div class="layui-form-item">
                        <label class="layui-form-label">字典组名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="pName" lay-verify="" autocomplete="off" placeholder=""
                                   class="layui-input" disabled>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入名称"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">字典值</label>
                        <div class="layui-input-block">
                            <input type="text" name="value" lay-verify="required" autocomplete="off"
                                   placeholder="请输入字典值"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                            <input type="text" name="desc" lay-verify="required" autocomplete="off" placeholder="请输入描述"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">序号</label>
                        <div class="layui-input-block">
                            <input type="number" name="sort" lay-verify="required" autocomplete="off"
                                   placeholder="请输入序号"
                                   class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDictItem" style="display: none">添加字典</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    var layer;
    var tree;
    var form;

    var treeData;
    layui.use(['tree', 'layer', 'form'], function () {
        tree = layui.tree;
        layer = layui.layer;
        form = layui.form;

        //渲染
        var inst1 = tree.render({
            elem: '#test1'  //绑定元素
            , data: treeData
            , id: 'tree1'
            , click: function(obj) {
                treeSelect(obj);
            }
        });

        initData();

        $("#formDictItem").submit(function (event) {
           event.preventDefault();
           addOrUpdateDict();
        });

        form.on('submit(formDictGroup)', function(data) {
            addOrUpdateDict(data.field);
            return false;
        });

        form.on('submit(formDictItem)', function(data) {
            addOrUpdateDict(data.field);
            return false;
        });
    });

    function treeSelect(obj){
        $("#initAdd").css("display", "inline");
        $("#divDictItem").show();
        $("#divDictGroup").css("margin-bottom", "20px");

        $("#formDictItem button").show();
        if (obj.data.value === null || obj.data.value === undefined || obj.data.value === '') {
            setDictGroup(obj.data);
            $("#formDictGroup button").html("修改字典组");

            // 字典项表单内容清空
            $("#formDictItem input[name='pId']").val(obj.data.id);
            $("#formDictItem input[name='pName']").val(obj.data.name);
            $("#formDictItem input[name='id']").val(null);
            $("#formDictItem input[name='name']").val(null);
            $("#formDictItem input[name='value']").val(null);
            $("#formDictItem input[name='sort']").val(null);
            $("#formDictItem input[name='desc']").val(null);
            $("#formDictItem button").html("添加字典");

        } else {
            var cur = obj.data;
            var parent;

            // 字典组
            treeData.forEach(function(item) {
                if (item.id === cur.pId) {
                    parent = item;
                    setDictGroup(parent);
                    $("#formDictItem input[name='pId']").val(parent.id);
                    $("#formDictItem input[name='pName']").val(parent.name);
                }
            });

            $("#formDictItem input[name='id']").val(cur.id);
            $("#formDictItem input[name='name']").val(cur.name);
            $("#formDictItem input[name='value']").val(cur.value);
            $("#formDictItem input[name='sort']").val(cur.sort);
            $("#formDictItem input[name='desc']").val(cur.desc);
            $("#formDictItem button").html("修改字典");
        }
    }

    // 给字典组表单赋值
    function setDictGroup(item) {
        $("#formDictGroup input[name='id']").val(item.id);
        $("#formDictGroup input[name='name']").val(item.name);
        $("#formDictGroup input[name='code']").val(item.code);
        $("#formDictGroup input[name='sort']").val(item.sort);
        $("#formDictGroup input[name='desc']").val(item.desc);
        $("#formDictGroup button").html("修改字典组");
    }

    function resetDictGroup() {
        $("#formDictGroup input[name='id']").val(null);
        $("#formDictGroup input[name='name']").val(null);
        $("#formDictGroup input[name='code']").val(null);
        $("#formDictGroup input[name='sort']").val(null);
        $("#formDictGroup input[name='desc']").val(null);
        $("#formDictGroup button").html("修改字典组");

        $("#divDictItem").hide();
        $("#divDictGroup").css("margin-bottom", "20px");
    }

    function setDictItem(item) {
        var cur = item;
        var parent;

        // 字典组
        treeData.forEach(function(item) {
            if (item.id === cur.pId) {
                parent = item;
                setDictGroup(parent);
                $("#formDictItem input[name='pId']").val(parent.id);
                $("#formDictItem input[name='pName']").val(parent.name);
            }
        });

        $("#formDictItem input[name='id']").val(cur.id);
        $("#formDictItem input[name='name']").val(cur.name);
        $("#formDictItem input[name='value']").val(cur.value);
        $("#formDictItem input[name='sort']").val(cur.sort);
        $("#formDictItem input[name='desc']").val(cur.desc);
        $("#formDictItem button").html("修改字典");
    }

    function initData() {
        $.ajax({
            type: "GET",
            url: "${ctx}/dict/tree",
            dataType: "json",
            success: function(data) {
                if (data.code == 200) {
                    treeData = data.data;
                    tree.reload('tree1', {data: treeData});

                    resetDictGroup(null)
                    resetDictItem(null)
                } else {
                    layer.msg("数据请求失败！");
                }
            }
        });
    }

    function addOrUpdateDict(data) {
        $.ajax({
            url: ctx + '/dict/save',
            type: 'post',
            data: JSON.stringify(data),
            contentType: "application/json",
            success: function(data) {
                if (data.code == 200) {
                    layer.msg(data.message);
                    initData();
                } else {
                    layer.msg(data.message);
                }
            },
            error: function() {
                layer.msg("网络异常");
            }
        });
    }

    function delDict(id) {
        $.ajax({
            url: ctx + '/dict/del/' + id,
            type: 'delete',
            contentType: "application/json",
            success: function(data) {
                if (data.code == 200) {
                    layer.msg(data.message);
                    initData();
                } else {
                    layer.msg(data.message);
                }
            },
            error: function() {
                layer.msg("网络异常");
            }
        });
    }

    function delDictGroup() {
        layer.confirm('确认删除该字典组？', {
            btn: ['确认删除', '取消']
        }, function(index, layero) {
            delDict($('#formDictGroup input[name="id"]').val())
        }, function(index, layero) {
            layer.msg("取消删除字典组 index: " + index + "; layero: " + layero);
        });
    }

    function delDictItem() {
        layer.confirm('确认删除该字典项？', {
            btn: ['确认删除', '取消']
        }, function(index, layero) {
            delDict($('#formDictItem input[name="id"]').val())
        }, function(index, layero) {
            layer.msg("取消删除字典项 index: " + index + "; layero: " + layero);
        });
    }


    // 清理表单
    function initDictAdd() {
        $("#formDictGroup input[name='id']").val(null);
        $("#formDictGroup input[name='name']").val(null);
        $("#formDictGroup input[name='code']").val(null);
        $("#formDictGroup input[name='sort']").val(null);
        $("#formDictGroup input[name='desc']").val(null);
        $("#formDictGroup button").html("添加字典组");
        $(".custom-tree-item-clicked").removeClass("custom-tree-item-clicked")
        $("#initAdd").hide();

        $("#divDictItem").css("margin")
        $("#divDictItem").hide();
        $("#divDictGroup").css("margin-bottom", "0px");
    }
</script>
</body>
</html>