@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>

        .ace_editor {
            height: 600px;
        }

        .my-table {
            width: 100%;
        }

        .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;
        }
    </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: 400px;
            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%;
        }

        .image-li img {
            width: 100%;
            max-height: 100%;
        }

        .imageDiv {
            border: 2px solid #F0F0F0;
            border-radius: 5px;
        }

        .image-li {
            list-style-type: none;
            cursor: pointer;
            float: left;
            width: 200px;
            padding: 5px 5px;
            text-align: center;
        }
    </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>
                        <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="nickname"><span
                                                            class="red">* </span>名称：</label>
                                                    <div>
                                                        <input type="text" class="form-control" id="title" name="title"
                                                               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="username_new">
                                                        描述：</label>
                                                    <div>
                                                    <textarea class="form-control" rows="5" placeholder=""
                                                              id="description"
                                                              name="description"></textarea>
                                                        <div class="help-block">请在这里描述模板的用途</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label" for="username_new">
                                                        别名：</label>
                                                    <div>
                                                        <input type="text" placeholder="" class="form-control"
                                                               id="alias" name="alias">
                                                        <div class="help-block">别名允许使用中文</div>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label" for="username_new">
                                                        排序编号：</label>
                                                    <div>
                                                        <input type="text" placeholder="" class="form-control" id="rank"
                                                               name="rank">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label" for="username_new">
                                                        父id：</label>
                                                    <div>
                                                        <input type="text" placeholder="" class="form-control"
                                                               id="parent_id" name="parent_id">
                                                    </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="username_new">
                                                        URL生成规则：</label>
                                                    <div>
                                                        <select class="form-control form-control-select"
                                                                id="sub_type" name="sub_type">
                                                            <option value="1">根据标题生成</option>
                                                            <option value="2">根据ID生成</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label" for="username_new">
                                                        限制URL深度：</label>
                                                    <div class="input-group col-sm-4 ">
                                                        <input type="text" placeholder="" class="form-control"
                                                               id="url_level"
                                                               name="url_level" value="0"> <span
                                                            class="input-group-addon">层</span>
                                                    </div>
                                                    <div class="help-block">0表示不限制</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"
                                                            onclick="addImages('alone')">
                                                        图片上传
                                                    </button>
                                                </div>
                                                <div id="images">

                                                </div>
                                            </div>
                                        </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>
                                                            变量
                                                        </td>
                                                        <td>
                                                            标签
                                                        </td>
                                                        <td>
                                                            <label>
                                                                <input type="checkbox" id="selectAll" name="selectAll"
                                                                       style="margin-right: 5px">
                                                                全选
                                                            </label>
                                                        </td>
                                                    </tr>
                                                    </thead>
                                                    <tbody id="tbody">
                                                    @foreach($template as $key=>$value)

                                                        <tr>
                                                            <td>
                                                                {{$value['name']??''}}
                                                            </td>
                                                            <td>
                                                                {{$value['description']??''}}
                                                            </td>
                                                            <td>
                                                                <label>
                                                                    <input type="checkbox" name="selectBox"
                                                                           value="{{$value['id']??0}}"
                                                                           id="checkbox_{{$value['id']??0}}"
                                                                           style="margin-right: 5px">
                                                                    应用
                                                                </label>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="form-action-fixed" style="text-align:right;">
                                <button class="btn btn-primary" type="button" id="templateSave">
                                    保存
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="left_Box_2">
                        <div class="ibox float-e-margins" style="    background: #fff;padding-top: 10px;">
                            <div class="ibox-title">
                                <ul class="li_ys clearfix" id="clearfix2">
                                    <li class="selected2">基本设置</li>
                                    <li>输入选项</li>
                                    <li>应用模版</li>
                                </ul>
                            </div>
                            <div class="ibox-content">
                                <div class="form-action-fixed" style="text-align:right;">
                                    <button class="btn btn-primary" type="button" id="variableSave">
                                        保存
                                    </button>
                                </div>
                                <form method="get" class="form-horizontal" id="form2">
                                    <div class="form-boxs2">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <div class="form-group">
                                                    <label class="control-label" for="nickname">
                                                        <span class="red">* </span> 变量名：
                                                    </label>
                                                    <div>
                                                        <input type="text" class="form-control" id="title2"
                                                               name="title2" autocomplete="off">
                                                        <span class="help-block">变量名用于前端调取 <code>{$变量名}</code></span>
                                                    </div>
                                                    <input type="hidden" id="variable_id" name="variable_id">
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label" for="username_new">
                                                        描述：
                                                    </label>
                                                    <div>
                                                        <textarea class="form-control" rows="5" placeholder=""
                                                                  id="description2" name="description"></textarea>
                                                        <div class="help-block">请在这里描述变量的说明，会在输入变量时作为提示</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label" for="username_new">
                                                        标签名：
                                                    </label>
                                                    <div>
                                                        <input type="text" placeholder="" class="form-control"
                                                               id="alias2" name="alias">
                                                        <span class="help-block">用作输入框的名称</span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label" for="username_new">
                                                        排序编号：</label>
                                                    <div>
                                                        <input type="text" placeholder="" class="form-control"
                                                               id="rank2"
                                                               name="rank">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-boxs2">
                                        <div class="form-group">
                                            <label class="control-label" for="username_new">
                                                输入类型：</label>
                                            <div>
                                                <select class="form-control form-control-select"
                                                        id="input_type" name="input_type" onchange="onchangeImages()">
                                                    <option value="text">单行文本</option>
                                                    <option value="textarea">多行文本</option>
                                                    <option value="richtext">富文本</option>
                                                    <option value="taginput">Tag Input</option>
                                                    <option value="select">下拉菜单</option>
                                                    <option value="checkbox">复选框</option>
                                                    <option value="radio">单选钮</option>
                                                    <option value="date">日期</option>
                                                    <option value="file">文件上传</option>
                                                    <option value="image">图片上传</option>
                                                    <option value="resource">资源选择器</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group input_opts">
                                            <label class="control-label" for="username_new">
                                                输入选项：</label>
                                            <div>
                                            <textarea class="form-control" rows="5" placeholder="" id="input_opts"
                                                      name="input_opts">
                                            </textarea>
                                            </div>
                                        </div>
                                        <div class="form-group limit">
                                            <label class="control-label" for="username_new">
                                                数量限制：</label>
                                            <div>
                                                <input type="text" placeholder="" class="form-control" id="input_length"
                                                       name="input_length" value="0">
                                            </div>
                                        </div>
                                        <div class="form-group images" style="display: none">
                                            <label class="control-label" for="username_new">
                                                图片宽度：</label>
                                            <div>
                                                <input type="text" placeholder="" class="form-control" id="width"
                                                       name="width" value="0">
                                            </div>
                                        </div>
                                        <div class="form-group images" style="display: none">
                                            <label class="control-label" for="username_new">
                                                图片高度：</label>
                                            <div>
                                                <input type="text" placeholder="" class="form-control" id="height"
                                                       name="height" value="0">
                                            </div>
                                        </div>
                                        <div class="form-group images" style="display: none">
                                            <label class="control-label" for="username_new">
                                                图片大小：</label>
                                            <div>
                                                <input type="text" placeholder="" class="form-control" id="size"
                                                       name="size" value="0">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label" for="username_new">
                                                默认值：</label>
                                            <div>
                                            <textarea class="form-control" rows="5" placeholder="" id="input_value"
                                                      name="input_value">
                                            </textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label" for="username_new">
                                                正则检查：</label>
                                            <div>
                                                <input type="text" placeholder="" class="form-control" id="regex_match"
                                                       name="regex_match">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label" for="username_new">
                                                检查提示：</label>
                                            <div>
                                                <input type="text" placeholder="" class="form-control" id="regex_error"
                                                       name="regex_error" value="0">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-boxs2">
                                        <div class="form-group">
                                            <div class="ibox float-e-margins">
                                                <table class="table table-datalist">
                                                    <thead>
                                                    <tr>
                                                        <td>
                                                            模版
                                                        </td>
                                                        <td>
                                                            描述
                                                        </td>
                                                        <td>
                                                            <input type="checkbox" name="selectAll2" id="selectAll2"
                                                                   style="margin-right: 5px">
                                                            全选
                                                        </td>
                                                    </tr>
                                                    </thead>
                                                    <tbody id="tbody2">
                                                    @foreach($variable as $key=>$value)
                                                        @if($value['level']==2)
                                                            <tr>
                                                                <td>
                                                                    {{$value['name']??''}}
                                                                </td>
                                                                <td>
                                                                    {{$value['alias']??''}}
                                                                </td>
                                                                <td>
                                                                    <label>
                                                                        <input class="selectBox2" type="checkbox"
                                                                               name="selectBox2"
                                                                               value="{{$value['id']??0}}"
                                                                               id="checkbox2_{{$value['id']??0}}"
                                                                               style="margin-right: 8px">应用
                                                                    </label>
                                                                </td>
                                                            </tr>
                                                        @endif
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="rMenu">
            <ul>
                <li id="m_add" onclick="addTreeNode();">增加子节点</li>
                <li id="m_del" onclick="removeTreeNode();">删除节点</li>
            </ul>
        </div>
    </div>
    </body>
@endsection

@section('footer')
    <script src="{{asset('js/bootstrap-select.min.js')}}"></script>
    <script src="{{asset('js/plugins/switchery/switchery.js')}}"></script>
    <script src="{{asset('js/plugins/zTree_v3-master/js/jquery.ztree.core.min.js')}}"></script>
    <script src="{{asset('js/plugins/zTree_v3-master/js/jquery.ztree.all.min.js')}}"></script>
    <script src="{{asset('js/plugins/zTree_v3-master/js/jquery.ztree.excheck.min.js')}}"></script>
    <script src="{{asset('js/plugins/layDate-v5.0.9/laydate/laydate.js')}}"></script>
    <script src="{{asset('js/plugins/ace-builds-master/src-min/ace.js')}}"></script>
    <script src="{{asset('js/plugins/jquery-cookie/jquery.cookie.js')}}"></script>

    <script>

        $('#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();
        });

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

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

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

        function addImages(type) {
            layer.open({
                type: 2,
                content: ['/admin/stencil/images/{{$siteId}}/' + type],
                area: ['60%', '70%'],
                title: '编辑'
            });
        }

        var setting = {
            view: {
                fontCss: getFont,
                dblClickExpand: false
            },
            callback: {
                onExpand: onExpand,
                onCollapse: onCollapse,
                onRightClick: OnRightClick,
                onClick: function (event, treeId, treeNode) {
                    console.log(treeNode);
                    if (treeNode.type === 1) {

                        $('#left_Box_1').show();
                        $('#left_Box_2').hide();
                        $('#left_Box_3').hide();

                        $("#template_id").val(treeNode.id);
                        $("#title").val(treeNode.title);
                        $("#description").val(treeNode.description);
                        $("#alias").val(treeNode.alias);
                        $("#rank").val(treeNode.rank);
                        $('#parent_id').val(treeNode.parent_id);
                        $('#url_level').val(treeNode.url_level);

                        $("#tbody").find("input[name='selectBox']").prop("checked", false);
                        if (treeNode.varIdList.length > 0) {
                            $(treeNode.varIdList).each(function (key, val) {
                                $('#checkbox_' + val).prop('checked', true);
                            });
                        }

                        var object = $('#images');
                        object.empty();
                        if (treeNode.images && treeNode.images.length > 0) {
                            var thumb = '';
                            $.each(treeNode.images, function (key, value) {
                                var thumb =
                                    '<li class="image-li">' +
                                    '<div class="imageDiv">' +
                                    '<div style="justify-content: center;align-items: center;flex-direction: column;overflow: hidden;margin: auto;">' +
                                    '<img src="' + value + '" alt="' + value + '">' +
                                    '</div>' +
                                    '<div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 10px;">' + value + '</div>' +
                                    '<a href="javascript:;" class="js-del-item-alone">' +
                                    '<i class="fa fa-remove"></i>移除' +
                                    '</a>' +
                                    '</div>' +
                                    '</li>';
                                object.append(thumb);
                            });
                            object.append(thumb);
                        }
                    }
                    if (treeNode.type === 2) {

                        $('#left_Box_2').show();
                        $('#left_Box_1').hide();
                        $('#left_Box_3').hide();

                        $("#variable_id").val(treeNode.id);
                        $("#title2").val(treeNode.title);
                        $("#description2").val(treeNode.description);
                        $("#alias2").val(treeNode.alias);
                        $("#rank2").val(treeNode.rank);
                        $("#input_opts").text(treeNode.input_opts);
                        $("#input_length").val(treeNode.input_length);
                        $("#width").val(treeNode.width);
                        $("#height").val(treeNode.height);
                        $("#size").val(treeNode.size);
                        $("#input_type").val(treeNode.input_type);
                        $("#input_value").val(treeNode.input_value);
                        $("#regex_match").val(treeNode.regex_match);
                        $("#regex_error").val(treeNode.regex_error);

                        $("#tbody2").find("input[name='selectBox2']").prop("checked", false);
                        if (treeNode.templateIdList.length > 0) {
                            $(treeNode.templateIdList).each(function (key, val) {
                                $('#checkbox2_' + val).prop('checked', true);
                            });
                        }
                        onchangeImages();
                    }
                }
            }
        };

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

            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_tree2", JSON.stringify(z_tree))
        }

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

            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_tree2", 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"});
            }
        }

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

                //异步添加
                var pid = zTree.getSelectedNodes()[0].id;
                var level = zTree.getSelectedNodes()[0].level;
                var type = zTree.getSelectedNodes()[0].type;//区分模版提交还是变量
                var url = '/admin/tpl/templateAddNode/{{$siteId}}';
                var ajaxConfig = {
                    url: url,
                    type: 'post',
                    data: {pid: pid, node: name, type: type, level: level},
                    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/tpl/templateDelNode/{{$siteId}}';
                var ajaxConfig = {
                    url: url,
                    type: 'post',
                    data: {id: nodes[0].id, pid: nodes[0].parent_id},
                    success: function () {
                        window.location.reload();
                    }
                };
                tips.ajax(ajaxConfig);
            }
        }

        function getFont(treeId, node) {
            return {"font-weight": "bold"};
        }

        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_tree2");
            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)
                }
            }
        });

        function onchangeImages() {
            var input_type = $('#input_type').val();
            if (input_type === 'image') {
                $(".images").css("display", "block");
                $(".limit").css("display", "block");
            } else {
                $(".images").css("display", "none");
                $(".limit").css("display", "none");
            }
            if (input_type === 'select' || input_type === 'radio' || input_type === 'checkbox') {
                $(".input_opts").css("display", "block");
                $(".limit").css("display", "none");
            }
            if (input_type === 'text' || input_type === 'textarea' || input_type === 'richtext' || input_type === 'date' || input_type === 'file' || input_type === 'taginput') {
                $(".input_opts").css("display", "none");
                $(".limit").css("display", "none");
            }
            if (input_type === 'resource') {
                $(".input_opts").css("display", "none");
                $(".limit").css("display", "block");
            }
        }

        //删除图片
        $(document).on('click', '.js-del-item-alone', function () {
            $(this).parent().parent().remove();
        });

        $("#templateSave").click(function () {
            var data = tips.getFormValues('#form1');
            var images = $('#images').find("img");
            var imageList = [];
            $(images).each(function (key, value) {
                imageList.push($(value).attr('src'));
            });
            data.images = imageList;
            var checkboxList = [];
            $("#tbody").find("input[name='selectBox']").each(function (i, checkbox) {
                if (checkbox.checked) {
                    checkboxList.push(checkbox.value);
                }
            });
            data.checkboxList = checkboxList;
            var url = '/admin/tpl/templateSave/{{$siteId}}';
            var type = 'post';
            var ajaxConfig = {
                url: url,
                type: type,
                data: data,
                success: function (result) {
                    layer.msg(result.message, {icon: 6, time: 1000});
                    window.location.reload();
                }
            };
            tips.ajax(ajaxConfig);
        });

        $("#variableSave").click(function () {
            var data = tips.getFormValues('#form2');
            var checkboxList = [];
            $("#tbody2").find("input[name='selectBox2']").each(function (i, checkbox) {
                if (checkbox.checked) {
                    checkboxList.push(checkbox.value);
                }
            });
            data.checkboxList = checkboxList;
            var url = '/admin/tpl/variableSave/{{$siteId}}';
            var type = 'post';
            var ajaxConfig = {
                url: url,
                type: type,
                data: data,
                success: function (result) {
                    layer.msg(result.message, {icon: 6, time: 1000});
                    window.location.reload();
                }
            };
            tips.ajax(ajaxConfig);
        });

    </script>
@endsection