{* Template Name:投稿单页 *}
{$FUI_BLOG_URL = FUI_BLOG_URL}
{$finchui = fui_blog_config()}
{$language = fui_blog_lang_html()}
{template:header}
{if $finchui->writing_allcategory}
{template:post-allcategory}
{/if}
<div class="main" data-nav-path="{$submitNavPath}">
        {fui_blog_render_ad('header')}
  <div class="main-width">
    <section class="content">
      <h1>{$article.Title}</h1>

      <form id="fui_blog-writing-form" class="writing-form" method="post" action="{$submitActionUrl}">
        <input type="hidden" name="csrfToken" id="csrfToken" value="{$submitToken}">

        <ul class="form-nav">
          <li class="active"><a href="{$article.Url}">{$lang['fui_blog']['submitarticle']}</a></li>
        </ul>

        <div class="form-group">
          <label class="form-title"><i class="required">*</i>{$language['title']}</label>
          <input id="edtTitle" required="required" name="Title" type="text" maxlength="90">
        </div>

        <div class="form-group">
          <label class="form-title"><i class="required">*</i>{$language['thumbnail']}<span>可插入外链，单个文件</span></label>
          <div class="upload-field" id="upload-thumbnail">
            <input id="thumbnail" name="thumbnail" type="text" class="read" required="required" value="{php}echo htmlspecialchars($submitThumbnailValue, ENT_COMPAT, 'UTF-8');{/php}" placeholder="可插入图片URL">
            <label class="upload-btn">{$lang['fui_blog']['uploadimg']}<input id="thumbnail_upload" type="file" accept="image/*" data-target="#thumbnail" data-status="#thumbnail-file-info"></label>
            <div class="file-info" id="thumbnail-file-info"></div>
          </div>
          <small>支持 JPG、PNG、GIF 格式，一次只能上传一张图片</small>
        </div>

        <div class="form-group">
          <label class="form-title"><i class="required">*</i>{$language['introduce']}</label>
          <textarea name="Content" id="editor_Content" datatype="*"></textarea>
        </div>

        <div class="form-group">
          <label class="form-title">{$language['keyword']}</label>
          <input id="edtTag" name="keywords" type="text" placeholder="{$language['keywordtip']}">
        </div>

                <div class="form-group">
                    <label class="form-title"><i class="required">*</i>{$language['select_category']}</label>
          {php}echo $submitCategoryHtml;{/php}
        </div>

        {if $submitShowVcode}
        <div class="form-group">
          <label class="form-title"><i class="required">*</i>{$language['inpVerify']}</label>
          <div class="verfiycode input-half">
            <input name="verifycode" type="text" placeholder="{$language['inpVerify']}">
            <img id="reg_verfiycode" title="{$language['reg_verfiycode']}" src="{$submitVerifyCodeUrl}" onclick="javascript:this.src='{$submitVerifyCodeUrl}&amp;tm='+Math.random();">
          </div>
        </div>
        {/if}

        <div class="form-group">
          <button type="submit" class="btn-submit" id="writing-submit">{$language['submit']}</button>
        </div>

        {if $submitWritingTips}
        {php}echo $submitWritingTips;{/php}
        {/if}
      </form>
    </section>
  </div>
      
    {fui_blog_render_ad('footer')}
</div>
<script>
var fuiBlogJump = {$submitJumpUrlJson};

jQuery(function ($) {
    var $form = $('#fui_blog-writing-form');
    var $submit = $('#writing-submit');
    var uploadUrl = "{$submitUploadUrl}";
    var tokenUrl = "{$submitTokenUrl}";
    var successMessage = "{$submitMessageOk}";
    var submitErrorText = "{$submitMessageError}";
    var submitErrorPrefix = "{$submitMessageErrorPrefix}";
    var submittingText = "{$submitMessageSubmitting}";
    var uploadingText = "{$submitMessageUploading}";
    var uploadFailText = "{$submitMessageUploadFail}";
    var securityErrorText = '安全验证失败，请刷新页面重试！';

    if (window.baidu && baidu.editor && baidu.editor.ui && $('#editor_Content').length) {
        window.editor = new baidu.editor.ui.Editor({
            toolbars: [["source", "|", "paragraph", "bold", "italic", "link", "insertimage", "pasteplain", "removeformat", "Undo", "Redo"]],
            initialFrameHeight: 350
        });
        window.editor.render('editor_Content');
    }

    function refreshSubmitToken() {
        return $.ajax({
            url: tokenUrl,
            type: 'GET',
            dataType: 'json',
            cache: false
        }).then(function (response) {
            if (!response || !response.success || !response.token) {
                return $.Deferred().reject(response).promise();
            }

            $('#csrfToken').val(response.token);
            return response.token;
        });
    }

    function refreshVerifyCode() {
        var $verifyImage = $('#reg_verfiycode');
        if ($verifyImage.length) {
            $verifyImage.attr('src', "{$submitVerifyCodeUrl}&tm=" + Math.random());
        }
    }

    if (!$form.length) {
        return;
    }

    $form.on('change', 'input[type=file][data-target]', function () {
        var input = this;
        var file = input.files && input.files[0];
        var $input = $(input);
        var $target = $($input.data('target'));
        var $status = $($input.data('status'));

        if (!file || !$target.length) {
            return;
        }

        refreshSubmitToken().done(function (token) {
            var formData = new FormData();
            formData.append('mypic', file);
            formData.append('csrfToken', token);

            if ($status.length) {
                $status.text(uploadingText);
            }

            $.ajax({
                url: uploadUrl,
                type: 'POST',
                data: formData,
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.error) {
                        if ($status.length) {
                            $status.text(data.error);
                        } else {
                            alert(data.error);
                        }
                        return;
                    }

                    $target.val(data.url || (bloghost + 'zb_users/upload/fui_blog/' + data.pic));
                    if ($status.length) {
                        $status.text((data.name || file.name) + ' (' + (data.size || 0) + 'k)');
                    }
                },
                error: function (xhr) {
                    var errorText = uploadFailText;

                    try {
                        var response = JSON.parse(xhr.responseText);
                        errorText = response.error || response.message || uploadFailText;
                    } catch (e) {}

                    if ($status.length) {
                        $status.text(errorText);
                    } else {
                        alert(errorText);
                    }
                }
            });
        }).fail(function () {
            if ($status.length) {
                $status.text(securityErrorText);
            } else {
                alert(securityErrorText);
            }
        });
    });

    $form.on('submit', function (event) {
        var originalBtnText = $submit.text();

        event.preventDefault();

        if (window.editor && typeof window.editor.sync === 'function') {
            window.editor.sync();
        }

        if (this.checkValidity && !this.checkValidity()) {
            if (this.reportValidity) {
                this.reportValidity();
            }
            return;
        }

        $submit.prop('disabled', true).text(submittingText);

        refreshSubmitToken().done(function () {
            $form.ajaxSubmit({
                dataType: 'json',
                success: function (response) {
                    if (response && response.success) {
                        alert(response.message || successMessage);
                        if (fuiBlogJump) {
                            window.location.href = fuiBlogJump;
                        } else {
                            window.location.reload();
                        }
                        return;
                    }

                    alert((response && response.message) ? response.message : submitErrorText);
                    refreshVerifyCode();
                },
                error: function (xhr) {
                    var errorText = submitErrorText;

                    try {
                        var response = JSON.parse(xhr.responseText);
                        errorText = response.message ? (submitErrorPrefix + response.message) : submitErrorText;
                    } catch (e) {}

                    alert(errorText);
                    refreshVerifyCode();
                },
                complete: function () {
                    $submit.prop('disabled', false).text(originalBtnText);
                }
            });
        }).fail(function () {
            alert(securityErrorText);
            $submit.prop('disabled', false).text(originalBtnText);
            refreshVerifyCode();
        });
    });
});
</script>
{template:footer}