@extends('layouts.crm')
@section('title')系统备份@endsection
@section('header')
    <style>
        .my-logo{
            width: 112px;
            height: 142px;
        }

    </style>
@endsection
@section('navbread')
    {{-- */ $navbread = [
        ['name' => '系统设置', 'href' =>  ''],
        ['name' => '系统备份', 'href' =>  ''],

        ] /* --}}
@endsection
@section('body')

    <div style='margin:20px 0;' class='nav-box-2'>
        <button style='margin-left:10px;' class='layui-btn layui-btn-warm implement-backups-btn'>执行备份</button>
        <button style='margin-left:10px;' class='layui-btn layui-btn-delete implement-backups-delete-btn'>删除</button>
    </div>

    <div class='c-table system-backups-table'>
        <table class="layui-table">
            <colgroup>
                <col width="10%">
                <col width="15%">
                <col width="15%">
                <col width="30%">
                <col width="15%">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>
                    <input type="checkbox" name="check-all">
                </th>
                <th>备份日期</th>
                <th>执行人</th>
                <th>储存路径（服务器）</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            @if(count($info->all()))
                @foreach($info as $k=>$v)
                    <tr>
                        <td>
                            <input type="checkbox" name="check" value="{{ $v['id'] }}">
                        </td>
                        <td>{{ date('Y-m-d', $v['create_at']) }}</td>
                        <td>{{ $v['name'] }}</td>
                        <td>{{ $v['path'] }}</td>
                        <td>
                            <a href="javascript:void(0);" class='reduction-btn' data-id="{{ $v['id'] }}" data-time="{{ date('Y-m-d', $v['create_at']) }}">还原</a>
                        </td>
                    </tr>
                @endforeach
            @else
                <tr>
                    <td colspan="5" class="no-message">暂无数据</td>
                </tr>
            @endif
            </tbody>
        </table>
        @if(count($info->all()))
            <div class="c-page">
                {!! $info->links() !!}
            </div>
        @endif
    </div>
    <!-- 执行备份 -->
    <script type='text' id='implement_backups'>
   <div class='implement-backups-box c-layer-padding'>
        <p style='margin-top:10px;'>正在执行备份，请稍后......</p>
        <div class='implement-main'>
            <img src="/crm/img/loading1.png" alt="">
            <span class='count'>0</span>
        </div>
   </div>
</script>

    <!-- 执行备份成功 -->
    <script type='text' id='implement_complete'>
    <div class='implement-complete-box c-layer-padding'>
        <p style='color:#333;font-size:18px;'>恭喜，顺利完成备份！</p>
        <div class='btn-box' style='width:100%'>
            <button class='layui-btn layui-btn-normal'>确定</button>
        </div>
    </div>
</script>

    <!-- 还原 -->
    <script type='text' id='implement_reduction'>
    <div style='position:relative;height:100%;'  class='implement-reduction-box'>
        <div style='position:relative;' class='i-r-content-box'>
            <img style='position:absolute;top:77px;left:165px;' src="/crm/img/notice1.png" alt="">
            <p style='position:absolute;top:70px;left:240px;width:250px;color:#333;font-size:18px;'>该操作会将系统数据回溯至<span>$$date</span>，确定执行吗？
            </p>
        </div>
        <div class='btn-box' style='width:100%;text-align:center;position:absolute;bottom:0;left:0;'>
            <button class='layui-btn layui-btn-info first-back'>先去备份</button>
            <button class='layui-btn layui-btn-normal immediately-reduction-btn'>立即还原</button>
        </div>
    </div>
</script>

    <!-- 立即还原 -->
    <script type='text' id='immediately_reduction'>
    <div class='immediately-reduction c-layer-padding'>
        <p style='text-align:center;margin:35px 0 60px 0;font-size：16px'>正在执行还原，请稍后......</p>
        <div style='width:450px;margin:0 auto' class='i-r-progress-bar'>
            <h4 class='count' style='text-align:center;margin-bottom:20px;'>0%</h4>
            <div style='height:36px;' class="layui-progress layui-progress-big" lay-showPercent="true">
                <div style='width:0%;height:100%' class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
            </div>
        </div>
    </div>
</script>

    <!-- 还原完成 -->
    <script type='text' id='immediately_reduction_complete'>
        <div style='position:relative;height:100%;'  class='implement-reduction-box'>
            <div style='position:relative;' class='i-r-content-box'>
                <img style='position:absolute;top:77px;left:165px;' src="/crm/img/over.png" alt="">
                <p style='position:absolute;top:70px;left:240px;width:250px;color:#333;font-size:18px;'>系统数据已成功回溯至<span>$$date</span>请重新登陆！
                </p>
            </div>
            <div class='btn-box' style='width:100%;text-align:center;position:absolute;bottom:0;left:0;'>
                <button class='layui-btn close-back layui-btn-normal immediately-reduction-btn'>好的</button>
            </div>
        </div>
</script>
    <!-- 删除提示 -->
    <script type='text' id='implement_complete_delete'>
    <div class='implement-complete-delete c-layer-padding'>
        <p style='margin:30px 0 0 0;'>确认删除吗？</p>
        <p>删除后无法找回！</p>
    </div>
</script>
    <!-- 未选择提示 -->
    <script type='text' id='implement_complete_delete_noCheckbox'>
        <div class='implement-complete-delete c-layer-padding'>
            <p style='margin:30px 0 20px 0;'>请先选择需要删除的备份！</p>
            <div style='width:100%;text-align:center;margin-bottom:0;' class="btn-box">
                <button class='layui-btn layui-btn-normal' onclick="layer.closeAll();">知道了</button>
            </div>
        </div>
    </script>
@section('footer')
@endsection
<script src="{{ asset('/crm/js/layui/layui.all.js') }}"></script>
<script src="{{ asset('/crm/js/jquery-3.2.1.min.js') }}"></script>
<script src="{{ asset('/crm/js/jq_extend.js') }}"></script>
<script src="{{ asset('/crm/js/main.js') }}"></script>
<script>
    $(".implement-backups-btn").on("click",function(){
        $.get('/system/addOptionBack?type=1',function (re) {
            if(re.code == 1){
                $.get_layer({
                    title: "执行备份",
                    type:"1",
                    html:$("#implement_backups").html(),
                    btn_arr:[],
                    area:['600px', '340px'],
                    btn1:function(){

                    },
                    btn2:function(){

                    }
                })
                function IM(){
                    var count = parseInt($(".implement-backups-box").find(".count").text());
                    count += 1;
                    $(".implement-backups-box").find(".count").text(count+"%");
                    if(count >= 100){
                        clearInterval(time);
                        layer.closeAll();
                        $.get_layer({
                            title: "执行备份",
                            type:"1",
                            html:$("#implement_complete").html(),
                            btn_arr:[],
                            area:['600px', '220px'],
                            btn1:function(){

                            },
                            btn2:function(){

                            }
                        })
                        $(".implement-complete-box").find(".btn-box button").on("click",function(){
                            layer.closeAll();
                            setTimeout(function(){
                                window.location.reload();
                            }, 1000);
                        })

                    }
                }
                var time =setInterval(IM,50);
            }else{
                layer.msg('备份失败');
            }
        })

    })
    //还原备份
    $(".system-backups-table").on("click",".reduction-btn",function(){
        var id = $(this).attr('data-id');
        var html = $("#implement_reduction").html();
        var hh = $("#immediately_reduction_complete").html();
        html = html.replace(/\$\$date/g, $(this).attr('data-time'));
        hh = hh.replace(/\$\$date/g, $(this).attr('data-time'));
        $.get_layer({
            title: "增加",
            type:"1",
            html:html,
            btn_arr:[],
            area:['600px', '340px'],
            btn1:function(){

            },
            btn2:function(){

            }
        })
        //立即还原
        $(".immediately-reduction-btn").on("click",function(){

            layer.closeAll();
            $.get('/system/addOptionBack?type=2&id='+id,function (re) {
                    if(re.code == 1){
                        $.get_layer({
                            title: "还原备份",
                            type:"1",
                            html:$("#immediately_reduction").html(),
                            btn_arr:[],
                            area:['600px', '340px'],
                            btn1:function(){

                            },
                            btn2:function(){

                            }
                        })
                        function IR(){
                            var count = parseInt($(".i-r-progress-bar").find(".count").text());
                            count += 1;
                            $(".i-r-progress-bar").find(".count").text(count+"%");
                            $(".i-r-progress-bar").find(".layui-progress-bar").css({
                                "width":count+"%"
                            })
                            if(count >= 100){
                                clearInterval(time);
                                layer.closeAll();

                                $.get_layer({
                                    title: "还原备份",
                                    type:"1",
                                    html:hh,
                                    btn_arr:[],
                                    area:['600px', '340px'],
                                    btn1:function(){

                                    },
                                    btn2:function(){

                                    }
                                })
                            }
                        }
                        var time = setInterval(IR,50);
                    }else{
                        window.location.reload();
                    }
            })

        })
    })

    $(document).on('click','.close-back',function(){
        layer.closeAll();
        setTimeout(function(){
            window.location.reload();
        }, 1000);
    })
    //删除备份
    $(".implement-backups-delete-btn").on("click",function(){
        //是否选中
        var hasChecked = $(".system-backups-table").find('[name=check]:checked');
        if(hasChecked.length == 0){
            $.get_layer({
                title: "删除",
                type:"1",
                html:$("#implement_complete_delete_noCheckbox").html(),
                btn_arr:[],
                area:['600px', '200px'],
                btn1:function(){

                },
                btn2:function(){

                }
            })
        }else{
            $.layer_open({
                title: "删除",
                type:"1",
                html:$("#implement_complete_delete").html(),
                btn_arr:["否","是"],
                area:['600px', '220px'],
                btn1:function(){

                },
                btn2:function(){
                    var id = ',';
                    $.each(hasChecked,function(index, item){
                        id+=$(this).val()+',';
                    })

                    $.get('/system/delBack?id='+id,function (re) {
                        if(re.code == 1){
                            layer.msg('删除成功', {icon:1,time:1000},function () {
                                layer.closeAll();
                                window.location.reload();
                            })
                        }else{
                            layer.msg(re.errMsg);
                        }
                    })
                }
            })
        }

    })

    $(document).on('click','[name=check-all]',function(){
        if($(this).is(':checked')){
            $('[name=check]').prop('checked', true);
        }else{
            $('[name=check]').prop('checked', false);
        }
    })
    $(document).on('click','.first-back',function(){
        layer.closeAll();
        $('.implement-backups-btn').trigger("click");
    })
</script>
@endsection