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

{{block title()}}编辑文章 - Doak CMS{{end}}

{{block body()}}

<style>
.form-text {
    color: #b7bbbf;
}
.art-thumbnail img {
    width: 150px;
}
</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("art") }}' class="ms-1" title="返回列表">
                        <i class="fa fa-arrow-circle-left"></i>
                    </a>
                </h6>

                <form class="profile-form" method="post">
                    <nav>
                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            <button class="nav-link active" 
                                id="nav-main-tab" 
                                data-bs-toggle="tab" 
                                data-bs-target="#nav-main" 
                                type="button" role="tab" a
                                ria-controls="nav-main" 
                                aria-selected="true">文章详情</button>
                            <button class="nav-link" 
                                id="nav-setting-tab" 
                                data-bs-toggle="tab" 
                                data-bs-target="#nav-setting" 
                                type="button" role="tab" 
                                aria-controls="nav-setting" 
                                aria-selected="false">文章设置</button>
                        </div>
                    </nav>
                    
                    <div class="tab-content pt-3" id="nav-tabContent">
                        <div class="tab-pane fade active show" 
                            id="nav-main" 
                            role="tabpanel" 
                            aria-labelledby="nav-main-tab"
                        >
                        
                            <div class="mb-3">
                                <label for="cateidSelect"
                                    class="form-label"
                                >
                                    所属分类
                                    <span class="text-danger">*</span>
                                </label>
                                <select class="form-select"
                                    name="cate_id"
                                    id="cateidSelect"
                                    aria-label="cateidHelp"
                                >
                                    {{ range index, value := cates }}
                                        <option value="{{ value.Id }}" {{if data.CateId == value.Id}}selected=""{{end}}>{{ value.Name }}</option>

                                        {{if len(value.Children) > 0}}
                                            {{ range i2, v2 := value.Children }}
                                                <option value="{{ v2.Id }}" {{if data.CateId == v2.Id}}selected=""{{end}}>└{{ v2.Name }}</option>

                                                {{if len(v2.Children) > 0}}
                                                    {{ range i3, v3 := v2.Children }}
                                                        <option value="{{ v3.Id }}" {{if data.CateId == v3.Id}}selected=""{{end}}>└{{ v3.Name }}</option>
                                                    {{end}}
                                                {{end}}
                                            {{end}}
                                        {{end}}
                                    {{ end }}
                                </select>
                                <div id="cateidHelp" class="form-text">
                                    选择文章对应的分类
                                </div>
                            </div>

                            <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="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="desc"
                                    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="keyword"
                                    value="{{ data.Keywords }}"
                                    class="form-control"
                                    id="keywordsInput"
                                    aria-describedby="keywordsHelp">
                                <div id="keywordsHelp" class="form-text">
                                    文章的关键字
                                </div>
                            </div>

                        </div>
                        
                        <div class="tab-pane fade" 
                            id="nav-setting" 
                            role="tabpanel" 
                            aria-labelledby="nav-setting-tab"
                        >

                            <div class="mb-3">
                                <label class="form-label">
                                    封面
                                </label>
                                <input type="text"
                                    name="cover"
                                    value="{{ data.Cover }}"
                                    class="form-control d-none"
                                    id="coverInput">
                                <div class="art-thumbnail">
                                    {{if data.Cover != ""}}
                                        <div class="mb-2" id="art-preview">
                                            <img src="{{ attachUrlWithId(data.Cover) }}" class="img-thumbnail" alt="文章封面">
                                        </div>
                                    {{else}}
                                        <div class="mb-2" id="art-preview">
                                            <img src='{{ adminAssets("image/nopic.png") }}' class="img-thumbnail" alt="文章封面">
                                        </div>
                                    {{end}}

                                    <button type="button"
                                        id="btn-remove-cover"
                                        data-img='{{ adminAssets("image/nopic.png") }}'
                                        class="btn btn-danger btn-sm">移除封面</button>
                                    <span id="btn-upload-cover"></button>
                                </div>
                                <div class="form-text">
                                    设置文章的封面
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="tagsInput" class="form-label">
                                    标签
                                </label>
                                <input type="text"
                                    name="tags"
                                    value="{{ data.Tags }}"
                                    class="form-control"
                                    id="tagsInput"
                                    aria-describedby="tagsHelp">
                                <div id="tagsHelp" class="form-text">
                                    文章的标签
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="fromInput" class="form-label">文章来源</label>
                                <input type="text"
                                    name="from"
                                    value="{{ data.From }}"
                                    class="form-control"
                                    id="fromInput"
                                    aria-describedby="fromHelp">
                                <div id="fromHelp" class="form-text">
                                    文章的具体来源
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="add_timeInput" class="form-label">
                                    添加时间
                                </label>
                                <div class="input-group mb-3">
                                    <span class="input-group-text">
                                        <i class="fa fa-clock"></i>
                                    </span>
                                    <input type="text"
                                        name="add_time"
                                        value='{{ createTime(data.AddTime).DateTimeString() }}'
                                        class="form-control"
                                        id="add_timeInput"
                                        aria-describedby="add_timeHelp">
                                </div>
                                <div id="add_timeHelp" class="form-text">
                                    文章的添加时间
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">
                                    置顶
                                </label>
                                <div class="form-control">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input"
                                            type="radio"
                                            name="is_top"
                                            {{if data.IsTop == 1 }}
                                            checked=""
                                            {{end}}
                                            id="istopRadioStatus1"
                                            value="y">
                                        <label class="form-check-label"
                                            for="istopRadioStatus1">是</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input"
                                            type="radio"
                                            name="is_top"
                                            {{if data.IsTop == 0 }}
                                            checked=""
                                            {{end}}
                                            id="istopRadioStatus2"
                                            value="n">
                                        <label class="form-check-label"
                                            for="istopRadioStatus2">否</label>
                                    </div>
                                </div>
                                <div 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>

                        </div>
                    </div>
                    
                    <button type="button"
                        class="btn btn-primary js-save-button"
                    >
                        确认修改
                    </button>
                </form>
            </div>

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

{{end}}

{{block script_after()}}
<link href='{{ adminAssets("libs/wangeditor/style.css") }}' rel="stylesheet">
<link href='{{ adminAssets("libs/tagsinput/jquery.tagsinput.min.css") }}' rel="stylesheet">
<script src='{{ adminAssets("libs/wangeditor/index.js") }}' type="3029259e35d7bc1c98cd40a8-text/javascript"></script>
<script src='{{ adminAssets("libs/tagsinput/jquery.tagsinput.js") }}' type="3029259e35d7bc1c98cd40a8-text/javascript"></script>
<script src='{{ adminAssets("libs/laydate/laydate.js") }}' type="3029259e35d7bc1c98cd40a8-text/javascript"></script>
<script type="3029259e35d7bc1c98cd40a8-text/javascript">
(function($) {
    "use strict";

    $(".sidebar-art-index").addClass("active");

    // 关键字输入
    $("#keywordsInput").tagsInput({
        width: 'auto',
        defaultText: '输入后空格确认',
        minInputWidth: 110,
        height: '38px',
        placeholderColor: '#999',
        onChange: function (row) {
            if (typeof callback === 'function') {

            } else {
                $("tagsInput_addTag").focus();
            }
        }
    });

    // 标签输入
    $("#tagsInput").tagsInput({
        width: 'auto',
        defaultText: '输入后空格确认',
        minInputWidth: 110,
        height: '38px',
        placeholderColor: '#999',
        onChange: function (row) {
            if (typeof callback === 'function') {

            } else {
                $("tagsInput_addTag").focus();
            }
        }
    });

    // 时间
    laydate.render({
        elem: '#add_timeInput',
        type: 'datetime',
    });

    // 保存
    $(".js-save-button").click(function(e) {
        e.stopPropagation;
        e.preventDefault;

        var cate_id = $("[name=cate_id]").val();
        var title = $("[name=title]").val();
        var content = $("[name=content]").val();
        var keywords = $("[name=keyword]").val();
        var description = $("[name=desc]").val();
        var cover = $("[name=cover]").val();
        var tags = $("[name=tags]").val();
        var from = $("[name=from]").val();
        var add_time = $("[name=add_time]").val();
        var is_top = $("[name=is_top]:checked").val();
        var status = $("[name=status]:checked").val();

        var url = '{{ adminUrl("art/" + id + "/edit") }}';
        $.post(url, {
            cate_id: cate_id,
            title: title,
            content: content,
            keywords: keywords,
            description: description,
            cover: cover,
            tags: tags,
            from: from,
            add_time: add_time,
            is_top: is_top,
            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>
<link href='{{ adminAssets("libs/huploadify/Huploadify.css") }}' rel="stylesheet">
<script src='{{ adminAssets("libs/huploadify/jquery.Huploadify.js") }}' type="3029259e35d7bc1c98cd40a8-text/javascript"></script>
<script type="3029259e35d7bc1c98cd40a8-text/javascript">
(function($) {
    "use strict";

    // 上传
    $('#btn-upload-cover').Huploadify({
        auto: true,
        fileTypeExts: '*.png;*.jpg;*.JPG;*.bmp;*.gif',// 不限制上传文件请修改成'*.*'
        multi: true,
        fileSizeLimit: 5*1024*1024, // 大小限制
        uploader : '{{ adminUrl("upload/image") }}', // 文件上传目标地址
        buttonText : '选择文件',
        fileObjName : 'file',
        btnClass: 'btn btn-primary btn-sm',
        showUploadedPercent: false,
        onUploadSuccess : function(file, data) {
            data = $.parseJSON(data);
            if (data.code == 0) {
                var id = data.data.id;
                var url = data.data.url;
                var $img = $('#art-preview').find('img');

                $img.attr('src', url);
                $img.attr('alt', file.name);

                $('#coverInput').val(id);
            } else {
                layer.msg("上传失败：" + data.message);
            }
        }
    });

    // 移除封面
    $('#btn-remove-cover').click(function() {
        var img = $(this).data("img");

        layer.confirm('您确定要移除封面吗？', {
            btn: ['确定', '取消']
        }, function(index){
            layer.msg("移除封面成功", {
                icon: 1
            });

            setTimeout(function() {
                var $img = $('#art-preview').find('img');

                $img.attr('src', img);
                $img.attr('alt', "文章封面");

                $('#coverInput').val("");
            }, 500);
        });
    });

})(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}}