<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta name="referrer" content="same-origin">
    <th:block th:include="include :: header('新增公众号文章详情')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>

<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-detail-add">
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-2 control-label">公众号id：</label>-->
        <!--            <div class="col-sm-10">-->
        <!--                <input name="publicId" class="form-control" type="text">-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="form-group">
            <label class="col-sm-2 control-label">公众号：</label>
            <div class="col-sm-10">
                <select id="publicId" name="publicId" class="form-control m-b" required>
                    <option th:each="publicAccount:${publicAccounts}" th:value="${publicAccount.id}"
                            th:text="${publicAccount.name}"></option>
                </select>
            </div>
        </div>
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-2 control-label">短剧：</label>-->
        <!--            <div class="col-sm-10">-->
        <!--                <select id="itemId" name="itemId" class="form-control m-b" required>-->
        <!--                    <option th:each="playletItem:${playletItems}" th:value="${playletItem.id}" th:text="${playletItem.videoName}"></option>-->
        <!--                </select>-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="form-group">
            <label class="col-sm-2 control-label">标题：</label>
            <div class="col-sm-10">
                <input name="title" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">作者花名：</label>
            <div class="col-sm-10">
                <input name="authorAlias" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">缩略图：</label>
            <div class="col-sm-10">
                <input name="imgUrl" type="text" hidden>
                <div class="file-loading">
                    <input id="imgUrlFile" name="file" type="file">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">头图：</label>
            <div class="col-sm-10">
                <input name="headUrl" type="text" hidden>
                <div class="file-loading">
                    <input id="headUrlFile" name="file" type="file">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">文章类型：</label>
            <div class="col-sm-10">
                <label class="radio-box">
                    <input type="radio" checked="" value="01" name="type">富文本</label>
                <label class="radio-box">
                    <input type="radio" value="02" name="type">PDF</label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">PDF附件：</label>
            <div class="col-sm-10">
                <input name="pdfUrl" type="text" hidden>
                <div class="file-loading">
                    <input id="pdfUrlFile" name="file" type="file">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">所在地：</label>
            <div class="col-sm-10">
                <input name="address" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">简介：</label>
            <div class="col-sm-10">
                <input name="remark" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-2 control-label">文章标签：</label>
            <div class="col-xs-10">
                <select id="detailTags" class="form-control select2-multiple" multiple>
                    <option th:each="tag:${tags}" th:value="${tag.tag}" th:text="${tag.tag}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">详情(富文本)：</label>
            <div class="col-sm-10">
                <!-- <input type="hidden" class="form-control" name="content"> -->
                <!-- <div class="summernote" id="content"></div> -->
                <textarea id="mytextarea" name="content"></textarea>
            </div>
        </div>
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-2 control-label">剧集1：</label>-->
        <!--            <div class="col-sm-10">-->
        <!--                <input name="itemOne" class="form-control" type="text">-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-2 control-label">剧集2：</label>-->
        <!--            <div class="col-sm-10">-->
        <!--                <input name="itemTwo" class="form-control" type="text">-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-2 control-label">剧集3：</label>-->
        <!--            <div class="col-sm-10">-->
        <!--                <input name="itemThree" class="form-control" type="text">-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-2 control-label">剧集4：</label>-->
        <!--            <div class="col-sm-10">-->
        <!--                <input name="itemFour" class="form-control" type="text">-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-2 control-label">剧集5：</label>-->
        <!--            <div class="col-sm-10">-->
        <!--                <input name="itemFive" class="form-control" type="text">-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-2 control-label">剧集6：</label>-->
        <!--            <div class="col-sm-10">-->
        <!--                <input name="itemSix" class="form-control" type="text">-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-2 control-label">剧集7：</label>-->
        <!--            <div class="col-sm-10">-->
        <!--                <input name="itemSeven" class="form-control" type="text">-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-2 control-label">剧集8：</label>-->
        <!--            <div class="col-sm-10">-->
        <!--                <input name="itemEight" class="form-control" type="text">-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-2 control-label">剧集9：</label>-->
        <!--            <div class="col-sm-10">-->
        <!--                <input name="itemNine" class="form-control" type="text">-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="form-group">-->
        <!--            <label class="col-sm-2 control-label">剧集10：</label>-->
        <!--            <div class="col-sm-10">-->
        <!--                <input name="itemTen" class="form-control" type="text">-->
        <!--            </div>-->
        <!--        </div>-->
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: summernote-js" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<th:block th:include="include :: tingmce-min-js" />
<script th:inline="javascript">
    var prefix = ctx + "system/playlet/detail"
    $("#form-detail-add").validate({
        focusCleanup: true
    });

    $(function() {
        $('#detailTags').select2({
            placeholder: "请选择文章标签",
            allowClear: true
        });
    })

    // 详情页
    $("#imgUrlFile").fileinput({
        uploadUrl: ctx + 'tool/oss/uploadFromPlaylet',
        maxFileCount: 1,
        dropZoneEnabled: false,      //是否显示拖拽区域
        showPreview: false,
        autoReplace: true
    }).on('fileuploaded', function (event, data, previewId, index) {
        console.log(data);
        if (data.response.success) {
            $("input[name='imgUrl']").val(data.response.msg)
        } else {
            alert("上传失败!");
        }
    }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('')
        $("input[name='imgUrl']").val('')
    })


    // 详情页
    $("#headUrlFile").fileinput({
        uploadUrl: ctx + 'tool/oss/uploadFromPlaylet',
        maxFileCount: 1,
        dropZoneEnabled: false,      //是否显示拖拽区域
        showPreview: false,
        autoReplace: true
    }).on('fileuploaded', function (event, data, previewId, index) {
        console.log(data);
        if (data.response.success) {
            $("input[name='headUrl']").val(data.response.msg)
        } else {
            alert("上传失败!");
        }
    }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('')
        $("input[name='headUrl']").val('')
    })

    // 详情页
    $("#pdfUrlFile").fileinput({
        uploadUrl: ctx + 'tool/oss/uploadFromPlaylet',
        maxFileCount: 1,
        dropZoneEnabled: false,      //是否显示拖拽区域
        showPreview: false,
        autoReplace: true
    }).on('fileuploaded', function (event, data, previewId, index) {
        console.log(data);
        if (data.response.success) {
            $("input[name='pdfUrl']").val(data.response.msg)
        } else {
            alert("上传失败!");
        }
    }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('')
        $("input[name='pdfUrl']").val('')
    })

    function submitHandler() {
        if ($.validate.form()) {
            var content = tinymce.get('mytextarea').getContent();
            var detailTag = $.form.selectSelects("detailTags");
            $.operate.save(prefix + "/add", $('#form-detail-add').serialize() + encodeURIComponent(content) + "&detailTag=" + detailTag);
        }
    }

    async function uploadOneFile(file) {
        return new Promise((resolve, reject) => {
            var data = new FormData();
            data.append("file", file);
            $.ajax({
                type: "post",
                url: ctx + "common/upload",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function (result) {
                    if (result.code == web_status.SUCCESS) {
                        resolve(result.url)
                    } else {
                        reject(result.msg)
                    }
                },
                error: function (error) {
                    reject("图片上传失败。")
                }
            });
        })

    }

    $(function () {
        // $('.summernote').summernote({
        //     lang: 'zh-CN',
        //     height: 300,
        //     dialogsInBody: true,
        //     callbacks: {
        //         onChange: function (contents, $edittable) {
        //             $("input[name='" + this.id + "']").val(contents);
        //         },
        //         onImageUpload: function (files) {
        //             var obj = this;
        //             var data = new FormData();
        //             data.append("file", files[0]);
        //             $.ajax({
        //                 type: "post",
        //                 url: ctx + "common/upload",
        //                 data: data,
        //                 cache: false,
        //                 contentType: false,
        //                 processData: false,
        //                 dataType: 'json',
        //                 success: function (result) {
        //                     if (result.code == web_status.SUCCESS) {
        //                         $('#' + obj.id).summernote('insertImage', result.url);
        //                     } else {
        //                         $.modal.alertError(result.msg);
        //                     }
        //                 },
        //                 error: function (error) {
        //                     $.modal.alertWarning("图片上传失败。");
        //                 }
        //             });
        //         }
        //     }
        // });

        tinymce.init({
            selector: '#mytextarea',
            language: "zh_CN", //语言类型
            content_style: "img {max-width:100%;}",
            placeholder: '在这里输入文字',
            height: 700,
            autoresize_min_height: 700, //编辑区域的最小高度
            remove_trailing_brs: false,
            branding: false,  //tiny技术支持信息是否显示
            extended_valid_elements: 'br',
            plugins: ' preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media code codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autosave',
            toolbar: 'fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
	 styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
	 table image media charmap hr pagebreak insertdatetime preview | code selectall searchreplace visualblocks | indent2em lineheight formatpainter axupimgs',
            toolbar_mode: 'wrap',
            paste_retain_style_properties: "all",
            paste_word_valid_elements: "*[*]", //word需要它
            paste_convert_word_fake_lists: true, // 插入word文档需要该属性
            paste_webkit_styles: "all",
            paste_merge_formats: true,
            nonbreaking_force_tab: false,
            paste_auto_cleanup_on_paste: false,
            paste_data_images: true,  //图片是否可粘贴
            images_upload_handler: (blobInfo) => {
                return new Promise(async (resolve, reject) => {
                    if (blobInfo.blob().size / 1024 / 1024 > 10) {
                        reject("上传失败，图片大小请控制在 10M 以内")
                    } else {
                        const url = await uploadOneFile(blobInfo.blob())
                        resolve(url)
                    }
                })

            },
            file_picker_types: 'media',
            file_picker_callback: function (callback, value, meta) {
                if (meta.filetype == 'media') {
                    //创建一个隐藏的type=file的文件选择input
                    let input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.onchange = async function () {
                        let file = this.files[0]; //只选取第一个文件。如果要选取全部，后面注意做修改
                        const url = await uploadOneFile(file)
                        callback(url)
                    }
                    //触发点击
                    input.click();
                }
            }
        });
    });
</script>
</body>

</html>