{extend name="Public/base" /}
{block name="js"}
<script>

    var staff_name = "{$Think.session.staff_name}";
    var colModel = "{$colModel}";
    var colNames = "{$colNames}";
</script>

{/block}
{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/css/set.css?v={$Think.const.APP_VERSION}">

{/block}
{block name="style"}

{/block}

{block name="main"}
<div class="if_wrap">
    <div class="cus-con" style="min-width: auto; overflow: hidden;">

        <div class="set_tit"><span>资产导入管理</span></div>

            <div class="cus-top" id="cus-top" style="margin-top: 10px;">

                <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>

                </div>


                <div class="cus-top-left layui-form layui-form-pane1">

                    <label class="layui-form-label" style="width: 90px!important;">文件名称：</label>
                    <div class="layui-input-block" style="width: 150px">
                        <input type="text" class="layui-input"  name="brandclass" id="brandclass" placeholder="请输入文件名称">
                    </div>


                    <div class="layui-input-block cus-search" style="z-index: 1;">
                        <input type="hidden" name="type_info" id="type_info">
                        <button lay-submit lay-filter="search" id="search" data-type="reload"  value="查询" class="search-span" style="border-radius: 5px;">查询</button>
                    </div>
                    <div class="layui-input-block cus-search" style="z-index: 1;">
                        <button lay-filter="reset" id="reset"  value="重置" class="search-span" style="border-radius: 5px;">重置</button>
                    </div>
                </div>

            </div>
            <div class="cus-filter">
            </div>

            <div class="cus-model">
                <a href="{:url('oa/Assets/assetsList')}" class="layui-btn layui-btn-primary cus-model-btn">
                     返回资产列表
                </a>
            </div>

            <div class="cus-table">

                <table id="demo" lay-filter="demo" lay-data="{id: 'idTest'}"></table>

                <div id="pager"></div>
            </div>
        </div>
</div>
<!--<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>-->
<script src="__PUBLIC__/js/jquery-ui.js"></script>
<script src="__PUBLIC__/js/jquery.contextmenu.js"></script>

<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> -->
    <i class="layui-icon box_btn" title="重试" lay-event="del_import" data-id="{{d.id}}">&#xe669;</i>
    {{# } }}
    <!-- <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> -->
    <i class="layui-icon box_btn" title="详情" lay-event="detail_import" data-id="{{d.id}}">&#xe615;</i>
    <i class="layui-icon box_btn" title="删除" lay-event="del_import" data-id="{{d.id}}">&#xe640;</i>
</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("importAssets")}' //数据接口
            ,id: 'importList'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            //,even: true
            ,where: {brandclass:brandclass}
            , page: true //开启分页
            , cols: [[ //表头
                {field:'id', title: 'ID', sort: true,templet: '#sexTpl',width:80}
                ,{field:'file_name', title: '文件名', align: 'center'}
                ,{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:150, 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: 'auto',
                    area: ['80%', '85%'],
                    //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},
            dataType : "json",
            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;
                console.log(msg);
                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}