<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同步数据</title>
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    <script src="layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script src="layui/jquery-1.8.3.min.js"></script>
</head>

<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0; margin: 1% 1%">
    <button data-method="offsetHMC" id="tongbu" data-type="auto" class="layui-btn layui-btn-normal">同步花名册数据</button>

<!--    <button data-method="notice" id="tixing" class="layui-btn layui-btn-normal"><i class="layui-icon"></i>同步过程提醒</button>-->
</div>

<!--灰色分割线-->
<hr class="layui-bg-gray">

<!--加载表单搜索框-->
<div>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">员工ID</label>
                <div class="layui-input-inline">
                    <input type="tel" name="id" id="id" lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">员工姓名</label>
                <div class="layui-input-inline">
                    <input type="tel" name="name" id="name" lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">错误关键字</label>
                <div class="layui-input-inline">
                    <input type="tel" name="msg" id="msg" lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
            </div>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="chaxun()">查询</button>
        </div>
    </form>
</div>
<!--加载表单搜索框-->

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>

        <!--        <button id="btn1" data-method="confirmTrans" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="addHuamingce" onclick="btn1()">同步花名册数据</button>-->
        <!--        <input id="btn1" type="button" value="同步花名册数据" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="addHuamingce" onclick="btn1()"/>-->
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>
    layui.use('table', function(){
        var table = layui.table;

        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        table.render({
            elem: '#test'
            // ,url:'demo1.json'

            //TODO 访问日志信息的接口路径
            ,url:'http://47.99.48.105:8091/fangdetongbuservice/fangdetongbu/getErrorlogFangDe'
            // ,url:'http://192.168.1.193:8091/fangdetongbuservice/fangdetongbu/getErrorlogFangDe'

            ,toolbar: '#toolbarDemo'
            ,title: '用户数据表'
            ,totalRow: true
            // ,limit: 10000
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                // ,{field:'id', title:'ID', width:180, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                ,{field:'id1', title:'员工ID', width:250, fixed: 'left', unresize: true, sort: true}
                ,{field:'name', title:'员工姓名', width:150, fixed: 'left', unresize: true, sort: true}
                ,{field:'status', title:'状态', width:100}
                ,{field:'code', title:'标识', width:100}
                ,{field:'msg', title:'同步结果', width:550}
                ,{field:'ts', title:'同步时间', width:250}

                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
        });

//工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选')
                    break;
            };
        });

        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('您准备将该行错误信息从当前界面删除，确认吗？', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });
    });
</script>


<!--***各类弹框***-->
<script>
    layui.use('layer', function(){
        //触发事件
        var active = {
            offsetHMC: function(othis){
                var type = othis.data('type')
                    ,text = othis.text();

                layer.open({
                    type: 1
                    ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    ,id:'layerDemo'+type //防止重复弹出
                    ,content: '<div style="padding: 20px 100px;">'+ '您准备将钉钉中房德员工花名册数据同步至NC系统，确定吗？' +'</div>'
                    ,btn: ['确定','取消']
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                    ,yes: function btn1(){
                        $('#tongbu').addClass("layui-btn-disabled").attr("disabled",true);
                        console.info("成功");
                        $.ajax({
                            url: "../fangdetongbuservice/fangdetongbu/addFangDeHuamingceToNC",
                            // url: "../fangdetongbuservice/fangdetongbu/getFangDeHuamingce",
                            async: true,
                            type: "Post",
                            // type: "Get",
                            headers: {
                                "Access-Token": "Access-Token123456",//自定义请求头
                                "Content-Type": "application/json;charset=utf8"
                            },
                            //contentType: "json",
                            data: [id,msg],
                            success: function (list) {
                                if (list != null) {
                                    //传递参数给数据表格方法
                                    UsersTable(list);
                                    chaxun();
                                    $('#tongbu').removeClass("layui-btn-disabled").attr("disabled",false);

                                    //关闭所有弹出层
                                    layer.closeAll();

                                    // alert('数据同步已完成！');
                                    layer.msg('数据同步已完成！')
                                }
                                else{
                                    chaxun();
                                }
                            },
                            error: function (data) {
                                console.info(data);
                            }
                        })
                        layer.closeAll();
                        layer.msg('正在进行数据同步，请等待···！')

                        //触发弹出层点击事件，以下效果都一样
                        // $("#tixing").trigger('click');
                        // $("#tixing").click();

                        //触发弹出层方法
                        tcc();
                    }
                });
            }
        };

        $('#layerDemo .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    });

    notice:function tcc() {
        //示范一个公告层
        layer.open({
            type: 1
            ,title: false //不显示标题栏
            ,closeBtn: false
            ,area: '300px;'
            ,shade: 0.8
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            // ,btn: ['火速围观', '残忍拒绝']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">正在进行数据同步，请等待···！</div>'
            ,success: function(layero){
                var btn = layero.find('.layui-layer-btn');
                btn.find('.layui-layer-btn0').attr({
                    href: 'http://www.baidu.com//'//点击火速围观跳转的页面
                    ,target: '_blank'
                });
            }
        });
    }
</script>

<script>
    var element;
    layui.use('element', function(){

        element = layui.element;
    });
    //定义定时器
    var timer;
    //开始执行任务
    $('#submitbtn').click(function(){
        //进度条设置为百分之0
        element.progress('executeprogress', '0%');
        //轮询获取进度条数据
        getProcessvalue();
        //请求后台
        $.get('../fangdetongbuservice/fangdetongbu/getFangDeHuamingce',function(data){
            //执行完成进度条设置为百分之百
            element.progress('executeprogress', '100%');
            //关闭定时器
            clearInterval(timer);
        });
    });
    //轮询请求进度数据
    function getProcessvalue(){
        //1秒请求一次进度条的数据
        timer = setInterval(function () {
            $.get('../fangdetongbuservice/fangdetongbu/getprocess',function(data){
                //更新进度条
                element.progress('executeprogress', data+'%');
            });
        }, 1000);
    }

</script>

<script>
    //查询条件接口调用
    function chaxun() {
        var id = $("#id").val();
        var name = $("#name").val();
        var msg = $("#msg").val();

        UsersTable(id,name,msg);
    };

    //在执行完之后在列表中显示
    function UsersTable(id,name,msg) {
        var cs = "";
        if (id != "" || id != null ){
            cs ="id=" + id;
        }
        if (name != "" || name != null ){
            cs +="&name=" + name;
        }
        if (msg != "" || msg != null ){
            cs +="&msg=" + msg;
        }
        console.info(id+"-"+name+"-"+msg);
        layui.use('table', function(){
            var table = layui.table;
            //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
            table.render({
                elem: '#test'

                //TODO 访问日志信息的接口路径
                ,url:'http://47.99.48.105:8091/fangdetongbuservice/fangdetongbu/getErrorlogFangDe?' + cs
                // ,url:'http://192.168.1.193:8091/fangdetongbuservice/fangdetongbu/getErrorlogFangDe?' + cs

                //,data: JSON.parse(datas)
                ,toolbar: '#toolbarDemo'
                ,title: '用户数据表'
                ,totalRow: true
                // ,limit: 10000
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    // ,{field:'id', title:'ID', width:180, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                    ,{field:'id1', title:'员工ID', width:250, fixed: 'left', unresize: true, sort: true}
                    ,{field:'name', title:'员工姓名', width:150, fixed: 'left', unresize: true, sort: true}
                    ,{field:'status', title:'状态', width:100}
                    ,{field:'code', title:'标识', width:100}
                    ,{field:'msg', title:'同步结果', width:550}
                    ,{field:'ts', title:'同步时间', width:250}

                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
                ,page: true
            });
        })
    }

</script>

</body>
</html>