{% load staticfiles %}
{% for i in img %}
<div class="col-xs-4 col-sm-4 col-md-3">
    <div class="imgParent">
        <div class="imgBorder">
            <img src="{{ i.addr }}" data-original="{{ i.addr }}" alt="" width="300px" height="300px">
            <!-- {% if role == "superuser" or role == "staff" %}
            <span>{{ i.upl_time }}</span>
            {% endif %} -->
        </div>
        <span class="imgBorderTime">{{ i.upl_time }}</span>
        <div class="imgInfo">
            <p>{{ i.real_time }}</p>
            <!-- <div>
        <a href="">测试</a>
        <a href="">测试</a>
        <a href="">测试</a>
      </div> -->
        </div>
        {% if role == "superuser" or role == "staff" %}
        <span class="delBtn" onclick="del($(this))"></span>
        {% endif %}
    </div>
</div>
{% empty %}
<div class="col-xs-12 ">
    <div style="text-align: center;line-height: 200px;">
        暂无数据
    </div>
</div>
{% endfor %}
<input type="hidden" id="totalPage" value={{ nums }}>

<script>
    // 时间段查询
    function img_filter() {
        var totalPage = $('#totalPage').val();
        var begin = $('#begin').val();
        var end = $('#end').val();
        if (!begin || !end) {
            layui.use('laypage', function () {
                var layer = layui.layer;
                layer.msg('请输入时间段！')
            })
            return false;
        }
        $.ajax({
            url: 'tccb_photo_list',
            type: 'get',
            data: {
                id: id,
                page: 1,
                begin: begin,
                end: end
            },
            success: function (data) {
                $('#picturesGather').html('');
                $('#picturesGather').html(data);
                viewer.destroy();
                viewer = new Viewer(document.getElementById('picturesGather'))
                var datas = {
                    id: id,
                    page: 1,
                    begin: begin,
                    end: end
                }
                if ($('#totalPage').val() > 0) {
                    initSearchPage($('#totalPage').val(), 'sex_photo_list', datas);
                } else {
                    $('#page').empty();
                }
                if ($('.content').height() > 750) {
                    $('#iframe-main', parent.document).css('height', $('.content').height() + 20)
                } else {
                    $('#iframe-main', parent.document).css('height', '750px')
                }
            }
        })
    }
    //用户搜索分页
    function initSearchPage(totalPage, url, datas) {
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            laypage.render({
                elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                // , count: 30
                , count: totalPage
                , theme: '#428BCA'
                , limit: 8
                , layout: ['prev', 'page', 'next', 'skip']
                , jump: function (obj, first) {
                    datas.page = obj.curr;
                    if (!first) {
                        $.ajax({
                            url: url,
                            type: 'get',
                            data: datas,
                            success: function (data) {
                                $('#picturesGather').html('');
                                $('#picturesGather').append(data);
                                viewer.destroy();
                                viewer = new Viewer(document.getElementById('picturesGather'))
                                if ($('.content').height() > 750) {
                                    $('#iframe-main', parent.document).css('height', $('.content').height() + 20)
                                } else {
                                    $('#iframe-main', parent.document).css('height', '750px')
                                }
                            }
                        })
                    }
                }
            });
        });
        scrollBar()
    }
</script>