{extend name='extra@admin/content' /}

{block name="style"}
<style>
    .mail-body {
        overflow: auto !important
    }

    .mail-body img {
        width: 100% !important
    }

    .mail-body p {
        margin: 0
    }

    .news-box hr {
        margin: 4px
    }

    .news-box .table-hover {
        margin-bottom: 0;
        margin-top: 10px;
        border-top: none
    }

    .news-box .news-item {
        position: relative;
        border: 1px solid #cecece;
        border-radius: 2px;
        overflow: hidden;
        cursor: pointer
    }

    .news-box .news-item.active {
        box-shadow: 1px 0px 10px #0099CC;
        border-color: #0099CC
    }

    .news-box .news-image {
        text-align: center;
        height: 120px;
        width: 100%;
        overflow: hidden
    }

    .news-box .news-image img {
        margin-top: -5%;
        min-width: 100%;
        min-height: 100%
    }

    .news-box .news-image .fa,
    .news-box .article-add .fa {
        font-size: 6em;
        color: #efefef;
        height: 80px;
        width: 100%;
        line-height: 1em;
        margin: 5px 0
    }

    .news-box .article-add {
        display: block;
        text-align: center;
        font-size: 1em;
        color: #cecece;
        padding: 3px;
        position: relative;
        cursor: pointer
    }

    .news-box .news-title {
        position: absolute;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 2px;
        margin: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: right;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }

    .upload-multiple-close {
        position: absolute;
        font-weight: 400;
        top: 0;
        right: 0;
        text-align: center;
        color: #fff;
        background: #999;
        border-radius: 50%;
        height: 20px;
        width: 20px;
        line-height: 20px;
        border: 1px solid #fff;
    }
</style>
{/block}

{block name='content'}
<div class="row">
    <div class="col-xs-3" style='padding-right:0'>
        <div class="portlet light bordered pinned">
            <div class="portlet-title">
                <div class="caption">
                    <h5 class='text-center' style='margin-top:0;display:block'>图文列表</h5>
                </div>
            </div>
            <div class="portlet-body form">
                <div class="news-box">
                    {if empty($vo['articles']) eq FALSE}
                    {foreach $vo.articles as $key=>$value}
                    <div class="news-item transition-min" data-id="{$value.id}">
                        <a href="javascript:void(0)" class="upload-multiple-close hide"><i class="fa fa-close"></i></a>
                        <div class="news-image">
                            <img alt="image" class="img-responsive"
                                 src="{$value.local_url}?imageView2/1/w/338/h/190/interlace/1"/>
                        </div>
                        <span class="news-title">{$value.title}</span>
                    </div>
                    <hr/>
                    {/foreach}
                    {else}
                    <div class="news-item transition-min">
                        <div class="news-image">
                            <img alt="image" class="img-responsive"
                                 src="__ROOT__/static/plugs/uploader/theme/image.png"/>
                        </div>
                        <span class="news-title" style='display:none'>标题</span>
                    </div>
                    <hr/>
                    {/if}
                    <div class='article-add' data-text-tip="添加图文">
                        <i class="fa fa-plus"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xs-9" style='padding-right:0'>
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <h5 class='text-center' style='margin-top:0;display:block'>图文内容编辑</h5>
                </div>
            </div>
            <div class="portlet-body form">
                <form class="form-horizontal" role="form" name="news" onsubmit="return false;">
                    <div class="form-body">

                        <div class="form-group">
                            <div class="col-md-12">
                                <div class="input-group">
                                    <span class="input-group-addon">标题</span>
                                    <input maxlength="64" required="" title="标题不能为空哦！" type="text" name='title'
                                           class="form-control" placeholder="请在这里输入标题">
                                    <input type="hidden" name="id">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-12">
                                <div class="input-group">
                                    <span class="input-group-addon">作者</span>
                                    <input maxlength="8" required="" title="作者不能为空哦" type="text" name='author'
                                           class="form-control" placeholder="请输入作者">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-12">
                                <div class="form-control" style="height:auto">
                                    <label>图文封面大图片</label>
                                    <div class="row">
                                        <div class="col-xs-3">
                                            <div style="width: 112px;height:112px;overflow:hidden">
                                                <input onchange="$(this).next().attr('src', this.value), $('.news-item.active').find('img').attr('src', this.value)"
                                                       value="__ROOT__/static/plugs/uploader/theme/image.png"
                                                       type="hidden" name="local_url">
                                                <img data-tips-image
                                                     style="min-height:112px;min-width:112px;width:100%;height:100%"
                                                     src="__ROOT__/static/plugs/uploader/theme/image.png">
                                            </div>
                                        </div>
                                        <div class="col-xs-8">
                                            <br>
                                            <a data-file="" data-one="true" data-type="image" data-field="local_url"
                                               class="btn btn-transparent green btn-outline btn-circle btn-sm">上传图片</a>
                                            <a data-iframe="{'@wechat/news/media'|app_url}&field=local_url"
                                               class="btn btn-transparent green btn-outline btn-circle btn-sm">从图库中选择图片</a>
                                            <br>
                                            <br>
                                            <label class="mt-checkbox mt-checkbox-outline"
                                                   style="margin-left:0px;padding-left:24px">
                                                <input data-auto-none type="checkbox" value="1" name="show_cover_pic">
                                                在正文显示此图片
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                    <p class="help-block" style="margin-top:10px">封面大图片建议尺寸：900像素 * 500像素</p>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-12">
                                <textarea name='content'></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>摘要选填，如果不填写会默认抓取正文前54个字</label>
                                <textarea resize="false" name="digest" class="form-control"
                                          style="height:80px"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-12">
                                <label>原文链接选填，填写之后在图文左下方会出现此链接</label>
                                <input maxlength="200" type="text" name='content_source_url' class="form-control"
                                       placeholder="请输入原文链接">
                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-offset-3 col-md-9">
                                <button data-submit type="button" class="btn green">保存图文</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}


{block name='script'}
<script>
    $(function () {

        var editDdata = $.parseJSON('{$vo.articles|default=[]|json_encode}');
        for (var i in editDdata) {
            $('.news-item').eq(i).data('item', editDdata[i]);
        }

        require(['ueditor'], function () {

            /*! 实例富文本编辑器  */
            var editor, $preItem;

            /*! 默认编辑第一篇图文 */
            editor = window.createEditor('[name="content"]', 'basic');
            editor.ready(function () {
                var $form = $('form[name="news"]');
                // 表单验证
                function verify(callback) {
                    $form.validate(function (ret) {
                        ret.content = editor.getContent();
                        if (ret.content.length < 1) {
                            return $.msg.tips('请输入图文内容！');
                        }
                        $('.news-item.active').data('item', ret);
                        callback.call(this.ret);
                    }).submit();
                }

                // 数据提交
                $form.find('button[data-submit]').on('click', function () {
                    verify(function () {
                        var data = [];
                        $('.news-item').map(function () {
                            data.push($(this).data('item'));
                        });
                        $.form.load('__SELF__', {data: data}, "POST");
                    });
                });
                // 输入标题显示
                $form.find('[name="title"]').on('keyup', function () {
                    if ($preItem) {
                        if (this.value.length > 0) {
                            $preItem.find('.news-title').html(this.value).show();
                        } else {
                            $preItem.find('.news-title').html(this.value).hide();
                        }
                    }
                });
                /*! 显示编辑器 */
                function showEditor() {
                    var $item = $('.news-item.active');
                    // 处理上一个编辑器
                    $preItem = $item;
                    // 读取对象数据
                    this.get = function () {
                        var data = $item.data('item') || {};
                        data.title = data.title || '';
                        data.local_url = data.local_url || '__ROOT__/static/plugs/uploader/theme/image.png';
                        data.content = data.content || '';
                        data.author = data.author || '小编';
                        data.show_cover_pic = data.show_cover_pic || 0;
                        return data;
                    };
                    $form.get(0).reset();
                    var data = this.get();
                    for (var i in data) {
                        if (i !== 'content' && i !== 'show_cover_pic') {
                            $form.find('[name="' + i + '"]').val(data[i]).trigger('change');
                        }
                    }
                    if (parseInt(data.show_cover_pic) === 1) {
                        $form.find('[name="show_cover_pic"]').get(0).checked = true;
                    }
                    editor.setContent(data.content);
                }

                /*! jQuery事件绑定 */
                $('body').on('click', '.news-box .article-add', function () {
                    /*! 添加新图文 */
                    var $html = $('<div class="news-item transition-min"><a href="javascript:void(0)" class="upload-multiple-close hide"><i class="fa fa-close"></i></a><div class="news-image"><img alt="image" class="img-responsive" src="__ROOT__/static/plugs/uploader/theme/image.png"/></div><span class="news-title" style="display:none"></span></div><hr />');
                    $html.insertBefore(this).trigger('click');
                    if ($('.news-item').size() >= 7) {
                        return $(this).hide();
                    }
                }).off('click', '.news-item').on('click', '.news-item', function () {
                    var self = this;

                    function init() {
                        $(self).siblings().removeClass('active');
                        $(self).addClass('active');
                        showEditor();
                    }

                    $('.news-item.active').size() > 0 ? verify(init) : init.call(this);
                }).off('mouseleave').on('mouseleave', '.news-item', function () {
                    /*! 隐藏删除按钮 */
                    $(this).find('.upload-multiple-close').addClass('hide');
                }).off('mouseenter', '.news-item').on('mouseenter', '.news-item', function () {
                    /*! 显示删除按钮 */
                    $('.upload-multiple-close').addClass('hide');
                    $(this).find('.upload-multiple-close').removeClass('hide');
                }).off('click', '.upload-multiple-close').on('click', '.upload-multiple-close', function () {
                    /*! 删除操作图文 */
                    $(this).parents('.news-item').remove();
                    if ($('.news-item').size() < 7) {
                        $('.news-box .article-add').show();
                    }
                });
                /*! 默认显示第一个 */
                $('.news-box .news-item:first').trigger('click');
            });
        });
    });
</script>
{/block}