{include file="/common/header"}
    <style type="text/css">
        .layui-form-label { width: 100px; text-align: center; }
    </style>
    <div class="container">
        <div class="user">
            <div class="layui-tab layui-tab-brief" lay-filter="menu">
                <ul class="layui-tab-title">
                    <li class="layui-this">图片管理</li>
                    <li>修改资料</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show fadeInDown animated">
                        <div class="list-per">
                            <form class="layui-form" action="" method="post">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select name="sort" lay-verify="required" lay-filter="sort">
                                            <option value="1">最新的</option>
                                            <option value="2">最旧的</option>
                                            <option value="3">最大的</option>
                                            <option value="4">最小的</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" name="date" class="layui-input" id="date" placeholder=" - ">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" name="search_val" value="" placeholder="请输入文件名" class="layui-input">
                                    </div>
                                    <button class="layui-btn search_btn layui-btn-small layui-btn-primary" lay-submit lay-filter="search_btn">查询</button>
                                </div>
                                <div class="layui-inline pull-right layui-btn-group">
                                    <button type="button" class="layui-btn batchDel layui-btn-small checkBoxAll" onclick="checkBoxAll()">全选</button>
                                    <button type="button" class="layui-btn layui-btn-danger batchDel layui-btn-small" onclick="picBatchDel()">批量删除</button>
                                </div>
                            </form>
                        </div>
                        <div class="row list">

                        </div>
                    </div>
                    <div class="layui-tab-item fadeInDown animated">
                        <div class="row">
                            <div class="col-md-6 col-1g-6">
                                <form class="form-horizontal layui-form" role="form">
                                    <div class="form-group">
                                        <label for="email" class="col-sm-2 control-label">Email</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="email" placeholder="请输入Email" value="{$user.email}" disabled>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="username" class="col-sm-2 control-label">昵称</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="username" name="username" placeholder="请输入昵称" value="{$user.username}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="password" class="col-sm-2 control-label">密码</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" id="password" name="password" placeholder="不修改请留空">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="passwords" class="col-sm-2 control-label">确认</label>
                                        <div class="col-sm-10">
                                            <input type="password" class="form-control" id="passwords" name="passwords" placeholder="请输入确认密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="submit" class="btn btn-default" id="edit" lay-submit lay-filter="edit">修改</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {js href="//cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"}
    <script type="text/javascript">
        layui.use(['flow', 'layer', 'laydate', 'form'], function() {
            var flow = layui.flow, layer = layui.layer, laydate = layui.laydate, form = layui.form;
            var rows = {$conf.img_rows}; // 每页显示数量
            laydate.render({
                elem: '#date',
                range: true
            });

            getImgList([], $('[name=search_val]').val());

            function getImgList(so, sort) {
                flow.load({
                    elem: '.list',
                    isAuto: {$conf.flow_load_mode ? 'true' : 'false'},
                    isLazyimg: true,
                    done: function(page, next) {
                    var lis = [];
                        $.ajax({
                            url: 'user/getImgList',
                            type: 'POST',
                            timeout: 8000,
                            data: {'page': page, 'limit': rows, 'so': so, 'sort': sort},
                            dataType: 'JSON',
                            success: function(res) {
                                if(res.code) {
                                    var data = res.data;
                                    var append = '';
                                    layui.each(data, function(k, v) {
                                        append += "<div class=\"picture pic-"+ v.id +" col-md-3 col-sm-3 col-1g-3\"><i title=\"选中\" data-id="+ v.id + "  class=\"pic-del fa fa-circle-thin\"></i>";
                                        append += "    <div class=\"img\">";
                                        append += "        <img lay-src=\""+ v.url +"\">";
                                        append += "        <div class=\"img-per\">";
                                        append += "            <div class=\"input-group\">";
                                        append += "                <input class=\"form-control input-sm\" id=\"copy-"+ v.id +"\" value=\""+ v.url +"\">";
                                        append += "                <div class=\"input-group-btn\">";
                                        append += "                    <button class=\"btn btn-default btn-sm copy\" data-clipboard-action=\"copy\" data-clipboard-target=\"#copy-"+ v.id +"\" title=\"复制\"><i class=\"fa fa-copy\"></i></button>";
                                        append += "                    <button class=\"btn btn-default btn-sm\" onclick=\"picDel(" + v.id + ")\" title=\"删除\"><i class=\"fa fa-trash-o\"></i></button>";
                                        append += "                    <a href=\""+ v.url +"\" target=\"_blank\" title=\"新窗口打开\" class=\"btn btn-default btn-sm\"><i class=\"fa fa-rocket\"></i></a>";
                                        append += "                </div>";
                                        append += "            </div>";
                                        append += "        </div>";
                                        append += "    </div>";
                                        append += "</div>";
                                    });
                                    lis.push(append)
                                    next(lis.join(''), rows == (data ? data.length : '没有更多啦'));
                                    /*layer.msg('加载中', {
                                        icon: 16,
                                        shade: 0.1,
                                        time: 2000
                                    }, function() {
                                        // 大图预览
                                        layer.photos({
                                            photos: '.img',
                                            anim: 0
                                        });
                                    });*/
                                    layer.photos({
                                        photos: '.img',
                                        anim: 0
                                    });

                                    $('.pic-del').click(function() {
                                        var t = $(this);
                                        // 判断是否选中
                                        if(t.hasClass('fa-check-circle-o')) {
                                            t.removeClass('fa-check-circle-o');
                                            t.addClass('fa-circle-thin');
                                        } else {
                                            t.removeClass('fa-circle-thin');
                                            t.addClass('fa-check-circle-o');
                                        }
                                    });
                                }
                            },
                            error: function(err) {
                                layer.msg(err);
                            }
                        });
                    }
                });
            }
            form.on('submit(search_btn)', function(data) {
                //layer.load(2);
                $('.list').html('');
                getImgList(data.field);
                //layer.closeAll('loading');
                return false;
            });
            form.on('select(sort)', function(data) {
                var sort = '';
                switch (parseInt(data.value)) {
                    case 1: sort = 'upload_time desc'; break;
                    case 2: sort = 'upload_time asc'; break;
                    case 3: sort = 'size desc'; break;
                    case 4: sort = 'size asc'; break;
                    default: sort = 'upload_time desc';
                }
                $('.list').html('');
                return getImgList([], sort);
            });
            //监听提交
            form.on('submit(edit)', function(data) {
                btnLoad('#edit');
                //layer.msg(JSON.stringify(data.field));
                $.post('/user/edit', data.field, function(res) {
                    closeBtnLoad('#edit', '修改');
                    return layer.msg(res.msg, {icon: res.code ? 1 : 2});
                });
                return false;
            });
        });
        var clipboard = new Clipboard('.copy');
        clipboard.on('success', function(e) {
            /*console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);*/
            layer.msg("复制成功", {icon: 1});
            e.clearSelection();
        });

        clipboard.on('error', function(e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });
    </script>
{include file="/common/footer"}