@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>
        .ztree {
            margin: 0;
            padding: 5px;
            color: #555;
            position: relative;
            z-index: 100;
        }

        .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: 20px;
        }

        .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-boxs:first-child {
            display: block;
        }

        .hide {
            display: none;
        }

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

        }

        .ibox {
            overflow: hidden;
        }

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

        .help-block {
            display: block;
            margin-top: 5px;
            margin-bottom: 0px;
            color: #737373;
        }

        .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
            margin: 4px 0 0 !important;
            margin-left: -20px !important;
        }

        .checkbox .control-label {
            padding-top: 0 !important;
        }

        .checkbox label {
            margin-bottom: 1px !important;
            /* padding-top:0 !important; */
            margin-right: 6px;
        }

        .radio label {
            margin-bottom: 1px !important;
            /* padding-top:0 !important; */
            margin-right: 6px;
        }

        .form-control-select {
            vertical-align: middle;
            padding: 6px 8px;
            font-size: 13px;
            font-weight: normal;
            border-radius: 3px;
            -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;
        }

        input[type="radio"]:before {
            content: "\f10c";
        }

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

        input[type="radio"]:checked:before {
            content: "\f192";
            color: #1fb5ad;
        }

        .ztree li span.button.ico_docu:before {
            content: "\f0f6";
        }

    </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);
        }

        .sui-resource-selector {
            height: auto;
            padding: 5px;
            background: #fff;
            overflow: hidden;
        }

        .sui-resource-selector .sui-selector-value {
            display: none;
        }

        .sui-resource-selector .sui-selector-box {
            position: relative;
            background: #fff;
            border-radius: 4px 4px 0 0;
        }

        .sui-resource-selector .sui-selector-btns {
            padding: 7px 10px;
            position: relative;
            overflow: hidden;
            min-height: 30px;
            background: #f9f9f9;
            margin: -5px;
            width: 100%;
        }

        .sui-resource-selector .sui-selector-box .img-item {
            position: relative;
            float: left;
            width: 33.33%;
            margin: 0;
            background: none;
        }

        .sui-resource-selector .sui-selector-box .img-item .box {
            position: relative;
            background: #f0f0f0;
            box-shadow: 0 0 3px #ddd;
            border: solid 1px #ddd;
            padding-left: 100px;
            margin: 5px;
            height: 102px;
            border-radius: 4px;
            overflow: hidden;
        }

        .sui-resource-selector .sui-selector-box .img-item .box .thumb {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100px;
            height: 100px;
            line-height: 96px;
            text-align: center;
            background: #f8f8f8;
        }

        .sui-resource-selector .sui-selector-box img, .sui-resource-selector .sui-selector-box .img-item img {
            max-width: 100%;
            max-height: 100%;
        }

        .cutstr {
            display: block;
            height: 1.5em;
            line-height: 1.5em;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sui-resource-selector .sui-selector-box .img-item .box .title {
            margin: 5px 10px;
            font-weight: bold;
        }

        .sui-resource-selector .sui-selector-box .img-item .box .summary {
            margin: 5px 10px;
            line-height: 1.4em;
            height: 4.2em;
            overflow: hidden;
            color: #777;
        }

        .sui-resource-selector .sui-selector-box .img-item .operate {
            position: absolute;
            top: 1px;
            right: 1px;
            background-color: rgba(0, 0, 0, 0.75);
            line-height: 1em;
            padding: 3px 5px;
        }

        .sui-resource-selector .sui-selector-box .img-item .operate a {
            color: #fff;
        }

        .sui-resource-selector .sui-selector-btns .btn {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            border-radius: 0;
            font-size: 14px;
            color: #333;
        }

        .float-e-margins .btn {
            margin-bottom: 0px;
        }

        .modal {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1050;
            display: none;
            overflow: hidden;
            -webkit-overflow-scrolling: touch;
            outline: 0;
        }

        .sui-resource-explorer {
            padding: 20px 0;
            margin: -10px;
        }

        .sui-resource-explorer.pop {
            margin-top: 10px;
        }

        .sui-resource-explorer dl {
            background: #f0f0f0;
            box-shadow: 0 0 3px #ddd;
            border: solid 1px #ddd;
            border-radius: 3px;
            padding: 8px;
            cursor: pointer;
        }

        .sui-resource-explorer.pop dl {
            padding: 2px;
            position: relative;
            overflow: hidden;
        }

        .sui-resource-explorer.pop dl {
            padding-left: 110px;
            min-height: 100px;
        }

        .sui-resource-explorer dl .thumb {
            display: block;
            height: 160px;
            width: 100%;
            text-align: center;
            line-height: 156px;
            overflow: hidden;
            background: #fff;
        }

        .sui-resource-explorer.pop dl .thumb {
            height: 100px;
            width: 100%;
            text-align: center;
            line-height: 96px;
        }

        .sui-resource-explorer.pop dl .thumb {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            overflow: hidden;
        }

        .sui-resource-explorer.pop dl .fa {
            position: absolute;
            right: 6px;
            top: 6px;
            color: #1fb5ad;
            font-size: 14px;
            display: none;
        }

        .cutstr {
            display: block;
            height: 1.5em;
            line-height: 1.5em;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sui-resource-explorer dl .filename, .sui-resource-explorer dl .title, .sui-resource-explorer dl .summary {
            margin: 3px;
        }

        .sui-resource-explorer.pop dl .title {
            font-weight: bold;
        }

        .sui-resource-explorer.pop dl.selected {
            border-color: #1fb5ad;
            background: #1fb5ad;
        }

        .sui-resource-explorer.pop dl.selected .filename, .sui-resource-explorer.pop dl.selected .title, .sui-resource-explorer.pop dl.selected .summary {
            color: #fff;
        }

        .sui-resource-explorer.pop dl.selected .filename, .sui-resource-explorer.pop dl.selected .title, .sui-resource-explorer.pop dl.selected .summary {
            color: #fff;
        }

        .pagination {
            vertical-align: middle;
        }

        .pagination.pagination-sm {
            margin: 0;
        }

        .pagination > li {
            display: inline;
        }

        .pagination li a {
            color: #333;
        }

        .pagination.pagination-sm li a {
            height: 28px;
            padding: 4px 10px;
            vertical-align: middle;
        }

        .pagination li.active a, .pagination li.active a:hover {
            background: #f0f0f0;
            border-color: #ddd;
            color: #333;
        }

        .form-control-select {
            max-width: 100%;
        }

        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-content">
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sep-primary">
                <div style="background: #fff;padding-top: 10px;border: dotted 1px #ddd; position: relative;">
                    <div class="ibox-title">
                        <ul class="li_ys clearfix" id="clearfix">
                            <li class="selected">基本设置</li>
                            <li>更多设置</li>
                            <li>SEO设置</li>
                            <li>模版变量</li>
                        </ul>
                    </div>
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <form method="post" class="form-horizontal" id="form">
                                <div class="form-boxs">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <label class="control-label" for="title"><span class="red">* </span>主标题</label>
                                                <input type="text" class="form-control" id="title" name="title"
                                                       autocomplete="off">
                                                <input type="hidden" id="index_id" name="index_id">
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label" for="subtitle">副标题</label>
                                                <input type="text" class="form-control" id="subtitle" name="subtitle"
                                                       autocomplete="off">
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label" for="summary">内容摘要</label>
                                                <textarea class="form-control" rows="5" placeholder="" id="summary"
                                                          name="summary"></textarea>
                                                <div class="help-block">此项为空使，系统会自动截取正文前200个字符</div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label" for="tpl_id">选择模版</label>
                                                <select class="form-control form-control-select"
                                                        id="tpl_id" name="tpl_id">
                                                    <option value="0">请选择模版</option>
                                                    @foreach ($templateList as $key => $value)
                                                        @if(!$value->alias)
                                                            <option value="{{$value->id}}">{{$value->name}}</option>
                                                        @else
                                                            <option value="{{$value->id}}">{{$value->name}}
                                                                -{{$value->alias}}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label" for="css_id">请选择样式</label>
                                                <select class="form-control form-control-select"
                                                        id="css_id" name="css_id">
                                                    <option value="0">请选择样式</option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label" for="alias">URL别名(自动生成)</label>
                                                <input type="text" placeholder="" class="form-control" id="alias"
                                                       name="alias">
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label" for="menu_text">导航标题</label>
                                                <input type="text" placeholder="" class="form-control" id="menu_text"
                                                       name="menu_text">
                                            </div>
                                            <div class="form-group">
                                                <div class="checkbox">
                                                    <label class="control-label" for="deny_spider">
                                                        <input type="checkbox" id="deny_spider" name="deny_spider"
                                                               class="js-switch-case1">禁止搜索引擎抓取
                                                    </label>
                                                    <label class="control-label" for="is_hidemenu">
                                                        <input type="checkbox" id="is_hidemenu" name="is_hidemenu"
                                                               class="js-switch-case2">
                                                        在导航中隐藏
                                                    </label>
                                                    <label class="control-label" for="is_enabled">
                                                        <input type="checkbox" id="is_enabled" name="is_enabled"
                                                               class="js-switch-case3">立即发布
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="translate_content">内容正文</label>
                                        <div id="div1" class="text"></div>
                                    </div>
                                </div>
                                <div class="form-boxs">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <div class="form-group">
                                                <label class="control-label" for="content_type">
                                                    内容类型
                                                </label>
                                                <select class="form-control form-control-select" id="content_type"
                                                        name="content_type">
                                                    <option value="html">HTML</option>
                                                    <option value="js">JSON</option>
                                                    <option value="pdf">PDF</option>
                                                    <option value="txt">TEXT</option>
                                                    <option value="xml">XML</option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label class=" control-label" for="redirect">重定向</label>
                                                <input type="text" placeholder="" class="form-control" id="redirect"
                                                       name="redirect">
                                                <div class="checkbox">
                                                    <label class=" control-label" for="is_301">
                                                        <input type="checkbox" id="is_301" name="is_301">开启301跳转
                                                    </label>
                                                </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="col-md-4">
                                            <div class="form-group">
                                                <label class=" control-label" for="publish_time">发布时间</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control lay-datetime deadline"
                                                           id="publish_time" name="publish_time">
                                                    <span class="input-group-addon"><i
                                                            class="fa fa-calendar"></i></span>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class=" control-label" for="expired_time">截止时间</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control lay-datetime deadline"
                                                           id="expired_time" name="expired_time">
                                                    <span class="input-group-addon"><i
                                                            class="fa fa-calendar"></i></span>
                                                </div>
                                            </div>
                                            <div class="form-group" style="display: flex">
                                                <div style="margin-right: 20px">
                                                    <label class=" control-label" for="rank">排序编号</label>
                                                    <input type="text" placeholder="" class="form-control" id="rank"
                                                           name="rank" style="width:120px">
                                                </div>
                                                <div>
                                                    <label class=" control-label" for="parent_id">父级id</label>
                                                    <input type="text" placeholder="" class="form-control"
                                                           id="parent_id" name="parent_id" style="width:120px">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-boxs">
                                    <div class="form-group">
                                        <label class="control-label" for="seo_title">SEO标题</label>
                                        <input type="text" placeholder="" class="form-control" id="seo_title"
                                               name="seo_title">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="seo_keywords">SEO关键词</label>
                                        <textarea class="form-control" rows="5" placeholder="" id="seo_keywords"
                                                  name="seo_keywords"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="seo_description">SEO描述</label>
                                        <textarea class="form-control" rows="5" placeholder="" id="seo_description"
                                                  name="seo_description"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox">
                                            <label class="control-label" for="is_freeze_url">
                                                <input type="checkbox" id="is_freeze_url" name="is_freeze_url">绑定URI
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group uri">
                                        <label class="control-label" for="uri">URI 地址(自动生成)</label>
                                        <input type="text" placeholder="" class="form-control" id="uri" name="uri">
                                    </div>
                                </div>
                                <div class="form-boxs" id="tpl">

                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="form-action-fixed" style="text-align:right;">
                        <button class="btn btn-primary" type="button" id="indexSave">
                            保存
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="default-dialog" tabindex="-1" role="dialog" aria-hidden="false"></div>
    <div id="rMenu">
        <ul>
            <li id="m_add" onclick="addTreeNode();">增加子节点</li>
            <li id="m_add_father" onclick="addParentMenu();">增加顶级节点</li>
            <li id="m_del" onclick="removeTreeNode();">删除</li>
            <li id="m_recovery" onclick="recoveryTreeNode();">恢复</li>
            <li id="m_preview" onclick="preview();">预览</li>
            <li id="m_copy" onclick="copyTreeNode();">复制节点</li>
        </ul>
    </div>
    <input type="hidden" id="new_pid">
    <input type="hidden" id="new_title">
    </body>
@endsection

@section('footer')
    <script src="{{asset('js/plugins/chosen/chosen.jquery.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/js-base64-main/base64.js')}}"></script>
    <script src="{{asset('js/plugins/jquery-cookie/jquery.cookie.js')}}"></script>
    <script src="{{asset('js/plugins/sortable/Sortable.js')}}"></script>

    <!-- 引入 wangEditor.min.js -->
    <script src="{{asset('js/plugins/wangEditor/wangEditor.min.js')}}"></script>
    <script>

        //富文本
        var E = window.wangEditor;
        var editor = new E('#div1');
        // 配置 server 接口地址
        editor.config.uploadImgServer = '/admin/stencil/editorUpload/{{$siteId}}';
        editor.config.uploadFileName = 'editorFile';
        editor.config.uploadImgMaxLength = 5;// 一次最多上传 5 个图片
        editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
        editor.config.uploadImgMaxSize = 5 * 1024 * 1024;// 5M
        editor.create();
        //富文本变量列表
        var editorList = [];
        //复选框变量列表
        var checkboxList = [];
        //资源变量列表
        var resourceList = [];
        //图片变量列表
        var imageList = [];
        //文件变量列表
        var fileList = [];

        //时间插件
        lay('.deadline').each(function () {
            laydate.render({
                elem: this
                , trigger: 'click'
            });
        });


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

        //左侧菜单树
        var setting = {
            view: {
                fontCss: getFont,
                dblClickExpand: false
            },
            edit: {
                enable: true,
                showRemoveBtn: false,
                showRenameBtn: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeDrag: beforeDrag,
                beforeDrop: beforeDrop,
                onExpand: onExpand,
                onCollapse: onCollapse,
                onRightClick: OnRightClick,
                onClick: function (event, treeId, treeNode) {
                    //重新设置编辑器内容
                    editor.txt.html('');
                    if (treeNode.content) {
                        editor.txt.html(treeNode.content);
                    }
                    //模版联动样式
                    changeCss(treeNode.tpl_id, treeNode.css_id);
                    //模版联动变量
                    changeTemplateVariableList(treeNode.tpl_id, treeNode.id);

                    var object = $('#images');
                    object.empty();
                    if (treeNode.thumb) {
                        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="' + treeNode.thumb + '" alt="' + treeNode.thumb + '">' +
                            '</div>' +
                            '<div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 10px;">' + treeNode.thumb + '</div>' +
                            '<a href="javascript:;" class="js-del-item-alone">' +
                            '<i class="fa fa-remove"></i>移除' +
                            '</a>' +
                            '</div>' +
                            '</li>';
                        object.append(thumb);
                    }
                    $("#index_id").val(treeNode.id);
                    $("#title").val(treeNode.title);

                    $('#parent_id').val(treeNode.parent_id);

                    if (!treeNode.content_type) {
                        treeNode.content_type = 'html';
                    }
                    $("#content_type").val(treeNode.content_type);

                    if (!treeNode.tpl_id) {
                        treeNode.tpl_id = 0;
                    }
                    $("#tpl_id").val(treeNode.tpl_id);

                    $("#subtitle").val(treeNode.subtitle);
                    $("#alias").val(treeNode.alias);
                    $('#summary').val(treeNode.summary);
                    $("#uri").val(treeNode.uri);
                    $("#menu_text").val(treeNode.menu_text);

                    $('#redirect').val(treeNode.redirect);
                    if (treeNode.publish_time) {
                        $('#publish_time').val(treeNode.publish_time);
                    }
                    if (treeNode.expired_time) {
                        $('#expired_time').val(treeNode.expired_time);
                    }
                    $('#rank').val(treeNode.rank);

                    $('#seo_title').val(treeNode.seo_title);
                    $('#seo_keywords').val(treeNode.seo_keywords);
                    $('#seo_description').val(treeNode.seo_description);

                    var denySpider = $('#deny_spider');
                    denySpider.prop('checked', false);
                    if (treeNode.deny_spider === 1) {
                        denySpider.prop('checked', true);
                    }

                    var isHidemenu = $('#is_hidemenu');
                    isHidemenu.prop('checked', false);
                    if (treeNode.is_hidemenu === 1) {
                        isHidemenu.prop('checked', true);
                    }
                    var isEnabled = $('#is_enabled');
                    isEnabled.prop('checked', false);
                    if (treeNode.is_enabled === 1) {
                        isEnabled.prop('checked', true);
                    }

                    var is301 = $('#is_301');
                    is301.prop('checked', false);
                    if (treeNode.is_301 === 1) {
                        is301.prop('checked', true);
                    }

                    var isFreezeUrl = $('#is_freeze_url');
                    isFreezeUrl.prop('checked', false);
                    if (treeNode.is_freeze_url === 1) {
                        isFreezeUrl.prop('checked', true);
                    }
                }
            }
        };

        function beforeDrag(treeId, treeNodes) {
            for (var i = 0, l = treeNodes.length; i < l; i++) {
                if (treeNodes[i].drag === false) {
                    return false;
                }
            }
            return true;
        }

        function beforeDrop(treeId, treeNodes, targetNode, moveType) {

            var pid;
            if (targetNode === null) {
                pid = 0;
            } else {
                pid = targetNode.id;
            }
            var url = '/admin/stencil/indexMoveNode/{{$siteId}}';
            var ajaxConfig = {
                url: url,
                type: 'post',
                data: {id: treeNodes[0].id, pid: pid, type: moveType},
                success: function () {
                }
            };
            tips.ajax(ajaxConfig);

            return targetNode ? targetNode.drop !== false : true;
        }

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

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

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

            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_tree1", 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_add").show();
                $("#m_add_father").show();
                $("#m_del").show();
                $("#m_recovery").show();
                $("#m_preview").show();
                $("#m_copy").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]) {
                zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
                $('#new_pid').val(zTree.getSelectedNodes()[0].id);
            } else {
                zTree.addNodes(null, newNode);
            }
        }

        function removeTreeNode() {
            hideRMenu();
            layer.confirm('确定要删除这个节点(如果是父节点子节点也会被删除)吗?', {icon: 3, title: '确认'}, function () {
                //异步删除
                var nodes = zTree.getSelectedNodes();
                if (!nodes[0]) {
                    layer.msg('请选择节点', {icon: 2});
                    return;
                }
                var url = '/admin/stencil/indexDelNode/{{$siteId}}';
                var ajaxConfig = {
                    url: url,
                    type: 'post',
                    data: {id: nodes[0].id, type: 2},
                    success: function (result) {
                        layer.msg(result.message, {icon: 1});
                        window.location.reload();
                    }
                };
                tips.ajax(ajaxConfig);
            });
        }

        function recoveryTreeNode() {
            hideRMenu();
            layer.confirm('确定要恢复这个节点(如果是父节点子节点也会被恢复)吗?', {icon: 3, title: '确认'}, function () {
                var nodes = zTree.getSelectedNodes();
                if (!nodes[0]) {
                    layer.msg('请选择节点', {icon: 2});
                    return;
                }
                var url = '/admin/stencil/indexDelNode/{{$siteId}}';
                var ajaxConfig = {
                    url: url,
                    type: 'post',
                    data: {id: nodes[0].id, type: 1},
                    success: function (result) {
                        layer.msg(result.message, {icon: 1});
                        window.location.reload();
                    }
                };
                tips.ajax(ajaxConfig);
            });
        }

        function copyTreeNode() {
            layer.confirm('确定拷贝这个文件(目录)吗?', {icon: 3, title: '确认'}, function () {
                var nodes = zTree.getSelectedNodes();
                //异步复制
                var url = '/admin/stencil/indexCopyNode/{{$siteId}}';
                var ajaxConfig = {
                    url: url,
                    type: 'post',
                    data: {id: nodes[0].id, pid: nodes[0].pid},
                    success: function (result) {
                        layer.msg(result.message, {icon: 1});
                        window.location.reload();
                    }
                };
                tips.ajax(ajaxConfig);
            });
        }

        function preview() {
            var nodes = zTree.getSelectedNodes();
            window.open('http://{{$site->domain??''}}/' + nodes[0].uri);
        }

        function addParentMenu() {
            layer.confirm('确定创建顶级节点吗?', {icon: 3, title: '确认'}, function () {
                //异步添加顶级菜单
                var url = '/admin/stencil/addParentMenu/{{$siteId}}';
                var ajaxConfig = {
                    url: url,
                    type: 'post',
                    data: {name: 'NewFile'},
                    success: function (result) {
                        layer.msg(result.message, {icon: 1}, function () {
                            window.location.reload();
                        });
                    }
                };
                tips.ajax(ajaxConfig);
            });
        }

        function getFont(treeId, node) {
            var status = node.status;
            if (status === 2) {
                return {"text-decoration": "line-through", "font-weight": "bold"};
            } else {
                return {"font-weight": "bold"};
            }
        }

        //单行文本
        function text(item) {
            return '<div class="form-group">' +
                '<label class="control-label" for="' + item.name + '" >' + item.caption + '</label>' +
                '<div >' +
                '<input type="text" class="form-control" id="' + item.name + '" name="' + item.name + '" value="' + item.value + '">' +
                '</div>' +
                '</div>';
        }

        //多行文本
        function textarea(item) {
            return '<div class="form-group">' +
                '<label class="control-label" for="' + item.name + '" >' + item.caption + '</label>' +
                '<div >' +
                '<textarea class="form-control" rows="6" id="' + item.name + '" name="' + item.name + '">' + item.value + '</textarea>' +
                '</div>' +
                '</div>';
        }

        //富文本
        function richtext(item) {
            return '<div class="form-group">' +
                '<label class="control-label" for="' + item.name + '" >' + item.caption + '</label>' +
                '<div id="' + item.name + '" class="editor" ></div>' +
                '</div>';
        }

        //tag 文本框
        function taginput(item) {
            return '<div class="form-group">' +
                '<label class="control-label" for="' + item.name + '" >' + item.caption + '</label>' +
                '<div >' +
                '<textarea class="form-control" rows="6" id="' + item.name + '" name="' + item.name + '">' + item.value + '</textarea>' +
                '</div>' +
                '</div>';
        }

        //下拉列表
        function select(item) {
            var str =
                '<div class="form-group">' +
                '<label class="control-label" for="' + item.name + '" >' + item.caption + '</label>' +
                '<select class="form-control"  id="' + item.name + '" name="' + item.name + '">';
            if (item.input_opts && item.input_opts.length > 0) {
                $.each(item.input_opts, function (index, value) {
                    if (value === item.value) {
                        str += '<option value="' + value + '" selected="selected">' + value;
                    } else {
                        str += '<option value="' + value + '">' + value;
                    }
                });
            }
            str +=
                '</select>' +
                '</div>';
            return str;
        }

        //复选框
        function checkbox(item) {
            var str =
                '<div class="form-group">' +
                '<label class="control-label" for="' + item.name + '" >' + item.caption + '</label>' +
                '<div class="checkbox checkbox-list">';
            if (item.input_opts && item.input_opts.length > 0) {
                $.each(item.input_opts, function (index, value) {
                    if (item.value && item.value.indexOf(value) !== -1) {
                        str += '<label class="sui-custom-radio" ><input type="checkbox"  name="' + item.name + '" value="' + value + '" checked>' + value + '</label>';
                    } else {
                        str += '<label class="sui-custom-radio" ><input type="checkbox"  name="' + item.name + '" value="' + value + '">' + value + '</label>';
                    }
                });
            }
            str +=
                '</div>' +
                '</div>';
            return str;
        }

        //单选框
        function radio(item) {
            var str =
                '<div class="form-group">' +
                '<label class="control-label" for="' + item.name + '" >' + item.caption + '</label>' +
                '<div class="radio">';
            if (item.input_opts && item.input_opts.length > 0) {
                $.each(item.input_opts, function (index, value) {
                    if (value === item.value) {
                        str += '<label class="sui-custom-radio" ><input type="radio"  name="' + item.name + '" value="' + value + '" checked>' + value + '</label>';
                    } else {
                        str += '<label class="sui-custom-radio" ><input type="radio"  name="' + item.name + '" value="' + value + '">' + value + '</label>';
                    }
                });
            }
            str +=
                '</div>' +
                '</div>';
            return str;
        }

        //时间框
        function date(item) {
            var str =
                '<div class="form-group">' +
                '<label class="control-label" for="' + item.name + '" >' + item.caption + '</label>' +
                '<input type="text" class="form-control deadline" id="' + item.name + '" name="' + item.name + '" value="' + item.value + '">' +
                '</div>' +
                '<script>';
            str += '' +
                '       lay(\'.deadline\').each(function () {' +
                '            laydate.render({' +
                '                elem: this' +
                '                , trigger: \'click\'' +
                '            });' +
                '        });';
            str += '<\/script>';
            return str;
        }

        //资源选择
        function resource(item) {
            var str =
                '<div class="form-group">' +
                '<label class="control-label" for="' + item.name + '" >' + item.caption + '</label>' +
                '<div class="sui-resource-selector form-control">' +
                '<div class="sui-selector-box clearfix resource" id="' + item.name + '" data-listidx="0">';
            if (item.value && item.value.length > 0) {
                $.each(item.value, function (index, value) {
                    str +=
                        '<div class="js-item img-item resource-list ' + item.name + '"  style="cursor: pointer;" >' +
                        '<div class="box">' +
                        '<a class="thumb">' +
                        '<img class="image-result" src="' + value.thumb + '" alt="' + value.title + '" data-id="' + value.id + '">' +
                        '</a>' +
                        '<div class="title cutstr resource-sub-title">' + value.title + '</div>' +
                        '<div class="summary resource-summary">' + value.summary + '</div>' +
                        '<div class="operate"><a href="javascript:;" class="js-del-item"><i class="fa fa-remove"></i>移除</a></div>' +
                        '</div>' +
                        '</div>';
                });
            }
            str +=
                '</div>' +
                '<div class="sui-selector-btns"><button type="button" class="btn" onclick="addContent(\'' + item.name + '\')">选择内容</button></div>' +
                '</div>' +
                '</div>';
            return str;
        }

        //图片上传
        function image(item) {
            var str =
                '<div class="form-group">' +
                '<label class="control-label" for="' + item.name + '" >' + item.caption + '</label>' +
                '<div class="sui-resource-selector form-control">' +
                '<div class="sui-selector-box clearfix images-result" id="' + item.name + '" data-listidx="0">';
            if (item.value && item.value.length > 0) {
                $.each(item.value, function (index, value) {
                    str +=
                        '<div class="js-item img-item images-list ' + item.name + '"  style="cursor:pointer" id="images-info">' +
                        '<div class="box">' +
                        '<a class="thumb">' +
                        '<img class="image-result" src="' + value.src + '" alt="" style="width: 500px">' +
                        '</a>' +
                        '<div class="title cutstr">' + value.src + '</div>' +
                        '<div class="summary" data-id="' + value.id + '">alt<input type="text" class="form-control image-alt" value="' + value.alt + '"></div>' +
                        '<div class="operate">' +
                        '<a href="javascript:;" class="js-del-item"><i class="fa fa-remove"></i>移除</a>' +
                        '</div>' +
                        '</div>' +
                        '</div>';
                });
            }
            str +=
                '</div>' +
                '<div class="sui-selector-btns">' +
                '<button type="button" class="btn" onclick="addImages(\'' + item.name + '\')">选择图片</button>' +
                '</div>' +
                '</div>' +
                '</div>';
            return str;
        }

        //文件上传
        function file(item) {
            var str =
                '<div class="form-group">' +
                '<label class="control-label" for="' + item.name + '" >' + item.caption + '</label>' +
                '<div class="sui-resource-selector form-control">' +
                '<div class="sui-selector-box clearfix" id="' + item.name + '" data-listidx="0">';
            if (item.value && item.value.length > 0) {
                $.each(item.value, function (index, value) {
                    str +=
                        '<div class="js-item img-item file-result-list ' + item.name + '"  style="cursor:pointer">' +
                        '<div>' +
                        '<input type="text" class="form-control file-value" name="' + item.name + '" value="' + value.file + '" data-file-size="' + value.file_size + '">' +
                        '<div class="operate">' +
                        '<a href="javascript:;" class="js-del-item"><i class="fa fa-remove"></i>移除</a>' +
                        '</div>' +
                        '</div>' +
                        '</div>';
                });
            }
            str +=
                '</div>' +
                '<div class="sui-selector-btns">' +
                '<button type="button" class="btn" id="file_upload" name="file_upload">文件上传</button>' +
                '<input type="file" value="" style="display: none" id="uploadFile" name="uploadFile" multiple data-info="' + item.name + '">' +
                '</div>' +
                '</div>' +
                '</div>';
            return str;
        }

        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_tree1");
            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 addContent(type) {
            layer.open({
                type: 2,
                content: ['/admin/stencil/resources/{{$siteId}}/' + type],
                area: ['60%', '60%'],
                title: '编辑'
            });
        }

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

        //ctrl+s 保存
        window.addEventListener("keydown", function (e) {
            //可以判断是不是mac，如果是mac,ctrl变为花键
            //event.preventDefault() 方法阻止元素发生默认的行为。
            if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
                e.preventDefault();
                // Process event...
                save();
            }
        }, false);

        function save() {
            var data = tips.getFormValues('#form');
            data.subtitle = $('#subtitle').val();//副标题
            data.new_pid = $('#new_pid').val();//新建页面父id

            data.deny_spider = 0;
            if ($('#deny_spider').is(':checked')) {
                data.deny_spider = 1;
            }
            data.is_hidemenu = 0;
            if ($('#is_hidemenu').is(':checked')) {
                data.is_hidemenu = 1;
            }
            data.is_enabled = 0;
            if ($('#is_enabled').is(':checked')) {
                data.is_enabled = 1;
            }
            data.is_301 = 0;
            if ($('#is_301').is(':checked')) {
                data.is_301 = 1;
            }
            data.is_freeze_url = 0;
            if ($('#is_freeze_url').is(':checked')) {
                data.is_freeze_url = 1;
            }
            //图片
            data.thumb = $('#images').find("img").attr('src');
            //富文本内容
            data.content = editor.txt.html();
            //复选框
            $(checkboxList).each(function (key, value) {
                var checkbox = [];
                var jqObject = '.checkbox-list input[name=' + value + ']:checked';
                $(jqObject).each(function () {
                    checkbox.push($(this).val());
                });
                data[value] = checkbox;
            });

            //富文本
            $(editorList).each(function (key, value) {
                data[value.name] = value.editorObject.txt.html();
            });

            //资源
            $(resourceList).each(function (key, value) {
                var resourceInfo = [];
                var jqObject = '.' + value;
                $(jqObject).each(function (kk, vv) {
                    var resource = {};
                    resource.id = $(vv).find(".image-result").attr('data-id');
                    resource.title = $(vv).find(".resource-sub-title").text();
                    resource.thumb = $(vv).find(".image-result").attr('src');
                    resource.summary = $(vv).find(".resource-summary").text();
                    resourceInfo.push(resource);
                });
                data[value] = resourceInfo;
            });

            //图片
            $(imageList).each(function (key, value) {
                var image = [];
                var jqObject = '.' + value;
                $(jqObject).each(function (kk, vv) {
                    var images = {};
                    images.src = $(vv).find(".image-result").attr('src');
                    images.alt = $(vv).find(".image-alt").val();
                    images.id = $(vv).find(".summary").attr('data-id');
                    image.push(images);
                });
                data[value] = image;
            });

            //文件
            $(fileList).each(function (key, value) {
                var file = [];
                var jqObject = '.' + value;
                $(jqObject).each(function (kk, vv) {
                    var files = {};
                    files.file = $(vv).find(".file-value").val();
                    files.file_size = $(vv).find(".file-value").attr('data-file-size');

                    file.push(files);
                });
                data[value] = file;
            });

            var url = '/admin/stencil/indexSave/{{$siteId}}';
            var type = 'post';
            var ajaxConfig = {
                url: url,
                type: type,
                data: data,
                success: function (result) {
                    layer.msg(result.message, {icon: 1});
                    window.location.reload();
                }
            };
            tips.ajax(ajaxConfig);
        }

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

        //模版联动样式和变量
        $(document).on('change', '#tpl_id', function () {
            var tid = $('#tpl_id').val();
            var indexId = $('#index_id').val();

            changeCss(tid);
            changeTemplateVariableList(tid, indexId);
        });
        //保存
        $(document).on('click', '#indexSave', function () {
            save();
        });
        //上传
        $(document).on('click', '[name=file_upload]', function () {
            $(this).next().trigger('click');
        });
        //多文件上传
        $(document).on('change', '[name=uploadFile]', function () {
            var _this = $(this).attr('data-info');
            var formData = new FormData();
            if ($(this)[0].files.length > 10) {
                layer.alert("最多只能选择10个文件哦", {icon: 5});
                return;
            }

            var maxSize = 20480;//文件上传大小限制

            for (var i = 0; i < $(this)[0].files.length; i++) {

                var size = $(this)[0].files[i].size;
                var fileSize = (size / 1024).toFixed(2);
                if (fileSize > maxSize) {
                    layer.alert("上传文件不许超过20MB", {icon: 5});
                    return;
                }

                formData.append('files[]', $(this)[0].files[i]);
            }
            formData.append('siteId', "{{$siteId}}");

            var ln;
            $.ajax({
                url: '/admin/stencil/bulkUpload',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function () {
                    ln = layer.load();
                },
                complete: function () {
                    layer.close(ln);
                },
                success: function (result) {
                    var str = '';
                    $.each(result.data, function (key, value) {
                        str += '' +
                            '<div class="js-item img-item file-result-list ' + _this + '"  style="cursor:pointer">' +
                            '<div>' +
                            '<input type="text" class="form-control file-value" name="' + _this + '" value="' + value.file_url + '" data-file-size="' + value.file_size + '">' +
                            '<div class="operate">' +
                            '<a href="javascript:;" class="js-del-item"><i class="fa fa-remove"></i>移除</a>' +
                            '</div>' +
                            '</div>' +
                            '</div>';
                    });
                    var object = '#' + _this;
                    $(object).append(str);
                },
                error: function (XMLHttpRequest) {
                    if (XMLHttpRequest.status === 500) {
                        layer.alert("异步请求失败", {icon: 5});
                        return;
                    }
                    layer.alert(JSON.parse(XMLHttpRequest.responseText).message, {icon: 0});
                }
            });
        });

        //异步加载模版关联的样式列表
        function changeCss(tplId, cssId) {
            var url = '/admin/stencil/getCssList?siteId={{$siteId}}&tpl_id=' + tplId;
            var type = 'get';
            var ajaxConfig = {
                url: url,
                type: type,
                data: {},
                success: function (result) {
                    var object = $("#css_id");
                    object.empty();
                    object.append('<option value="0">请选择样式</option>');
                    if (result.data.length > 0) {
                        $(result.data).each(function (key, value) {
                            var option = '<option value="' + value.id + '">' + value.name + '</option>';
                            object.append(option);
                        });
                        if (cssId > 0) {
                            $('#css_id').val(cssId);
                        }
                    }
                }
            };
            tips.ajax(ajaxConfig);
        }

        //异步加载模版关联的变量列表
        function changeTemplateVariableList(tplId, indexId) {
            var url = '/admin/stencil/getTemplateVariableByTplId?siteId={{$siteId}}&tpl_id=' + tplId + '&content_id=' + indexId;
            var type = 'get';
            var ajaxConfig = {
                url: url,
                type: type,
                data: {},
                success: function (result) {
                    var str = '';
                    var tpl = $('#tpl');
                    tpl.empty();

                    editorList = [];
                    checkboxList = [];
                    resourceList = [];
                    imageList = [];
                    fileList = [];

                    if (result.data.length > 0) {
                        var richTextList1 = [];
                        $.each(result.data, function (index, item) {
                            if (item.input_type === 'text') {
                                str += text(item);
                            }
                            if (item.input_type === 'textarea') {
                                str += textarea(item);
                            }
                            if (item.input_type === 'richtext') {
                                str += richtext(item);
                                richTextList1.push(item.name + ':' + Base64.encode(item.value));
                            }
                            if (item.input_type === 'taginput') {
                                str += taginput(item);
                            }
                            if (item.input_type === 'select') {
                                str += select(item);
                            }
                            if (item.input_type === 'checkbox') {
                                str += checkbox(item);
                                checkboxList.push(item.name);
                            }
                            if (item.input_type === 'radio') {
                                str += radio(item);
                            }
                            if (item.input_type === 'date') {
                                str += date(item);
                            }
                            if (item.input_type === 'resource') {
                                str += resource(item);
                                resourceList.push(item.name);
                            }
                            if (item.input_type === 'image') {
                                str += image(item);
                                imageList.push(item.name);
                            }
                            if (item.input_type === 'file') {
                                str += file(item);
                                fileList.push(item.name);
                            }
                        });
                        tpl.append(str);

                        if (richTextList1.length > 0) {

                            $(richTextList1).each(function (key, value) {
                                var result = value.split(':');
                                var editor = new E("#" + result[0]);
                                editor.config.uploadImgServer = '/admin/stencil/editorUpload/{{$siteId}}';
                                editor.config.uploadFileName = 'editorFile';
                                editor.config.uploadImgMaxLength = 5;// 一次最多上传 5 个图片
                                editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
                                editor.config.uploadImgMaxSize = 5 * 1024 * 1024;// 5M
                                editor.create();

                                var data = {};
                                data.editorObject = editor;
                                data.name = result[0];
                                editorList.push(data);

                                if (Base64.decode(result[1])) {
                                    editor.txt.html(Base64.decode(result[1])); // 重新设置编辑器内容
                                }
                            });
                        }

                        //图片拖拽
                        if (imageList.length > 0) {
                            $(imageList).each(function (key, value) {

                                //获取对象
                                var el = document.getElementById(value);
                                //设置配置
                                var ops = {
                                    animation: 1000,
                                    //拖动结束
                                    onEnd: function (evt) {
                                        //console.log(evt);
                                        //获取拖动后的排序
                                        //var arr = sortable.toArray();
                                        //alert(JSON.stringify(arr));
                                    }
                                };
                                //初始化
                                Sortable.create(el, ops);
                            });
                        }

                        //资源拖拽
                        if (resourceList.length > 0) {
                            $(resourceList).each(function (key, value) {

                                //获取对象
                                var el = document.getElementById(value);
                                //设置配置
                                var ops = {
                                    animation: 1000,
                                    //拖动结束
                                    onEnd: function (evt) {
                                        //console.log(evt);
                                        //获取拖动后的排序
                                        //var arr = sortable.toArray();
                                        //alert(JSON.stringify(arr));
                                    }
                                };
                                //初始化
                                Sortable.create(el, ops);
                            });
                        }
                    }
                }
            };
            tips.ajax(ajaxConfig);
        }
    </script>
@endsection