{extend name="public/base" /}

{block name="body"}
<blockquote class="layui-elem-quote">
    <button type="button" class="layui-btn layui-btn-small" data-href="{:url('database/backup')}" id="backup"><i class="layui-icon">&#xe622;</i> 备份数据库</button>
</blockquote>

<div class="layui-form admin-main">
    <table class="layui-table">
        <thead>
            <tr>
                <th width="20"><input type="checkbox" lay-skin="primary" lay-filter="allChoose"></th>
                <th width="30">编号</th>
                <th>表名</th>
                <th>数据量</th>
                <th>表引擎</th>
                <th>数据大小</th>
                <th>数据索引</th>
                <th>创建时间</th>
                <th>备份状态</th>
                <th>表备注</th>
            </tr>
        </thead>
        <tbody>
            {volist name="list" id="vo"}
            <tr>
                <td><input type="checkbox" data-name="{$vo.name}" lay-filter="name" lay-skin="primary"></td>
                <td>{$i}</td>
                <td>{$vo.name}</td>
                <td>{$vo.rows}</td>
                <td>{$vo.engine}</td>
                <td>{$vo.data_length}</td>
                <td>{$vo.index_length}</td>
                <td>{$vo.create_time}</td>
                <td width="120" class="info">未备份</td>
                <td>{$vo.comment}</td>
            </tr>
            {/volist}
        </tbody>
    </table>
</div>
{/block}

{block name="layui"}
<script type="text/javascript">
    layui.use(['form'], function(){
        var $ = layui.jquery, form = layui.form();
        form.on('checkbox(allChoose)', function(data) {
            var child = $(data.elem).parents('table').find('tbody input[lay-filter="name"]');
            child.each(function(index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

        var $backup = $('#backup');
        var tables = [];

        $backup.on('click', function(e) {
            tables = getSelected();
            if (tables.length < 1) {
                layer.msg('请至少选择一个数据表');
            } else {
                // 设置按钮禁用，防止重复点击
                $backup.attr('disabled', 'disabled').addClass('layui-btn-disabled').text('发送备份请求');

                $.post($backup.data('href'), {tables: tables}, function(res) {
                    if (res.code == 0) {
                        layer.msg(res.msg);
                        $backup.removeAttr('disabled').removeClass('layui-btn-disabled').html('<i class="layui-icon">&#xe622;</i> 备份数据库');
                    } else {
                        layer.msg(res.msg);
                        $backup.html("正在备份，请不要关闭本页面！");
                        backup(res.data);
                    }
                });
            }
        });

        function backup(table, status){
            status && showmsg(table.id, "开始备份...(0%)");
            $.get($backup.data("href"), table, function(res) {
                if (res.code) {
                    showmsg(table.id, res.msg);
                    if (res.data == '') {
                        $backup.removeAttr('disabled').removeClass('layui-btn-disabled');
                        layer.msg(res.msg);
                        $backup.html('<i class="layui-icon">&#xe622;</i> 备份完成，点击重新备份');
                        return;
                    }
                    backup(res.data, table.id != res.data.id);
                } else {
                    layer.msg(res.msg);
                    $backup.removeAttr('disabled').removeClass('layui-btn-disabled');
                    $backup.html('<i class="layui-icon">&#xe622;</i> 备份数据库');
                }
            }, "json");
        }

        function showmsg(id, msg) {
            $('.layui-form').find("input[data-name=" + tables[id] + "]").closest("tr").find(".info").html(msg);
        }

        function getSelected() {
            var child = $('.layui-form').find('tbody input[lay-filter="name"]:checked');
            var idArr = [];
            child.each(function(index, item) {
                idArr[index] = $(item).data('name');
            });
            return idArr;
        }
    });
</script>
{/block}