{extend name="Public/base_new" /}
{block name="main"}
    <fieldset class="layui-elem-field">
        <legend>人事资料设定 - 员工导入</legend>
        <div class="layui-field-box">
            <div class="layui-form-item layui-form">
                <div class="layui-upload-drag" id="stafffile" style="width: 500px;">
                    <i class="layui-icon"></i>
                    <p>点击上传文件，或将文件拖拽到此处</p>
                </div>
                <div class="layui-upload-drag" style="position: relative;margin-left:60px;padding: 30px;border: 1px dashed #e2e2e2;background-color: #fff;text-align: center;;cursor: pointer;color: #999;" onclick="location.href='{$file}';">
                    <i class="layui-icon layui-icon-download-circle" ></i>
                    <p>点击此处下载模板</p>
                </div>
               <!--  <button type="button" class="layui-btn" >
                    <i class="layui-icon">&#xe67c;</i>上传文件
                </button> -->

                <!-- <div class="layui-inline" style="margin-left: 20px;">
                    <a href="{$file}">模板下载</a>
                </div> -->
            </div>
            <div class="cus-table">
                <table id="demo" lay-filter="demo" lay-data="{id: 'idTest'}"></table>
                <div id="pager"></div>
            </div>
        </div>
    </fieldset>
{/block}
{block name="myScript"}
<script type="text/html" id="barDemo">
    {{# if (d.all_number > d.import_number) { }}
    <span style="margin-top: -4px;" lay-event="do_import" data-id="{{d.id}}" class="layui-btn edit layui-btn-normal">重试</span>
    {{# } }}
    <span style="margin-top: -4px;" lay-event="detail_import" data-id="{{d.id}}" class="layui-btn layui-btn-danger del">详情</span>
    <span style="margin-top: -4px;" lay-event="del_import" data-id="{{d.id}}" class="layui-btn layui-btn-danger del">删除</span>
</script>
<script>
var brandclass,table,element,doprocess=0;
layui.use('upload', function(){
    var upload = layui.upload;
    //执行实例
    var uploadInst = upload.render({
        elem: '#stafffile' //绑定元素
        ,accept:'file'
        ,exts:'xls|xlsx'
        ,url: '{:url("uploadExcel")}' //上传接口
        ,done: function(res){
            //上传完毕回调
            table.reload('importList');
            if(res.code == 200){
                doImport(res.data.id);
            }
        }
        ,error: function(){
            //请求异常回调
            alert('上传出错，请重试。');
            table.reload('importList');
        }
    });
});

layui.use(['layer', 'table','form','element'], function () {
    table = layui.table, layer = layui.layer, form = layui.form,element = layui.element;
    //第一个实例
    var tableIns=table.render({
        elem: '#demo'
        , url: '{:url("importStaff")}' //数据接口
        ,id: 'importList'
        //,even: true
        ,where: {brandclass:brandclass}
        , page: true //开启分页
        , cols: [[ //表头
            {field:'id', title: 'ID', sort: true,templet: '#sexTpl',width:'5%'}
            ,{field:'file_name', title: '文件名', align: 'center',width:'24%'}
            ,{field:'addtime', title: '上传日期', align: 'center',width:'15%'}
            ,{field:'all_number', title: '总数', align: 'center',width:'7%'}
            ,{field:'import_number', title: '已导', align: 'center',width:'7%'}
            ,{field:'fail_number', title: '失败', align: 'center',width:'7%'}
            ,{field:'staff_name', title: '上传人', align: 'center',width:'15%'}
            ,{title: '操作', align: 'center',width:'25%', toolbar: '#barDemo'}
        ]],
        done: function(res, curr, count){
            $(".mark-red").parents("tr").css({
                "color":"#fff",
                "background":"red"
            });
        }
    });
    //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    table.on('tool(demo)', function (obj) { 
        var data = obj.data //获得当前行数据
        , layEvent = obj.event; //获得 lay-event 对应的值
        var id   = $(this).attr("data-id");
        if(layEvent=='detail_import'){
            layer.open({
                type: 2,
                offset: 't',
                area: ['100%', '95%'],
                maxmin: true,
                title:'导入详细信息，点击可直接编辑，失去焦点自动保存。',
                content: 'detailImport?id='+id
            });
        }
        if(layEvent=='do_import'){
            // showPercent(0,0);
            doImport(id);
            // setTimeout('getPercent('+id+')',1000);
        }
        if(layEvent=='del_import'){
            layer.confirm('你确定删除本次导出记录吗？', {
                btn: ['确定','取消'] //按钮
                }, function(index){
                $.ajax({
                    type: "POST",
                    url: 'deleteImport',
                    data: {id:id},
                    success: function(msg){
                        if( msg.code == 200 ){
                            table.reload('importList');
                            layer.close(index);
                        }else{
                            layer.msg(msg.msg, {
                                icon: 5,
                                shade: [0.6, '#393D49'],
                                time:1500
                            });
                        }
                    }
                });

            });
        }
    });
});
    function doImport(id){
        doprocess=1;
        getPercent(id);
        $.ajax({
            type: "POST",
            url: 'doImport',
            data: {id:id},
            success: function(msg){
                doprocess=0;
                if( msg.code == 200 ){
                    table.reload('importList');
                    showPercent(msg.data.total,msg.data.total);
                    layer.close(pencentDiv);
                    pencentDiv='';
                }else{
                    // layer.close(index);
                    layer.close(pencentDiv);
                    pencentDiv='';
                    layer.msg(msg.msg, {
                        icon: 5,
                        shade: [0.6, '#393D49'],
                        time:1500
                    });
                }
            },
            error:function(msg){
                doprocess=0;
                alert('导入出错，请重试');
                layer.close(pencentDiv);
                pencentDiv='';
            }
        });
    }
    function getPercent(id){
        $.ajax({
            type: "POST",
            url: 'getImportPercent',
            data:{id:id},
            success: function(msg){
                if(doprocess == 1){
                    if( msg.now == 0 || msg.now <= msg.total ){
                        showPercent(msg.total,msg.now)
                        if(msg.now < msg.total){
                            setTimeout('getPercent('+id+')',1000);
                        }
                    }
                }
            }
        });
    }
    var pencentDiv = '';
    function showPercent(total,now){
        if(pencentDiv != ''){
            var pencent = total == 0?0:((now / total) * 100); 
            pencent = parseInt(pencent);
            element.progress('process', pencent+'%');
        }else{
            var div = '<div class="layui-progress" lay-filter="process" lay-showPercent="true"><div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div></div>';
        pencentDiv = layer.open({
            title: false
            ,closeBtn: 0
            ,content: div
            ,btn:[]
        }); 
        element.render('process');
        }
    }
</script>
{/block}