{include file='common/head.html'}
<style type="text/css">
    #online {
        padding-top: 0 !important;
        height: auto !important
    }

    #online li {
        border: 1px solid #e6e6e6;
        background:url({APP_THEME_DIR}/images/imgbg.png)
    }

    #online li img {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        max-width: 100%;
        max-height: 106px;
        vertical-align: middle;
        transform: translate(-50%, -50%)
    }

    .tabs li:hover {
        border-color: transparent;
        background: var(--color);
        color: #fff
    }

    .tabs li:hover a {
        color: #fff
    }

    .heading {
        clear: both;
        margin: 20px 10px
    }

    .heading h2 {
        margin: 0 0 10px;
        color: #333;
        font-weight: 400;
        font-size: 15px
    }

    .heading hr {
        position: relative;
        margin: 0;
        width: 100%;
        height: 1px;
        border: none;
        background: #e5e5e5
    }

    .heading hr:before {
        position: absolute;
        top: -1px;
        left: 0;
        width: 60px;
        height: 2px;
        background: #666;
        content: ""
    }

    .tabs li span.icon-del {
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 999999999;
        padding: 2px 3px 2px 5px;
        width: 36px;
        height: 18px;
        border-radius: 2px;
        background: var(--danger-color);
        color: #fff;
        text-align: center;
        letter-spacing: 2px;
        font-size: 12px;
        line-height: 18px;
        cursor: pointer
    }
</style>
<link href="{CORE_DIR}/extend/ueditor/dialogs/image/image.css?v={APP_VERSION}-{REVISE_VERSION}" rel="stylesheet" type="text/css">
<div class="ui-layout-west area manage-area" id="manage_area">
    <div id="tree" class="ztree"></div>
</div>
<div class="ui-layout-center" id="online">
    <ul id="list" class="tabs">
        {if(count([$common_pic])>0 )}
        <div class="heading">
            <h2>最新上传</h2>
            <hr>
        </div>
        {foreach $common_pic(key,value)}
        <li data-url="[value->url]" data-name="[value->original]" 111>
            <a href="{$info.sitedir}[value->url]" target="_blank">
                <img lay-src="{$info.sitedir}[value->url]" />
            </a>
            {if([$flag])}
            <span class="icon"></span>
            {else}
            {if(check_level('del'))}
            <span class="icon-del">删除</span>
            {/if}
            {/if}
        </li>
        {/foreach}
        {/if}
        {if(count([$list])>0 )}
        <div class="heading">
            <h2>目录图片</h2>
            <hr>
        </div>
        {foreach $list(key,value)}
        <li data-url="[value['path']]" data-name="[value['name']]">
            <a href="{$info.sitedir}[value['path']]" target="_blank">
                <img lay-src="{$info.sitedir}[value['path']]" alt="[value['name']]" />
            </a>
            {if([$flag])}
            <span class="icon"></span>
            {else}
            {if(check_level('del'))}
            <span class="icon-del">删除</span>
            {/if}
            {/if}
        </li>
        {/foreach}
        {/if}
    </ul>
</div>
<div class="layui-clear"><br></div>
<div class="page">
    {$pagebar}
</div>
{include file='common/foot.html'}
{if([$flag])}
<script type="text/javascript">
    // 记录选择的图片
    $(function() {
        $(document).on('click', '#list li', function() {
            var num = '{$info.num}';
            if (1 == num) {
                // 当数量为1时，仅可选择一张图片
                $("#list li").each(function() {
                    $(this).removeClass("selected")
                });
            }
            // 给点击的图片加上Class
            $(this).toggleClass("selected");
        })
    });
</script>
{else}
{if(check_level('del'))}
<script type="text/javascript">
    $(function() {
        $(document).on('click', '#list li span.icon-del', function() {
            var img = $(this).parent('li').data('url');
            var that = $(this).parent('li');
            //console.log(img);
            $.post('{url./admin/Media/del/}', {
                formcheck: "{$formcheck}",
                img: img
            }, function(msg) {
                //console.log(msg);
                if (msg.code == 1) {
                    layer.msg(msg.data);
                    that.remove();
                }
            }, 'json')
        })
    });
</script>
{/if}
{/if}