@extends('manager.layout.master')

@section('head')
    <link rel="stylesheet" href="{{asset('layui/layui_extends/lay/eleTree.css')}}">
@stop

@section('style')
    <style>
        /* 树形卡片容器 */
        .category-tree-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
            border: 1px solid #E5E7EB;
            padding: 16px 20px;
            min-width: 600px;
        }
        .category-tree-card .eleTree {
            border: 0;
            width: auto;
            height: auto;
            margin: 0;
        }
        /* 节点行高和间距 */
        .category-tree-card .eleTree-node-content {
            height: 36px;
            line-height: 36px;
            padding: 0 8px;
            border-radius: 6px;
            transition: all 0.2s ease;
            font-size: 14px;
            color: #1F2937;
        }
        .category-tree-card .eleTree-node-content:hover,
        .category-tree-card .eleTree-node-content.eleTree-node-content-active {
            background-color: #F3F4F6;
        }
        /* 展开图标 */
        .category-tree-card .eleTree-node-content-icon .layui-icon {
            padding: 0 4px;
            color: #9CA3AF;
            font-size: 12px;
        }
        /* 节点标签 */
        .category-tree-card .eleTree-node-content-label {
            padding-left: 4px;
        }
        /* 右键菜单美化 */
        #tree-menu {
            margin: 0;
            padding: 4px 0;
            position: absolute;
            background: #fff;
            border: 1px solid #E5E7EB;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
            display: none;
            min-width: 120px;
            overflow: hidden;
        }
        #tree-menu li {
            list-style: none;
        }
        #tree-menu li > a {
            display: block;
            padding: 0 16px;
            text-decoration: none;
            color: #374151;
            white-space: nowrap;
            line-height: 34px;
            font-size: 13px;
            transition: all 0.15s ease;
            border-radius: 0;
            text-shadow: none;
        }
        #tree-menu li > a:hover {
            background-color: #F3F4F6;
            box-shadow: none;
            color: #4F6EF7;
        }
    </style>
@stop

@section('body')
    <blockquote class="layui-elem-quote">政策分类 <small>右键点击分类可进行功能操作</small></blockquote>

    <div class="my-btn-box">
        <span class="fl">
            <a class="layui-btn layui-btn-normal" id="btn-add">
                <i class="layui-icon layui-icon-add-1"></i> 添加一级分类
            </a>
            <a class="layui-btn layui-btn-normal" id="pageReload" title="刷新">
                <i class="layui-icon layui-icon-refresh-1"></i> 刷新
            </a>
        </span>
    </div>

    <div class="category-tree-card">
        <div class="eleTree ele1" lay-filter="articleCategory"></div>
    </div>
@stop

@section('js')
    <script>

        var data = '{!! json_encode($tree) !!}';
        data = JSON.parse(data);
        layui.use(['eleTree'], function () {
            eleTree = layui.eleTree;
            eleTree.render({
                elem: '.ele1',
                data: data,
                contextmenuList: ["add", "edit", "remove"]
            });
            eleTree.on("add(articleCategory)", function (data) {
                var current = data.currentData;//父级信息
                $.ajax({
                    type: 'post',
                    url: '{{route('articleCategoryAdd')}}',
                    data: {parent_id: current.id, name: data.value, _token: '{{csrf_token()}}'},
                    dataType: 'json',
                    success: function (data) {
                        // 若后台修改，则重新获取后台数据，然后重载
                        if (data.status != 1) {
                            layer.msg(data.message, {icon: 0, time: 1500});
                            return false;
                        } else {
                            layer.msg(data.message, {icon: 1, time: 1500}, function () {
                                location.reload();
                            });
                        }
                    }
                });
            });
            eleTree.on("edit(articleCategory)", function (data) {
                _self = data.self;
                var label = $(_self).children(".eleTree-node-content-label");
                $.ajax({
                    type: 'post',
                    url: '{{route('articleCategoryEdit')}}',
                    data: {id:label.attr('data-id'), name: data.value, _token: '{{csrf_token()}}'},
                    dataType: 'json',
                    success: function (data) {
                        console.log('修改成功');
                    }
                });
            });
            eleTree.on("remove(articleCategory)", function (data) {
                _self = data.self;
                console.log(_self);
                var tem = $(_self).parent(".eleTree-node").parent(".eleTree-node-group");
                var label = $(_self).children(".eleTree-node-content-label");
                console.log(label.attr('data-id'));
                $.ajax({
                    type: 'post',
                    url: '{{route('articleCategoryDel')}}',
                    data: {id:label.attr('data-id'), _token: '{{csrf_token()}}'},
                    dataType: 'json',
                    success: function (data) {
                        if (data.status != 1) {
                            layer.msg(data.message, {icon: 0, time: 1500});
                            return false;
                        } else {
                            // dom删除
                            $(_self).parent(".eleTree-node").remove();
                            var isLeaf = tem.children(".eleTree-node").length === 0;
                            isLeaf && tem.siblings(".eleTree-node-content").children(".eleTree-node-content-icon").children("i").css("color", "transparent").removeClass("icon-rotate");
                        }
                        console.log('删除成功');
                    }
                });
            })
        });
    </script>


    {{--添加顶级分类--}}
    <script>
        $(function () {
            $('#btn-add').click(function () {
                //例子1
                layer.prompt({title: '请输入分类名称'}, function (value, index, elem) {
                    $.ajax({
                        type: 'post',
                        url: '{{route('articleCategoryAdd')}}',
                        data: {name: value, _token: '{{csrf_token()}}'},
                        dataType: 'json',
                        success: function (data) {
                            console.log(data);
                            if (data.status != 1) {
                                layer.msg(data.message, {icon: 0, time: 1500});
                                return false;
                            } else {
                                layer.msg(data.message, {icon: 1, time: 1500}, function () {
                                    location.reload();
                                });
                            }
                        }
                    });

                });
            })
        })
    </script>
@stop