{extend name="full"}

{block name='style'}
<style>
    .news-container {
        overflow: auto;
        position: relative;
        max-height: 480px;
    }

    .news-container .news-item {
        top: 0;
        left: 0;
        width: 228px;
        margin: 0 0 20px 20px;
        padding: 5px;
        cursor: pointer;
        position: relative;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: content-box
    }

    .news-container .news-item.active,
    .news-container .news-item:hover {
        border-color: #09c;
        box-shadow: 1px 0 10px #09c
    }

    .news-container .news-item .news-articel-item {
        width: 100%;
        height: 150px;
        overflow: hidden;
        position: relative;
        background-size: cover;
        background-position: center center
    }

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

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

    .news-container .news-item .news-articel-item .left-image {
        width: 50px;
        height: 50px;
        float: left;
        overflow: hidden;
        position: relative;
        background-size: cover;
        background-position: center center
    }

    .news-container .news-item .news-articel-item .right-text {
        float: left;
        width: 165px;
        overflow: hidden;
        padding-right: 10px;
        text-overflow: ellipsis
    }

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

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

    .pagination-container {
        left: 0;
        right: 0;
        bottom: 0;
        padding: 5px 20px;
        position: fixed;
        background: #fff;
        border-top: 1px solid #dedede;
    }
</style>
{/block}

{block name="body"}
<div class="layui-clear news-container layui-hide padding-top-20">
    {foreach $list as $vo}
    <div class="news-item shadow-mini" data-news-id="{$vo.id}">
        {foreach $vo.articles as $k => $v}{if $k < 1}
        <div class='news-articel-item' data-lazy-src="{$v.local_url}">
            {if $v.title}<p>{$v.title}</p>{/if}
        </div>
        <div class="hr-line-dashed"></div>
        {else}
        <div class='news-articel-item other'>
            <div class='right-text'>{$v.title}</div>
            <div class='left-image' 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}
{/block}

{block name="script"}
<script>
    require(['jquery.masonry'], function (Masonry) {
        $('.news-container.layui-hide').removeClass('layui-hide');
        var msnry = new Masonry($('.news-container').get(0), {
            itemSelector: '.news-item', columnWidth: 0
        });
        msnry.layout();
        /*! 事件处理 */
        $('.news-item').on('mouseenter', '.news-container', function () {
            $(this).addClass('active');
        }).on('mouseleave', '.news-container', function () {
            $(this).removeClass('active');
        });
        /*! 外部选择器 */
        var seletor = '[name="{:decode(input("get.field","0"))}"]';
        $('[data-news-id]').on('click', function () {
            window.top.$(seletor).val($(this).attr('data-news-id')).trigger('change');
            parent.layer.close(parent.layer.getFrameIndex(window.name))
        });
        /*! 分页事件处理 */
        $('body').off('change', '.pagination-trigger select').on('change', '.pagination-trigger select', function () {
            var urls = this.options[this.selectedIndex].getAttribute('data-url').split('#');
            urls.shift(), window.location.href = urls.join('#');
        }).off('click', '[data-open]').on('click', '[data-open]', function () {
            window.location.href = this.getAttribute('data-open');
        });
    });
</script>
{/block}