{{extends "/admin/common/base_content"}}

{{block title()}}编辑单页 - Doak CMS{{end}}

{{block body()}}

<style>
.form-text {
    color: #b7bbbf;
}
</style>

<div class="container-fluid pt-4 px-4">
    <div class="row g-4">
        <div class="col-sm-12 col-xl-12">
            <div class="bg-light rounded h-100 p-4">
                <h6 class="mb-4">
                    编辑单页
                    
                    <a href='{{ adminUrl("page") }}' class="ms-1" title="返回列表">
                        <i class="fa fa-arrow-circle-left"></i>
                    </a>
                </h6>
                
                <form class="profile-form" method="post">
                    <div class="mb-3">
                        <label for="titleInput" class="form-label">
                            单页标题
                            <span class="text-danger">*</span>
                        </label>
                        <input type="text" 
                            name="title" 
                            value="{{ data.Title }}" 
                            class="form-control" 
                            id="titleInput" 
                            aria-describedby="titleHelp">
                        <div id="titleHelp" class="form-text">
                            单页标题
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="slugInput" class="form-label">
                            单页标识
                            <span class="text-danger">*</span>
                        </label>
                        <input type="text" 
                            name="slug" 
                            value="{{ data.Slug }}" 
                            class="form-control" 
                            id="slugInput" 
                            aria-describedby="slugHelp">
                        <div id="slugHelp" class="form-text">
                            单页标识，包括大小写字母、数字下划线及中线及其组合
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="contentTextarea" class="form-label">
                            单页内容
                            <span class="text-danger">*</span>
                        </label>
                        <textarea class="form-control d-none" 
                            name="content"
                            placeholder="单页内容" 
                            id="contentTextarea" 
                            style="height: 150px;"
                            aria-describedby="contentHelp">{{ data.Content | raw }}</textarea>
                        <div id="editor-toolbar" style="border: 1px solid #ced4da;border-radius: 5px 5px; 0 0"></div>
                        <div id="editor-text-area" style="height: 350px;border: 1px solid #ced4da;border-radius: 0 0 5px 5px;"></div>
                        <div id="contentHelp" class="form-text">
                            单页的内容
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="descriptionTextarea" class="form-label">单页描述</label>
                        <textarea class="form-control" 
                            name="description"
                            placeholder="单页描述" 
                            id="descriptionTextarea" 
                            style="height: 90px;"
                            aria-describedby="descriptionHelp">{{ data.Description }}</textarea>
                        <div id="descriptionHelp" class="form-text">
                            单页的描述
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="keywordsInput" class="form-label">单页关键字</label>
                        <input type="text" 
                            name="keywords" 
                            value="{{ data.Keywords }}" 
                            class="form-control" 
                            id="keywordsInput" 
                            aria-describedby="keywordsHelp">
                        <div id="keywordsHelp" class="form-text">
                            单页的关键字
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="tplSelect" 
                            class="form-label"
                        >
                            单页模板
                            <span class="text-danger">*</span>
                        </label>
                        <select class="form-select" 
                            name="tpl"
                            id="tplSelect"
                            aria-label="tplHelp"
                        >
                            <option value="">请选择一个模板</option>
                            {{ range index, value := tpls }} 
                                <option value="{{ value }}" {{if data.Tpl == value}}selected=""{{end}}>{{ value }}</option>
                            {{ end }}
                        </select>
                        <div id="tplHelp" class="form-text">
                            选择单页对应的模板
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">
                            单页状态
                            <span class="text-danger">*</span>
                        </label>
                        <div class="form-control">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" 
                                    type="radio" 
                                    name="status" 
                                    {{if data.Status == 1 }}
                                    checked=""
                                    {{end}}
                                    id="inlineRadioStatus1" 
                                    value="y">
                                <label class="form-check-label" 
                                    for="inlineRadioStatus1">启用</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" 
                                    type="radio" 
                                    name="status" 
                                    {{if data.Status == 0 }}
                                    checked=""
                                    {{end}}
                                    id="inlineRadioStatus2" 
                                    value="n">
                                <label class="form-check-label" 
                                    for="inlineRadioStatus2">禁用</label>
                            </div>
                        </div>
                        <div class="form-text">
                            单页是否开启或者关闭
                        </div>
                    </div>
                    
                    <button type="button" 
                        class="btn btn-primary js-save-button">确认修改</button>
                </form>
            </div>

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

{{end}}

{{block script_after()}}
<link href="/static/admin/libs/wangeditor/style.css" rel="stylesheet">
<script src="/static/admin/libs/wangeditor/index.js" type="3029259e35d7bc1c98cd40a8-text/javascript"></script>
<script type="3029259e35d7bc1c98cd40a8-text/javascript">
(function($) {
    "use strict";
    
    $(".sidebar-page-index").addClass("active");
    
    // 保存
    $(".js-save-button").click(function(e) {
        e.stopPropagation;
        e.preventDefault;

        var slug = $("[name=slug]").val();
        var title = $("[name=title]").val();
        var content = $("[name=content]").val();
        var keywords = $("[name=keywords]").val();
        var description = $("[name=description]").val();
        var tpl = $("[name=tpl]").val();
        var status = $("[name=status]:checked").val();

        var url = '{{ adminUrl("page/"+id+"/edit") }}';
        $.post(url, {
            slug: slug,
            title: title,
            content: content,
            keywords: keywords,
            description: description,
            tpl: tpl,
            status: status,
        }, function(data) {
            if (data.code == 0) {
                layer.msg("编辑成功");
                
                setTimeout(function() {
                    window.location.reload();
                }, 1500);
            } else {
                layer.msg(data.message);
            }
        }).fail(function (xhr, status, info) {
            layer.msg("请求失败");
        });
    });

})(jQuery);
</script>
<script type="3029259e35d7bc1c98cd40a8-text/javascript">
(function($) {
    "use strict";
    
    // 编辑器
    var E = window.wangEditor;

    E.i18nChangeLanguage('zh-CN')

    window.editor = E.createEditor({
      selector: '#editor-text-area',
      html: '',
      mode: 'simple',
      config: {
        placeholder: '单页内容',
        MENU_CONF: {
          uploadImage: {
            server: '{{ adminUrl("upload/image") }}', // 上传图片地址
            timeout: 15 * 1000, // 5s
            fieldName: 'file',
            // meta: { token: 'xxx', a: 100 },
            metaWithUrl: false, // 参数拼接到 url 上
            headers: { Accept: 'text/x-json' },
            maxFileSize: 10 * 1024 * 1024, // 10M
            base64LimitSize: 0, // 5 * 1024 | 5kb 以下插入 base64
            onBeforeUpload(files) {
                return files; // 返回哪些文件可以上传
                // return false 会阻止上传
            },
            onProgress(progress) {},
            onSuccess(file, res) {},
            onFailed(file, res) {
                layer.msg("上传失败")
            },
            onError(file, err, res) {
                layer.msg("上传失败")
            },
            // // 用户自定义插入图片
            customInsert(res, insertFn) {
              if (res.code != 0) {
                layer.msg(res.message);
                return false;
              }
              
              var url = res.data.url;
              if (!url) {
                layer.msg("上传失败");
                return false;
              }
              
              var alt = url;
              var href = url;

              // 自己插入图片
              insertFn(url, alt, href);
            },
          }
        },
        onChange(editor) {
          const html = editor.getHtml()
          $('#contentTextarea').html(html);
        }
      }
    });
    
    // 图片
    var IMAGE_SVG = '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>';

    window.toolbar = E.createToolbar({
      editor,
      mode: '',
      selector: '#editor-toolbar',
      config: {
        toolbarKeys:[
          'blockquote',
          'header1',
          'header2',
          'header3',
          '|',
          'bold',
          'underline',
          'italic',
          'through',
          'color',
          'bgColor',
          'clearStyle',
          '|',
          'bulletedList',
          'numberedList',
          'todo',
          'justifyLeft',
          'justifyRight',
          'justifyCenter',
          '|',
          'insertLink',
          {
              key: 'group-image',
              title: "插入图片",
              iconSvg: IMAGE_SVG,
              menuKeys: ['insertImage', 'uploadImage'],
          },
          'insertTable',
          'codeBlock',
          '|',
          'undo',
          'redo',
          'fullScreen',
        ]
      }
    });

    editor.select([])
    editor.deleteFragment()

    E.SlateTransforms.setNodes(editor, { type: 'paragraph' }, { mode: 'highest' });
    editor.dangerouslyInsertHtml(document.getElementById('contentTextarea').value);
})(jQuery);
</script>
{{end}}