@extends('admin.base.base')
@section('style')
    {{--<link rel="stylesheet" href="/sort/demo.css">--}}
    {{--<script src="/sort/demo.js"></script>--}}
    {{--<script src="/sort/demo1.js"></script>--}}
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css">
    <link rel="stylesheet" href="/sort/nestable.css">

    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

    <style>
        .parent{
            display: block;
        }
        .parent1{
            display: none;
        }
        #in input{
            border: 1px #e7e7ff solid;
            margin: 5px 0;
            width: 500px;
            height: 30px;
        }
    </style>
@endsection
@section('content')
    <div class="tpl-content">
        <div class="layui-col-md5 ">
            <div class="layui-card">
                <div class="layui-card-header"><b>添加栏目</b></div>
                <div class="layui-card-body">
                    <form action="" class="layui-form" method='post' id="myform" enctype="multipart/form-data">
                        {{csrf_field()}}
                        <div class="layui-form-item">
                            <div class="layui-form-label">栏目ID：</div>
                            <div class="layui-input-block">
                                <select name="columnid" id="colid">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-form-label">名称：</div>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="name" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-form-label">标识：</div>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="keys" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-form-label">级别：</div>
                            <div class="layui-input-block">
                                <select name="rank" id="rank" lay-filter="rank">
                                    <option value="1">一级标题</option>
                                    <option value="2">二级标题</option>
                                    <option value="3">三级标题</option>
                                    {{--<option value="4">4</option>--}}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item " >
                            <div class="layui-form-label">父级名称：</div>
                            <div class="layui-input-block">
                                <select name="parentid" id="parent" disabled="disabled">

                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-form-label">URL：</div>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="url" lay-verify="required">
                                <span>示例:/article/jianjie</span>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-form-label">状态：</div>
                            <div class="layui-input-block">
                                <input lay-filter="status" type="checkbox" name="status" checked lay-skin="switch" lay-text="开|关" value="0">
                                <input type="hidden" value="1" id="hidden">
                            </div>
                        </div>
                        <div style="text-align: center">
                            <button class="layui-btn layui-btn-normal" type="submit" lay-submit lay-filter="button">添加</button>
                            <button class="layui-btn layui-btn-danger" type="reset">重置</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
        {{--<div class="layui-col-md5 layui-col-md-offset1">--}}
            {{--<div class="layui-card">--}}
                {{--<div class="layui-card-header"><b>管理</b></div>--}}
                {{--<div class="layui-card-body">--}}
                    {{--<form action="" class="layui-form" id="myform1">--}}

                            {{--@include('admin.column.tree',$data)--}}

                    {{--</form>--}}
                {{--</div>--}}
            {{--</div>--}}
        {{--</div>--}}
        <div class="layui-col-md5 layui-col-md-offset1">
            <div class="layui-card">
                <div class="layui-card-header"><b>管理</b></div>
                <div class="layui-card-body">
                    <form action="" class="layui-form">

                        <div class="dd" id="tree-5d1972b16a41e">
                            <ol class="dd-list">
                                @include('admin.column.trees',$data)
                            </ol>

                        </div>
                    </form>


                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script>
        layui.use(['layer','form'],function () {
            var layer=layui.layer,form=layui.form;

            //状态开关的转换
            form.on('switch(status)',function (data) {
                if (data.elem.checked){
                    $('#hidden').removeAttr('name');
                    console.log('0');
                    console.log($('#myform').serialize());
                } else {
                    $('#hidden').attr('name','status');
                    console.log('1');
                    console.log($('#myform').serialize());
                }
            })
            //表单一的提交
            form.on('submit(button)',function (data) {
                layer.alert('确认提交？',{btn:['确认','取消']},function () {
                    console.log(
                        $('#myform').serialize()
                    );
                    $.ajax({
                        url:"{{route('colsave')}}",
                        datatype:'josn',
                        type:'post',
                        headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') },
                        data:$('#myform').serialize(),
                        success:function (data) {
                            layer.msg(data.msg);
                            console.log(data)
                            location.href="{{route('col-config')}}";

                        },error:function () {
                            layer.msg('数据出错！');
                        }
                    })

                })
                return false;
            })
            //表单验证
            form.verify({

            })
            //select选择框的监听
            form.on('select(rank)',function (data) {
                console.log(data.value);
                var rank=data.value;
                if (rank==1){
                    $('#parent').attr('disabled','disabled');
                    form.render('select');
                } else {
                    $('#parent').removeAttr('disabled');
                    var id2=$('#colid').val();
                    var html='';
                    $('#parent').empty();
                    $.ajax({
                        url:"{{route('colselect')}}",
                        type:'post',
                        data:{'id':rank-1,'colid':id2},
                        headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') },
                        success:function (data) {
                           console.log(data);

                            for (var i=0;i<data.length;i++){
                                    html+="<option value='"+data[i].id+"'>"+data[i].name+"</option>";
                            }
                            $('#parent').append(html);
                            form.render('select');
                            console.log($('#parent').append(html));
                        }
                    })
                    form.render('select');
                }
            })

            //表单二的select
            var html;
            $.ajax({
                url:"{{route('colshow')}}",
                type:'post',
                headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') },
                success:function (data) {
                    for (var i=0;i<data.length;i++){
                        html+="<option value='"+data[i].columnid+"'>"+data[i].columnid+"</option>";
                    }
                    $('#select').append(html);
                    form.render('select');
                    var id=data[0].columnid;
                    var demo1=[];
                    var demo2=[];
                    var demo3=[];
                    $.ajax({
                        url:"{{route('colconshow')}}",
                        data:{'id':id},
                        type:'post',
                        headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') },
                        datatype: 'json',
                        success:function (data) {
                            console.log(data);
                            for (var i=0;i<data.length;i++){
                                if (data[i].rank==1){
                                    demo1[i]=data[i];
                                }else if (data[i].rank==2){
                                    demo2[i]=data[i];
                                } else {
                                    demo3[i]=data[i];
                                }
                            }

                            console.log(demo2);
                        }
                    })
                }
            })
            //表单二的select监听
            form.on('select(select)',function (data) {
                var id=data.value;
            })



        })
    </script>
    <script>
        function demo(id){
            layer.alert('确认删除？',{btn:['确定','删除']},function () {
                $.ajax({
                    url:"{{route('coldel')}}",
                    data:{'id':id},
                    headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') },
                    success:function (data) {
                        if (data.status==0){
                            layer.msg(data.msg);
                            location.href="{{route('col-config')}}";
                        }else if(data.status==2) {
                            layer.msg(data.msg);
                        }else {
                            layer.msg(data.msg);
                        }
                    },
                    error:function () {
                        layer.msg("数据出错");
                    }
                })
            })
        }
    </script>

    <script type="text/javascript" src="/js/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/js/Sortable.min.js"></script>
    <script type="text/javascript" src="/js/js/moduleSet.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.js"></script>
    <script src="/sort/nestable.js"></script>
    <script type="text/javascript">

        // 排序
        var container = document.getElementById("myform1");
        var sort = Sortable.create(container, {
            animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
            handle: ".module1", // Restricts sort start click/touch to the specified element
            draggable: ".module1", // Specifies which items inside the element should be sortable
            onUpdate: function (evt/**Event*/){
                var item = evt.item;
                // console.log(item.id);
                // var data=$('#myform1').find('div.module1');

                var data=$('#myform1').children();
                var x={};
                for (var i=0;i<data.length;i++){
                    // x[i]=[];
                    x[i]=$('#myform1>div')[i].id;
                    // x[i]['order']=i+1;
                }

                // debugger;
                $.ajax({
                    url:"{{route('colsave1')}}",
                    data:{
                       data
                    },
                    datatype:'json',
                    type:'post',
                    headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') },
                    success:function (data) {
                        console.log(data);
                    }
                })
            }
        });
    </script>

    <script>


        $(function () {
            $('.dd-handle').on('click',function () {

            });

            $('.dd').nestable([]);

            $('.dd').on('change', function() {
                /* on change event */
                // console.log($(this).attr('id'));
                var data={};
                data=$('.dd').nestable('serialize');

                y=JSON.stringify(data);
                console.log(data,123);
                console.log(y,1);
                $.ajax({
                    url:"{{route('colsave1')}}",
                    data:{
                        data
                    },
                    datatype:'json',
                    type:'post',
                    headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') },
                    success:function (data) {
                        console.log(data);
                    }
                })

            });

            $('.submit').click(function() {
                var id = $(this).data('id');
                swal({
                    title: "确认删除?",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "确认",
                    showLoaderOnConfirm: true,
                    cancelButtonText: "取消",
                    preConfirm: function() {
                        return new Promise(function(resolve) {
                            $.ajax({
                                method: 'post',
                                url: '/admin/auth/menu/' + id,
                                data: {
                                    _method:'delete',
                                    _token:LA.token,
                                },
                                success: function (data) {
                                    $.pjax.reload('#pjax-container');
                                    toastr.success('删除成功 !');
                                    resolve(data);
                                }
                            });
                        });
                    }
                }).then(function(result) {
                    var data = result.value;
                    if (typeof data === 'object') {
                        if (data.status) {
                            swal(data.message, '', 'success');
                        } else {
                            swal(data.message, '', 'error');
                        }
                    }
                });
            });

            $('.tree-5d1972b16a41e-refresh').click(function () {
                $.pjax.reload('#pjax-container');
                toastr.success('刷新成功 !');
            });

            $('.tree-5d1972b16a41e-tree-tools').on('click', function(e){
                var action = $(this).data('action');
                if (action === 'expand') {
                    $('.dd').nestable('expandAll');
                }
                if (action === 'collapse') {
                    $('.dd').nestable('collapseAll');
                }
            });


            $(".parent_id").select2({"allowClear":true,"placeholder":{"id":"","text":"\u7236\u7ea7\u83dc\u5355"}});

            $('.icon').iconpicker({placement:'bottomLeft'});

            $(".roles").select2({"allowClear":true,"placeholder":{"id":"","text":"\u89d2\u8272"}});
            $(".permission").select2({"allowClear":true,"placeholder":{"id":"","text":"\u6743\u9650"}});
            $('.container-refresh').off('click').on('click', function() {
                $.admin.reload();
                $.admin.toastr.success('刷新成功 !', '', {positionClass:"toast-top-center"});
            });
        });
    </script>

    {{--<script>--}}
      {{--function zheng(data,par=0){--}}
          {{--var a={};--}}
            {{--for(var i=0;i<data.length;i++) {--}}

                {{--a = {'id': data[i].id, 'parentid': par, 'order': i};--}}
                {{--if (data[i].children) {--}}
                    {{--zheng(data[i].children, data[i].id);--}}
                {{--} else {--}}
                    {{--continue;--}}
                {{--}--}}
            {{--}--}}
            {{--return a;--}}
        {{--}--}}
    {{--</script>--}}
@endsection