<style>
    .upload_img{ float: left;}
    .upload_img .img-item{float: left; margin:0 15px 15px 0;position: relative;text-align: center;display: inline-block;}
    .upload_img .img-item i{ width: 16px; height: 16px; cursor: pointer; background: url(__MANAGER__/image/ico_close4.png) no-repeat center; background-size: 100%; padding: 2px; line-height: 15px; text-align: center; color: #fff; margin-left: 1px; float: left; position: absolute; right: -8px; top: -8px;}
    .upload_img .img-item img{ width: 60px; height: 60px; object-fit: cover; border-radius: 5px; float: left;}
    .upload_img .item-src{object-fit: contain;width: 100%;height: 100%;}
    .upload_img .img-item:hover .operate{display: block}
    .upload_img .operate{position: absolute;background: #0707079c;color: #fff;width: 100%;bottom: 0px;display: none}
    .upload_img .operate a{float: left;width: 33.3%;text-align: center;padding: 5px 0px;}
    .layer-photos img,.layer-video video{ cursor: zoom-in;}

    .upload_img_btn{ min-width: 60px; height: 60px; background: #2887fc; border-radius: 5px; color: #fff; text-align: center; float: left; font-size: 12px; cursor: pointer; margin-bottom: 15px; transition: all .6s;}
    .upload_img_btn i{ display: block; height: 15px; background: url(__MANAGER__/image/ico_upload.png) no-repeat center; background-size: auto 100%; margin: 13px 0 2px;}
    .upload_img_btn p{ padding: 0 6px;}
    .upload_img_btn:hover{ background-color: #1970D9;}

    .upload-image-points .layui-form-mid{ padding-top: 0 !important;}

    .upload-image-box,.upload-video-box{ text-align: left;}

    .serverImgsList ul{ margin: 0 -5px;}
    .serverImgsList ul li{ width: 16.666%; height: 85px; float: left; padding: 0 5px; margin-bottom: 10px;}
    .serverImgsList ul li img{ width: 100%; height: 100%; object-fit: cover; cursor: pointer;}
    .serverMore{ width: 100%; float: left; text-align: center; padding: 10px 0 20px;}
    .serverMore a{ cursor: pointer;}

</style>
<div class="upload-image-box">
    <div id="list{$append}" class="upload_img">
        {if file_exists('.'.$src)&&!empty($src)}
        <div class="img-item">
            <i class="close" onclick="imgdel(this)"></i>
            <div class="layer-photos"><img class="listsimg" src="{$src}" layer-src="{$src}" /></div>
        </div>
        {/if}
    </div>
    <div class="upload_img_btn" id="upload-image{$append}">
        <i></i><p>上传图片</p>
    </div>
    <div class="upload_img_btn" id="serverImgs{$append}" style="margin-left: 15px;">
        <i></i><p>服务器图片</p>
    </div>
    <div class="upload layui-clear">
        <div class="layui-clear"></div>
        <div class="upload-image-points">
            <p id="upload-image-src{$append}"></p>
            <input type="hidden" id="picker{$append}" name="{$fieldName}" value="{$src ?? ''}" class="layui-file"/>
        </div>
        <div class="upload-image-points">
            {if !empty($imgSize)}
            <div class="layui-form-mid layui-word-aux">注:图片最佳尺寸为: {$imgSize} 数字0表示不限制</div>
            {else /}
            <div class="layui-form-mid layui-word-aux">请上传大小合适的图片</div>
            {/if}
        </div>
    </div>
</div>

<script type="text/javascript">
    var listSize = 3;
    var listPage = 2;
    layui.use(['jquery', 'upload', 'element', 'layer'], function () {
        let $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

        $(document).on("click",".layer-photos",function(e){
            layer.photos({
                photos: { "data": [{"src": e.target.src}] }
                ,anim: 5
            });
        });

        var uploadInst = upload.render({
            elem: "#upload-image{$append}"
            ,url: '/manager/upload/image'
            ,data: {thumb: {$thumb}}
            ,field: 'image'
            ,accept: 'images'
            ,acceptMime: 'image/*'
            ,choose: function(obj){
                var previewElem = "#list{$append}";
                obj.preview(function(index, file, result){
                    var imTpl = '<div class="img-item"><i class="close" onclick="imgdel(this)"></i>'+
                        '<div class="layer-photos"><img class="listsimg" src="'+result+'" layer-src="'+result+'" /></div>'+
                        '</div>';
                    $(previewElem).html(imTpl);
                    $(window).trigger("resize");
                });
            }
            ,before: function(obj){
                layer.load();
            }
            ,done: function(res, index, upload){
                var imgInput = "#picker{$append}";
                layer.closeAll('loading');
                if(res.code === 0) {
                    $(imgInput).val(res.data.src);
                } else {
                    $(imgInput).val('');
                    layer.msg(res.msg,{time:1500});
                }
            }
            ,error: function(index, upload){
                layer.closeAll('loading');
            }
        });

        $('#serverImgs{$append}').click(function(){
            var html = '';
            $.ajax('/manager/file/list',{
                data:{
                    type: 'img',
                    page: 1,
                    size: listSize
                },
                dataType:'json',//服务器返回json格式数据
                type:'get',//HTTP请求类型
                timeout:10000,//超时时间设置为10秒;
                success:function(data){
                    if(data.code === 0){
                        if(data.data.length > 0){
                            html += '<div class="layui-card-body"><div class="serverImgsList"><ul>'
                            $.each(data.data,function(i,item){
                                html += '<li><img src="'+item.src+'" data-box="list{$append}" data-input="picker{$append}" onclick="imgUrl(this)"></li>'
                            })
                            html += '</ul></div>';
                            if(data.data.length >= listSize){
                                html += '<div class="serverMore"><a data-box="list{$append}" data-input="picker{$append}" onclick="imgList(this)">加载更多</a></div>'
                            }
                            html += '<div class="layui-clear"></div></div>';
                            layer.open({
                                type: 1,
                                title: '服务器图片',
                                shadeClose: true,
                                area: ['800px',''], //宽高
                                move: false,
                                content: html,
                                success:function(layero, index) {
                                    alertRender()
                                    layero.find('.serverImgsList ul li img').attr('data-id',index)
                                    layero.find('.serverMore a').attr('data-id',index)
                                }
                            });
                        }else{
                            layer.msg('暂无数据')
                        }
                    }
                },
                error:function(xhr,type,errorThrown){

                }
            });
        })


    })

    function imgUrl(obj){
        layui.use(['jquery'], function() {
            let $ = layui.jquery;
            var imTpl = '<div class="img-item"><i class="close" onclick="imgdel(this)"></i>'+
                '<div class="layer-photos"><img class="listsimg" src="'+$(obj).attr('src')+'" layer-src="'+$(obj).attr('src')+'" /></div>'+
                '</div>';
            $('#'+$(obj).attr('data-box')).html(imTpl);
            $('#'+$(obj).attr('data-input')).val($(obj).attr('src'));
            console.log($(obj).attr('data-id'), 'close')
            parent.layer.close($(obj).attr('data-id'));
        })

    }
    function imgList(obj){
        layui.use(['jquery'], function() {
            let $ = layui.jquery;
            $.ajax('/manager/file/list',{
                data:{
                    type: 'img',
                    page: listPage,
                    size: listSize
                },
                dataType:'json',//服务器返回json格式数据
                type:'get',//HTTP请求类型
                timeout:10000,//超时时间设置为10秒;
                success:function(data){
                    if(data.code === 0){
                        if(data.data.length > 0){
                            var html = ''
                            $.each(data.data,function(i,item){
                                html += '<li><img src="'+item.src+'" data-id="'+$(obj).attr('data-id')+'" data-box="'+$(obj).attr('data-box')+'" data-input="'+$(obj).attr('data-input')+'" onclick="imgUrl(this)"></li>'
                            })
                            $(obj).parent().parent().find('.serverImgsList ul').append(html)
                            $(window).trigger("resize");
                            if(data.data.length < listSize){
                                $(obj).parent().append('<p>没有了</p>')
                                $(obj).parent().find('a').remove();
                            }else{
                                listPage++;
                            }
                        }else{
                            layer.msg(data.msg)
                        }
                    }
                },
                error:function(xhr,type,errorThrown){

                }
            });
        })
    }
    function imgdel(obj){
        layui.use(['jquery'], function(){
            let $ = layui.jquery;
            $('#picker{$append}').val('');
            $(obj).parent().remove();
        })
    }

</script>