{extend name="main"}

{block name="button"}

{if auth('add')}
<button data-open="{:url('add')}" class='layui-btn layui-btn-sm layui-btn-primary'>添加图文</button>
{/if}

{/block}

{block name='content'}
<div class="think-box-shadow">
    <div id="news-box" class="layui-clear layui-hide">
        {foreach $list as $vo}
        <div class="news-item">
            <div class='news-tools layui-hide'>
                <a data-phone-view="{:url('api.view/news')}?id={$vo.id}" style="cursor:pointer">预览</a>
                <a data-open='{:url("edit")}?id={$vo.id}' style="cursor:pointer">编辑</a>
                <a data-news-del="{$vo.id}" style="cursor:pointer">删除</a>
            </div>
            {foreach $vo.articles as $k => $v}
            {if $k < 1}
            <div data-tips-image='{$v.local_url}' data-lazy-src="{$v.local_url}" class='news-articel-item'>
                {if $v.title}<p>{$v.title}</p>{/if}
            </div>
            <div class="hr-line-dashed"></div>
            {else}
            <div class='news-articel-item other'>
                <span>{$v.title}</span>
                <div data-tips-image='{$v.local_url}' data-lazy-src="{$v.local_url}"></div>
            </div>
            <div class="hr-line-dashed"></div>
            {/if}{/foreach}
        </div>
        {/foreach}
    </div>
    {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
</div>
{/block}

{block name='script'}
<script>
    $('body').off('mouseenter', '.news-item').on('mouseenter', '.news-item', function () {
        $(this).find('.news-tools').removeClass('layui-hide');
    }).off('mouseleave', '.news-item').on('mouseleave', '.news-item', function () {
        $(this).find('.news-tools').addClass('layui-hide');
    });
    $.msg.loading();
    require(['jquery.masonry'], function (Masonry) {
        layui.layer.closeAll();
        $('#news-box').removeClass('layui-hide');
        var newsbox = document.querySelector('#news-box');
        var msnry = new Masonry(newsbox, {itemSelector: '.news-item', columnWidth: 0});
        msnry.layout(), $('body').on('click', '[data-news-del]', function (event) {
            $.msg.confirm('确定要删除图文吗？', function (index) {
                $.msg.close(index), $.form.load('{:url("remove")}', {value: 0, field: 'delete', id: $(event.target).data('news-del')}, 'post', function (ret) {
                    if (ret.code) {
                        $(event.target).parents('.news-item').remove();
                        msnry = new Masonry(newsbox, {itemSelector: '.news-item', columnWidth: 0});
                        return msnry.layout(), (msnry.items.length < 1 && $.form.open('{:url("index")}')), $.msg.success(ret.info), false;
                    } else {
                        return $.msg.error(ret.info), false;
                    }
                });
            });
        });
    });
</script>
{/block}

{block name="style"}
<style>
    #news-box {
        position: relative
    }

    #news-box .news-item {
        top: 0;
        left: 0;
        padding: 5px;
        margin: 10px;
        width: 300px;
        overflow: hidden;
        position: relative;
        border-radius: 5px;
        border: 1px solid #ccc;
        box-sizing: content-box;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
    }

    #news-box .news-item .news-articel-item {
        height: 150px;
    }

    #news-box .news-item .news-articel-item p {
        bottom: 0;
        width: 100%;
        color: #fff;
        padding: 5px;
        max-height: 5em;
        font-size: 12px;
        overflow: hidden;
        position: absolute;
        text-overflow: ellipsis;
        background: rgba(0, 0, 0, .7)
    }

    #news-box .news-item .news-articel-item.other {
        height: 50px;
        padding: 5px 0
    }

    #news-box .news-item .news-articel-item span {
        width: 225px;
        overflow: hidden;
        line-height: 50px;
        white-space: nowrap;
        display: inline-block;
        text-overflow: ellipsis
    }

    #news-box .news-item .news-articel-item div {
        width: 70px;
        height: 50px;
        float: right;
        overflow: hidden;
        position: relative;
        background-position: center center;
        background-size: cover;
    }

    #news-box .hr-line-dashed {
        margin: 6px 0 1px 0
    }

    #news-box .news-item .hr-line-dashed:last-child {
        display: none
    }

    #news-box .news-tools {
        top: 0;
        z-index: 80;
        color: #fff;
        width: 302px;
        padding: 0 5px;
        margin-left: -6px;
        line-height: 38px;
        text-align: right;
        position: absolute;
        background: rgba(0, 0, 0, .7)
    }

    #news-box .news-tools a {
        color: #fff;
        margin-left: 10px
    }
</style>
{/block}