{extend name="Public/base" /}
{block name="js"}
<script src="__PUBLIC__/js/plupload.full.min.js?v={$Think.const.APP_VERSION}"></script>
{/block}
{block name="css"}
{/block}
{block name="main"}
<div class="cus-con if_wrap">
<div id="cus-import" style="padding:0 20px;">
    <div class="layui-tab layui-tab-brief custom-tab" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">导入客资</li>
            <li class="record-btn new_list">导入记录</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="import-tit">请按照模板填写您要导入的客户资料，点击 <a href="{:url('excel_download')}" class="blue-font">下载模板</a>。<br />表头背景色为红色的是必填项。<br />其中：（宝宝生日、预产期、填写日期）三项任填一项；<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（妈妈手机号、微信）两项任填一项即可；</div>
                {if condition="!empty($check_shop)"}
                <form class="layui-form layui-form-pane1 cus-forms" id="form1" >
                    <div class="layui-inline">
                        <label class="layui-form-label"><i class="input-sign"><img src="__PUBLIC__/img/cus-idnum.png" alt=""></i>归属店面：</label>
                        <div class="layui-input-block">
                            <select name="shop_code" id="import_shop_code" class="cus-input" lay-filter="import_shop_code" lay-search="">
                                <option value="">请选择</option>
                                {volist id="ch" name="$check_shop"}
                                <option value="{$ch.shop_code}" {if $ch.select eq 1}selected{/if}>{$ch.shop_name}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                </form>
                {/if}
                <div class="import-upload">
                    <!--<div class="im-choose-btn layui-btn layui-btn-primary">选择文件</div>-->
                    <button type="button" class="layui-btn layui-btn-primary im-choose-btn" id="uplod-btn">选择文件</button>
                    <span class="im-choose-span">未新选择任何上传文件</span>
                    <button type="button" class="layui-btn" id="start_upload">开始上传</button>
                </div>
                <div class="import-tit"><p style="color: #ff6969">可上传文件最大为{$size}</p></div><br><br>
                <div class="layui-progress layui-progress-big im-progress" lay-showPercent="yes" lay-filter="im-progress" id='persent'>
                    <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
                </div>
            </div>
            <div class="layui-tab-item">
                <table class="layui-table im-tb">
                    <colgroup>
                        <col width="150">
                        <col width="150">
                        <col width="200">
                        <col width="90">
                        <col width="90">
                        <col width="90">
                        <col width="90">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>文件名称</th>
                        <th>归属店</th>
                        <th>时间</th>
                        <th>状态</th>
                        <th>总数据量</th>
                        <th>成功数据</th>
                        <th>失败数据</th>
                        <th>下载</th>
                    </tr>
                    </thead>
                    <tbody id="new_table">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    //实例化一个plupload上传对象
    var uploader = new plupload.Uploader({
        browse_button : 'uplod-btn', //触发文件选择对话框的按钮，为那个元素id
        //url : 'uploadFile.html?uid={$uid}&parent_folder={:urlencode($parentFolder)}', //服务器端的上传页面地址
        url:'/crm/Customer/uploadExcel',
        flash_swf_url : '__PUBLIC__/js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
        silverlight_xap_url : '__PUBLIC__/js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
        multi_selection:false,
        filters: {
            mime_types : [ //只允许上传excel文件
                { title : "Excel files", extensions : "xlsx" }
            ],
            max_file_size:'{$size}',
            prevent_duplicates : false //不允许选取重复文件
        }
    });

    //在实例对象上调用init()方法进行初始化
    uploader.init();

    // 绑定各种事件，添加文件 事件
    uploader.bind('FilesAdded',function(uploader,files){
        for(var i = 0, len = files.length; i<len; i++){
            //alert(JSON.stringify(files[i]));
            var file_name = files[i].name; //文件名
            //构造html来更新UI
            var html =file_name;
            $('.im-choose-span').html(html);
            //$(html).appendTo('.im-choose-span');
        }
    });
    uploader.bind('Error',function(uploader,errObject){
        // console.log(errObject);
        var response = JSON.parse(errObject.response);
        var msg = response.msg;
        var error = response.error;
        layer.alert('错误消息：'+msg+'。错误原因：'+error);
    });
    // 上传中事件
    uploader.bind('UploadProgress',function(uploader,file){
        //$('.im-progress').html(file.percent + '%');//控制进度条
        layui.use('element', function(){
            var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
            // element.progress('im-progress',file.percent + '%');
            // var active = {
                // setPercent: function(){
                    //设置50%进度
                    // element.progress('im-progress',file.percent*0.3+'%');
                    // if (file.percent>=100) {
                    //     getPercent();
                    // };
                    // element.progress('im-progress',file.percent*0.3+'%');
                // }
            // };
        });
        //element.progress('im-progress', '100%');
    });
    // 上传完成事件
    uploader.bind('UploadComplete',function(uploader,file){
        //location.reload();
        // parent.location.reload();
        layui.use('element', function() {
            var $ = layui.jquery, layer = layui.layer;
            layer.alert("文件上传成功，导入中请稍后");
            // 文件上传完成之后
            getPercent();
        });
        $('.import-upload').show();
    });
    // 最后给"开始上传"按钮注册事件
    $("#start_upload").on('click',function(){
        if(document.getElementById('import_shop_code')){
            var shop_code = $('#import_shop_code').val();
            if(shop_code == '' || shop_code == 'undefined'|| shop_code == null || shop_code == undefined){
                var shop_name = '';
                layer.alert('请选择归属店');
                return false;
            }else{
                var shop_name = $('#import_shop_code option:selected').html() ? $('#import_shop_code option:selected').html() : '';
            }
        }else{
            var shop_code = '';
            var shop_name = '';
        }

        uploader.setOption("multipart_params",{"shop_code":shop_code,"shop_name":shop_name});
        uploader.start();
        $('.import-upload').hide();
    });
    var pencentDiv = '';
    // 获取数据处理进度
    function getPercent (eid) {
        if (!eid) {
            eid = 0;
        }
        $.ajax({
            type: "POST",
            dataType: 'json',
            data:{eid:eid},
            url:'/crm/Customer/getUploadFilePercent',
            success: function(res){
                // console.log(res);
                // alert(res);
                if (res.status==0) {
                    setTimeout('getPercent()',1000);
                }else if (res.status==1) {
                    var all = res.all_number;
                    var now = res.upload_num;
                    var percent = (now/all)*100;
                    if (percent<100) {
                        percent = percent.toFixed(2);
                    };
                    layui.element.progress('im-progress',percent+'%');
                    if(percent>=100){
                        layer.alert("文件导入成功，请查看导入记录。");
                    }else{
                        setTimeout('getPercent()',1000);
                    }
                }else if (res.status==2) {
                    layui.element.progress('im-progress','100%');
                    layer.alert("文件导入成功，请查看导入记录。");
                }else if (res.status==99) {
                    layui.element.progress('im-progress','0%');
                    layer.alert("文件导入失败，请联系管理员。");
                }
            }
        });
    }
    // 导入记录列表分页
    $('.new_list').click(function(){
        list(1,10);
    });
    function list(page,limit){
        $.ajax({
            type: "POST",
            url: 'new_list',
            data:{limit:limit,page:page},
            success: function(msg){
                if( msg.code == 1 ){
                    var data=msg.data;
                    var replace='';
                    for(var i= 0; i < data.length;i++){
                        if(data[i]['status']==0){
                            replace +='<tr class="im-fail">';
                        }else if(data[i]['status']==1){
                            replace +='<tr class="im-success">';
                        }else if(data[i]['status']==2){
                            replace +='<tr class="im-in">';
                        }else if(data[i]['status']==3){
                            replace +='<tr class="im-fail">';
                        }
                        var belong_shop_name = data[i]["belong_shop_name"] ? data[i]["belong_shop_name"] : '';
                        replace +='<td>'+data[i]["file_name"]+'</td><td>'+belong_shop_name+'</td><td>'+data[i]["addtime"]+'</td><td><div class="im-font">';
                        if(data[i]['status']==0){
                            replace +='排队中</div></td>';
                        }else if(data[i]['status']==1){
                            replace +='已导入</div></td>';
                        }else if(data[i]['status']==2){
                            replace +='导入中</div></td>';
                        }else if(data[i]['status']==3){
                            replace +='请修复</div></td>';
                        }

                        replace +='<td>'+data[i]["all_number"]+'</td><td>'+data[i]["import_number"]+'</td><td>'+data[i]["fail_number"]+'</td> ';
                        if(data[i]['status']==0){
                            replace +='<td><div class="down-btn-wrap"><button type="button" class="layui-btn layui-btn-primary im-file-btn before_file" data-id="'+data[i]['id']+'" >源文件</button><button type="button" class="layui-btn layui-btn-primary im-file-btn detail" data-id="'+data[i]['id']+'" >详情</button></div></td></tr>';
                        }else if(data[i]['status']==1&&data[i]["fail_number"]>0){
                            replace +='<td><div class="down-btn-wrap"><button type="button" class="layui-btn layui-btn-primary im-file-btn before_file" data-id="'+data[i]['id']+'" >源文件</button>  <button type="button" class="layui-btn layui-btn-primary im-file-btn del_file" data-id="'+data[i]['id']+'" data-url="delFile" data-info="你确定删除当前记录吗？">删除</button><button type="button" class="layui-btn layui-btn-primary im-file-btn detail" data-id="'+data[i]['id']+'" >详情</button></div> </td></tr>';
                            // replace +='<td><div class="down-btn-wrap"><button type="button" class="layui-btn layui-btn-primary im-file-btn before_file" data-id="'+data[i]['id']+'" >源文件</button> <button type="button" class="layui-btn layui-btn-primary im-file-btn fail_file" data-id="'+data[i]['id']+'">失败文件</button> <button type="button" class="layui-btn layui-btn-primary im-file-btn del_file" data-id="'+data[i]['id']+'" data-url="delFile" data-info="你确定删除当前记录吗？">删除</button><button type="button" class="layui-btn layui-btn-primary im-file-btn detail" data-id="'+data[i]['id']+'" >详情</button></div> </td></tr>';
                        }else if(data[i]['status']==1&&data[i]["fail_number"]<1){
                            replace +='<td><div class="down-btn-wrap"><button type="button" class="layui-btn layui-btn-primary im-file-btn before_file" data-id="'+data[i]['id']+'" >源文件</button><button type="button" class="layui-btn layui-btn-primary im-file-btn del_file" data-id="'+data[i]['id']+'" data-url="delFile" data-info="你确定删除当前记录吗？">删除</button><button type="button" class="layui-btn layui-btn-primary im-file-btn detail" data-id="'+data[i]['id']+'" >详情</button></div> </td></tr>';
                        }else if(data[i]['status']==2){
                            replace +='<td><div class="down-btn-wrap"><button type="button" class="layui-btn layui-btn-primary im-file-btn before_file" data-id="'+data[i]['id']+'" >源文件</button><button type="button" class="layui-btn layui-btn-primary im-file-btn detail" data-id="'+data[i]['id']+'" >详情</button></div></td></tr>';
                        }else if(data[i]['status']==3){
                            replace +='<td><div class="down-btn-wrap"><button type="button" class="layui-btn layui-btn-primary im-file-btn before_file" data-id="'+data[i]['id']+'" >源文件</button><button type="button" class="layui-btn layui-btn-primary im-file-btn repair" data-id="'+data[i]['id']+'">修复</button><button type="button" class="layui-btn layui-btn-primary im-file-btn detail" data-id="'+data[i]['id']+'" >详情</button> </div></td></tr>';
                        }
                        /*   replace +='<td><div class="down-btn-wrap"><button type="button" class="layui-btn layui-btn-primary im-file-btn before_file" data-id="'+data[i]['id']+'" >源文件</button> <button type="button" class="layui-btn layui-btn-primary im-file-btn fail_file" data-id="'+data[i]['id']+'">失败文件</button> <button type="button" class="layui-btn layui-btn-primary im-file-btn del_file" data-id="'+data[i]['id']+'" data-url="delFile" data-info="你确定删除当前记录吗？">删除</button></div> </td></tr>';*/

                    }
                    var jump = '';
                    if(msg['count']>10) {
                        if(msg['page']!=1){
                            jump = '<button class="jump layui-btn" page="' + msg['prev'] + '">上一页</button>&nbsp;&nbsp;&nbsp;&nbsp;';
                        }
                        if(msg['last']!=msg['next']) {
                            jump += '<button class="jump layui-btn" page="' + msg['next'] + '">下一页</button>';
                        }
                    }

                    $("#new_table").html(replace);
                    $("#new_table").append(jump);
                }else{
                    layer.msg(msg.msg, {
                        icon: 5,
                        shade: [0.6, '#393D49'],
                        time:1500
                    });
                }
            }
        });
    }

    $(".layui-tab-item").delegate(".jump","click",function(){
        list($(this).attr('page'),10);
    })
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
        var upload = layui.upload;
        var $ = layui.jquery, layer = layui.layer ,element = layui.element;
        //执行实例
        //下载源文件
        $(".im-tb").delegate(".before_file","click",function(){
            var id=$(this).attr("data-id");
            location.href="before_file?id="+id;
        });
        //下载失败文件
        $(".im-tb").delegate(".fail_file","click",function(){
            var id=$(this).attr("data-id");
            location.href="fail_file?id="+id;
        });

        //详情
        $(".im-tb").delegate(".detail","click",function(){
            var id=$(this).attr("data-id");
            location.href="/crm/Customer/importDetail/id/"+id;
        });

        //修复文件
        $(".im-tb").delegate(".repair","click",function(){
            var id=$(this).attr("data-id");
            //location.href="repair?id="+id;
            $.ajax({
                type: "POST",
                url: 'get_excel_fail',
                data: {id:id},
                success: function(msg){
                    if( msg.code == 1 ){
                        $.ajax({
                            type: "POST",
                            url: 'repair',
                            data: {id:id},
                            success: function(res){
                                if( res.code == 1 ){
                                    layer.alert(res.msg);

                                }else{
                                    layer.alert(res.msg);
                                    // layer.msg(msg.msg, {
                                    //     icon: 5,
                                    //     shade: [0.6, '#393D49'],
                                    //     time:1500
                                    // });
                                }
                            }
                        });
                    }else{
                        layer.alert(msg.msg);
                        // layer.msg(msg.msg, {
                        //     icon: 5,
                        //     shade: [0.6, '#393D49'],
                        //     time:1500
                        // });
                    }
                }
            });
        });

        // 点击导入记录里的删除
        $(".im-tb").delegate(".del_file","click",function(){
            var ownObj = $(this);
            var id=ownObj.attr('data-id');
            layer.confirm(ownObj.attr('data-info'), {
                btn: ['确定','取消'] //按钮
            }, function(index){
                $.ajax({
                    type: "POST",
                    url: ownObj.attr('data-url'),
                    data: {id:ownObj.attr('data-id')},
                    success: function(msg){
                        if( msg.code == 1 ){
                            layer.close(index);
                            list();
                        }else{
                            layer.msg(msg.msg, {
                                icon: 5,
                                shade: [0.6, '#393D49'],
                                time:1500
                            });
                        }
                    }
                });
            });
        })

        // 查看导入记录
        $(".record-btn").click(function(){
            $(".im-tb tbody tr .layui-progress").each(function(){
                var filter=$(this).attr("lay-filter");
                var proNum=$(this).find(".layui-progress-bar").attr("lay-percent");
                element.progress(filter, proNum);
            });
        });
    });
</script>
{/block}