@extends('admin/layout')
@section('header')
    <link href="{{asset('css/plugins/chosen/chosen.css')}}" rel="stylesheet">
    <link href="{{asset('css/plugins/switchery/switchery.css')}}" rel="stylesheet">
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="{{asset('js/plugins/zTree_v3-master/css/zTreeStyle/zTreeStyle.css')}}">
    <style>
        .my-table td {
            border: 1px solid #E5E6E7;
            padding: 8px;
        }

        .my-table tr td:last-child {
            cursor: pointer;
            text-align: center;
        }

        .ztree li span.button.add {
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
            *vertical-align: middle
        }

        .li_ys {
            margin: -10px;
            clear: both;
            padding-left: 10px;
        }

        .li_ys li {
            display: inline-block;
            float: left;
            text-align: center;
            font-size: 1em;
            color: #333;
            width: 100px;
            overflow: hidden;
            margin-right: 5px;
            padding: 8px;
            border-radius: 4px;
            cursor: pointer;
        }

        .li_ys .selected {
            background: #333;
            color: #fff;
        }

        .tab_box div {
            border: 1px solid red;
            height: 150px;
            width: 500px;
        }

        .form-horizontal .form-boxs {
            display: none;
        }

        .form-horizontal .form-boxs2 {
            /* display: none; */
            padding: 0 15px;
        }

        .form-horizontal .form-boxs:first-child {
            display: block;
        }

        .form-horizontal .form-boxs2 {
            display: none;
        }

        .form-horizontal .form-boxs2:first-child {
            display: block;
        }

        .ibox-content {
            padding: 5px 0;
            border: none;

        }

        .ibox {
            overflow: hidden;
        }

        .ibox-title {
            /* border: dotted 1px #ddd; */
            border: none;
        }

        #left_Box_1, #left_Box_2, #left_Box_3, #left_Box_4 {
            display: none;
        }

        #left_Box_1 {
            display: block;
        }

        .form-control-select {
            vertical-align: middle;
            padding: 6px 8px;
            height: 32;
            font-size: 13px;
            font-weight: normal;
            border-radius: 3px;
            background: #fbfbfb;
            -webkit-appearance: none;
            appearance: none;
            background-color: #f8f8f8;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28' viewBox='0 0 16 28' fill='%23777'%3E%3Cpath d='M16 17q0 .406-.297.703l-7 7Q8.406 25 8 25t-.703-.297l-7-7Q0 17.406 0 17t.297-.703T1 16h14q.406 0 .703.297T16 17zm0-6q0 .406-.297.703T15 12H1q-.406 0-.703-.297T0 11t.297-.703l7-7Q7.594 3 8 3t.703.297l7 7Q16 10.594 16 11z'/%3E%3C/svg%3E");
            background-position: right 8px center;
            background-repeat: no-repeat;
            -webkit-background-size: 8px 16px;
            background-size: 8px 16px;
            padding-right: 25px;
        }


        input[type="checkbox"]:before, input[type="radio"]:before {
            visibility: visible;
            content: "\f096";
            float: left;
            font-family: FontAwesome;
            width: 13px;
            height: 13px;
            line-height: 13px;
            font-size: 16px;
            border-radius: 5px;
            margin-right: 8px;
            text-align: left;
            font-weight: normal;
            color: #888;
        }

        input[type="checkbox"]:checked:before, input[type="radio"]:checked:before {
            content: "\f046";
            color: #666;
        }

        input[type="checkbox"], input[type="radio"] {
            visibility: hidden;
            cursor: pointer;
            position: relative;
            top: 3px;
        }

        .table.table-datalist tbody tr td label {

            font-weight: normal;
        }

        .table.table-datalist thead td label, .table.table-datalist thead td {
            font-weight: bold;
        }
        i{

        }
    </style>
    <style>
        .wrapper-content {

            width: 100%;
            height: 100%;
            position: relative;
        }

        .sep-wrap {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            display: flex;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            /* padding: 15px; */
        }

        .sep-sidebar {
            width: 250px;
            flex-shrink: 0;
            /* margin-right: 16px; */
            overflow-x: auto;
            overflow-y: auto;
            background: #f2f4f6;
            border-right: solid 1px #d5dbe0;
            box-shadow: 0 2px 2px #ddd;
            z-index: 10;
            padding-top: 15px;
        }

        .sep-sidebar::-webkit-scrollbar {
            width: 6px;

        }

        .sep-sidebar::-webkit-scrollbar:horizontal {


            height: 6px;

        }

        .sep-sidebar::-webkit-scrollbar-track:horizontal {

            border-left: none;
            border-top: solid 1px #ddd;

        }

        .sep-sidebar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.4);
            -webkit-border-radius: 0;
            border-radius: 0;
            border-left: solid 1px #ddd;

        }

        .sep-sidebar::-webkit-scrollbar-thumb {
            -webkit-border-radius: 10px;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.5);
        }

        .sep-sidebar .ibox-content {
            background: transparent;
        }

        .sep-sidebar .ibox {
            overflow: unset;
        }

        .sep-primary {
            flex: auto;
            overflow-y: auto;
            padding: 15px;
        }

        .control-sidebar {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 250px;
            z-index: 8;
        }

        .ui-resizable-handle {
            width: 5px;
            background: #ddd;
            position: absolute;
            top: 0;
            bottom: 0;
            right: -5px;
            cursor: col-resize;
            opacity: 0;
        }

        .ui-resizable-handle:hover {
            opacity: 1;
        }

        .ui-resizable-handle:before {
            position: absolute;
            top: 50%;
            right: -10px;
            width: 20px;
            height: 60px;
            line-height: 60px;
            font-family: FontAwesome;
            content: "\f039";
            color: #888;
            background: #ddd;
            margin-top: -30px;
            margin-left: -1px;
            border-radius: 0 3px 3px 0;
            display: block;
            font-size: 12px;
            -webkit-transform: scale(.6);
            text-transform: rotate(-90deg);
            text-align: center;
        }

        .edui-default .edui-editor {
            max-width: 100% !important;
            width: 100% !important;
        }

        .form-action-fixed {
            position: fixed;
            right: 40px;
            top: 16px;
            margin: 0;
            padding: 12px;
            text-indent: 0;
            border-radius: 0 0 4px 4px;
            background: rgba(200, 200, 200, 0.5);
        }
    </style>
    <style type="text/css">
        div#rMenu {
            position: absolute;
            visibility: hidden;
            top: 0;
            background-color: #555;
            text-align: left;
            padding: 2px 4px;
            z-index: 999;
        }

        div#rMenu ul li {
            margin: 1px 0;
            cursor: pointer;
            list-style: none outside none;
            background-color: #DFDFDF;
            padding: 4px;
        }
        div#rMenu ul {
            padding-left: 0;
            margin: 0;
            width: 100%;
        }

        .dropdown.bootstrap-select {
            position: relative !important;
        }

        .dropdown-menu {
            min-width: 100% !important;
            width: 100%;
        }

        .btn.dropdown-toggle.btn-default.bs-placeholder {
            background-color: #fff !important;
        }
    </style>
@endsection
@section('content')
    <body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="sep-wrap">
            <div class="sep-sidebar">
                <div class="ibox float-e-margins">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title hide">
                            基本设置
                        </div>
                        <select class="selectpicker form-control" id="site_id" name="site_id" data-live-search="true"
                                title="请选择站点" autocomplete="off">
                            <option value="">请选择站点</option>
                            @foreach ($siteList as $site)
                                <option value="{{$site->id}}">{{$site->cn_title}}</option>
                            @endforeach
                        </select>
                        <div class="ibox-content">
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="control-sidebar ui-resizable">
            </div>
            <div class="sep-primary">
                <div style="background: #fff;padding-top: 10px;border: dotted 1px #ddd; position: relative;">
                    <div id="left_Box_1">
                        <div class="ibox float-e-margins" style="    background: #fff;padding-top: 10px; ">
                            <div class="ibox-title">
                                <ul class="li_ys clearfix" id="clearfix">
                                    <li class="selected">基本设置</li>
                                    <li>模版变量</li>
                                </ul>
                            </div>
                            <div class="ibox-content">
                                <form method="get" class="form-horizontal" id="form1">
                                    <div class="form-boxs">
                                        <div class="row">
                                            <div class="col-md-8" style="padding-right:0;">
                                                <div class="form-group">
                                                    <label class="control-label" for="name"><span
                                                            class="red">* </span>样式名称：</label>
                                                    <div class=" ">
                                                        <input type="text" class="form-control" id="name" name="name"
                                                               autocomplete="off">
                                                        <div class="help-block">必须使用英文字幕或数据组合</div>
                                                    </div>
                                                    <input type="hidden" id="template_id" name="template_id">
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label" for="memo">
                                                        描述：</label>
                                                    <div class=" ">
                                                    <textarea class="form-control" rows="5" placeholder=""
                                                              id="memo"
                                                              name="memo"></textarea>
                                                        <div class="help-block">请在这里描述模板的用途</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label" for="alias">
                                                        类名：</label>
                                                    <div class="">
                                                        <input type="text" placeholder="" class="form-control"
                                                               id="css" name="css">
                                                        <div class="help-block">类名只允许使用英文+数字</div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label" for="alias">
                                                        父级id：</label>
                                                    <div class="">
                                                        <input type="text" placeholder="" class="form-control"
                                                               id="pid" name="pid">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label" for="alias">
                                                        排序：</label>
                                                    <div class="">
                                                        <input type="text" placeholder="" class="form-control"
                                                               id="sort" name="sort">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-8" style="padding-right:0;">
                                                <div class="form-group">
                                                    <label class="  control-label" for="img">
                                                        预览样式：</label>
                                                    <button type="button" class="btn btn-primary"
                                                            id="file_upload" name="file_upload">
                                                        文件上传
                                                    </button>
                                                    <input type="file" value="" style="display: none" id="uploadFile"
                                                           name="uploadFile" multiple>
                                                    <div id="images">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-action-fixed" style="text-align:right;">
                                            <button class="btn btn-primary" type="button" id="save">
                                                保存
                                            </button>
                                            {{--<button class="btn btn-white closeLayer" id="cancel">取消</button>--}}
                                        </div>
                                    </div>
                                    <div class="form-boxs">
                                        <div class="form-group" style="margin: 0;padding: 0 15px;">
                                            <div class="ibox float-e-margins">
                                                <table class="table table-datalist">
                                                    <thead>
                                                    <tr>
                                                        <td>
                                                            变量 <span onclick="addTemplateVariable(0)">[添加]</span>
                                                        </td>
                                                        <td>
                                                            标签
                                                        </td>
                                                        <td>
                                                            <label>
                                                                <input type="checkbox" id="selectAll" name="selectAll"
                                                                       style="margin-right: 5px">
                                                                全选
                                                            </label>
                                                        </td>
                                                    </tr>
                                                    </thead>
                                                    <tbody id="tbody">
                                                    @foreach($templateLibraryVar as $key=>$value)
                                                        <tr>
                                                            <td>
                                                                {{$value['variable']}} <span
                                                                    onclick="addTemplateVariable({{$value->id}})">[修改]</span>
                                                                <span
                                                                    onclick="delTemplateVariable({{$value->id}})">[删除]</span>
                                                            </td>
                                                            <td>
                                                                {{$value['tag']}}
                                                            </td>
                                                            <td style="width:100px">
                                                                <input class="selectBox" type="checkbox"
                                                                       name="selectBox"
                                                                       value="{{$value['id']}}"
                                                                       id="checkbox_{{$value['id']}}"
                                                                       style="margin-right: 8px">应用
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="rMenu">
            <ul>
                <li id="m_add" onclick="addParentMenu();">增加顶级节点</li>
                <li id="m_add" onclick="addTreeNode();">增加子节点</li>
                <li id="m_del" onclick="copyTreeNode();">复制节点</li>
                <li id="m_del" onclick="removeTreeNode();">删除节点</li>
            </ul>
        </div>
    </div>
    </body>
@endsection

@section('footer')
    <script type="text/javascript" src="{{asset('js/plugins/switchery/switchery.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/bootstrap-select.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/plugins/zTree_v3/js/jquery.ztree.core.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/plugins/zTree_v3/js/jquery.ztree.excheck.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/plugins/zTree_v3/js/jquery.ztree.exedit.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/plugins/jquery-cookie/jquery.cookie.js')}}"></script>
    <script>

        $("#selectAll").on("click", function () {
            if (this.checked) {
                $("#tbody").find("input[name='selectBox']").prop("checked", true);
            } else {
                $("#tbody").find("input[name='selectBox']").prop("checked", false);
            }
        });

        $('#clearfix li:first-child').addClass('selected');
        $('#clearfix li').click(function () {
            $(this).addClass('selected').siblings().removeClass('selected');
            $('.form-horizontal .form-boxs').eq($(this).index()).show().siblings().hide();
        });

        $(document).on('click', '[name=file_upload]', function () {
            $(this).next().trigger('click');
        });

        $(document).on('change', '[name=uploadFile]', function () {
            var formData = new FormData();

            if ($(this)[0].files.length > 10) {
                layer.alert("最多只能选择10张图片哦", {icon: 5});
                return;
            }

            for (var i = 0; i < $(this)[0].files.length; i++) {
                formData.append('files[]', $(this)[0].files[i]);
            }

            var ln;
            $.ajax({
                url: '/admin/tool/bulkUpload',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function () {
                    ln = layer.load();
                },
                complete: function () {
                    layer.close(ln);
                },
                success: function (result) {
                    $.each(result.data, function (key, value) {
                        $('#images').append('<img src="' + value.file_url + '">');
                    });
                },
                error: function (XMLHttpRequest) {
                    if (XMLHttpRequest.status === 500) {
                        layer.alert("异步请求失败", {icon: 5});
                        return;
                    }
                    layer.alert(JSON.parse(XMLHttpRequest.responseText).message, {icon: 0});
                }
            });
        });

        $("#save").click(function () {
            var data = tips.getFormValues('#form1');
            var checkedNodes = zTreeObj.getCheckedNodes();
            var nodeIds = [];
            $.each(checkedNodes, function (inx, val) {
                nodeIds.push(val.id + ':' + val.level);
            });
            var imagesList = [];
            $("#images img").each(function () {
                var _src = $(this).attr("src");
                imagesList.push(_src);
            });

            var checkboxList = [];
            $("#tbody").find("input[name='selectBox']").each(function (i, checkbox) {
                if (checkbox.checked) {
                    checkboxList.push(checkbox.value);
                }
            });

            data.images = imagesList;
            data.nodeIds = nodeIds;
            data.siteId = $('#site_id').val();
            data.variableIds = checkboxList;

            var url = '/admin/templateLibrary/saveTemplateLibrary';
            var type = 'post';
            var ajaxConfig = {
                url: url,
                type: type,
                data: data,
                success: function (result) {
                    layer.msg(result.message, {icon: 6, time: 1000});
                    setTimeout(function () {
                        window.location.reload();
                    }, 1000);
                }
            };
            tips.ajax(ajaxConfig);
        });

        var setting = {
            view: {
                dblClickExpand: false
            },
            check: {
                enable: true
            },
            callback: {
                onExpand: onExpand,
                onCollapse: onCollapse,
                onRightClick: OnRightClick,
                onClick: function (event, treeId, treeNode) {
                    console.log(treeNode);
                    $('#template_id').attr('value', treeNode.id);
                    $('#name').val(treeNode.title);
                    $('#css').val(treeNode.css);
                    $('#pid').val(treeNode.pid);
                    $('#sort').val(treeNode.sort);
                    $('#memo').val(treeNode.memo);

                    $('#selectAll').prop("checked", false);
                    $("#tbody").find("input[name='selectBox']").prop("checked", false);

                    if (treeNode.template_library_relation.length > 0) {
                        $(treeNode.template_library_relation).each(function (key, val) {
                            $('#checkbox_' + val.variable_id).prop('checked', true);
                        });
                    }
                    $('#images').empty();
                    $.each(treeNode.images, function (key, value) {
                        $('#images').append('<img  src="' + value + '">');
                    });
                },
            }
        };

        function onExpand(event, treeId, treeNode){
            var cookie = $.cookie("z_tree3");

            var z_tree = null;
            if(cookie){
                z_tree = JSON.parse(cookie);
            }

            if(!z_tree){
                z_tree = [];
            }
            if(jQuery.inArray(treeNode.id, z_tree)<0){
                z_tree.push(treeNode.id);
            }

            $.cookie("z_tree3", JSON.stringify(z_tree))
        }

        function onCollapse(event, treeId, treeNode){
            var cookie = $.cookie("z_tree3");

            var z_tree = null;
            if(cookie){
                z_tree = JSON.parse(cookie);
            }

            if(!z_tree){
                z_tree = []
            }
            var index = jQuery.inArray(treeNode.id, z_tree);

            z_tree.splice(index, 1);

            $.cookie("z_tree3", JSON.stringify(z_tree))
        }

        function OnRightClick(event, treeId, treeNode) {
            if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
                zTree.cancelSelectedNode();
                showRMenu("root", event.clientX, event.clientY);
            } else if (treeNode && !treeNode.noR) {
                zTree.selectNode(treeNode);
                showRMenu("node", event.clientX, event.clientY);
            }
        }

        function showRMenu(type, x, y) {
            $("#rMenu ul").show();
            if (type == "root") {
                $("#m_del").hide();
                $("#m_check").hide();
                $("#m_unCheck").hide();
            } else {
                $("#m_del").show();
                $("#m_check").show();
                $("#m_unCheck").show();
            }

            y += document.body.scrollTop;
            x += document.body.scrollLeft;
            rMenu.css({"top": y + "px", "left": x + "px", "visibility": "visible"});

            $("body").bind("mousedown", onBodyMouseDown);
        }

        function hideRMenu() {
            if (rMenu) rMenu.css({"visibility": "hidden"});
            $("body").unbind("mousedown", onBodyMouseDown);
        }

        function onBodyMouseDown(event) {
            if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
                rMenu.css({"visibility": "hidden"});
            }
        }

        var addCount = 1;

        function addTreeNode() {
            hideRMenu();
            var name = "NewFile";
            var newNode = {name: name};
            if (zTree.getSelectedNodes()[0]) {
                newNode.checked = zTree.getSelectedNodes()[0].checked;
                zTree.addNodes(zTree.getSelectedNodes()[0], newNode);

                //异步添加
                var pid = zTree.getSelectedNodes()[0].id;
                var url = '/admin/templateLibrary/templateLibraryAddNode';
                var ajaxConfig = {
                    url: url,
                    type: 'post',
                    data: {pid: pid, node: name},
                    success: function () {
                        window.location.reload();
                    }
                };
                tips.ajax(ajaxConfig);

            } else {
                zTree.addNodes(null, newNode);
            }
        }

        function removeTreeNode() {
            hideRMenu();
            var nodes = zTree.getSelectedNodes();
            if (nodes && nodes.length > 0) {
                if (nodes[0].children && nodes[0].children.length > 0) {
                    var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
                    if (confirm(msg) == true) {
                        zTree.removeNode(nodes[0]);
                    }
                } else {
                    zTree.removeNode(nodes[0]);
                }
                //异步删除
                var url = '/admin/templateLibrary/templateLibraryDelNode';
                var ajaxConfig = {
                    url: url,
                    type: 'post',
                    data: {id: nodes[0].id},
                    success: function () {
                        window.location.reload();
                    }
                };
                tips.ajax(ajaxConfig);
            }
        }

        function copyTreeNode() {
            var nodes = zTree.getSelectedNodes();
            //异步复制
            var url = '/admin/templateLibrary/templateLibraryCopyNode';
            var ajaxConfig = {
                url: url,
                type: 'post',
                data: {id: nodes[0].id, pid: nodes[0].pid},
                success: function () {
                    window.location.reload();
                }
            };
            tips.ajax(ajaxConfig);
        }

        function addParentMenu() {
            //异步添加顶级菜单
            var url = '/admin/templateLibrary/addParentMenu';
            var ajaxConfig = {
                url: url,
                type: 'post',
                data: {name: '新建文件'},
                success: function () {
                    window.location.reload();
                }
            };
            tips.ajax(ajaxConfig);
        }

        function addTemplateVariable(id) {
            layer.open({
                type: 2,
                content: ['/admin/templateLibrary/addVariable/' + id],
                area: ['100%', '100%'],
                title: '编辑'
            });
        }

        function delTemplateVariable(id) {
            //删除变量
            var url = '/admin/templateLibrary/delDelVariable/' + id;
            var ajaxConfig = {
                url: url,
                type: 'post',
                data: {},
                success: function () {
                    window.location.reload();
                }
            };
            tips.ajax(ajaxConfig);
        }

        var trees = JSON.parse('{!! addslashes(json_encode($trees)) !!}');
        $(document).ready(function () {
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, trees);
            zTree = $.fn.zTree.getZTreeObj("treeDemo");
            rMenu = $("#rMenu");

            var cookie = $.cookie("z_tree3");
            if(cookie){
                z_tree = JSON.parse(cookie);

                for(var i=0; i< z_tree.length; i++){
                    var node = zTree.getNodeByParam('id', z_tree[i]);
                    zTree.expandNode(node, true)
                }
            }
        });

    </script>
@endsection