{block name="js"}
<script src="__PUBLIC__/js/plupload.full.min.js?v={$Think.const.APP_VERSION}"></script>

{/block}
<div id="cus-import" style="padding:0 20px;">
    <div class="layui-tab layui-tab-brief custom-tab" lay-filter="docDemoTabBrief">

        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="import-tit">
                    请按照模板填写您要导入的资料，点击 
                    <a href="{:url('excel_mould_download')}" class="blue-font">下载模板</a>。
                </div>

                <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">可上传文件最大为2m</p></div><br><br>
                <div class="layui-progress layui-progress-big im-progress" lay-showPercent="yes" lay-filter="im-progress">
                    <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
                </div>
            </div>

        </div>
    </div>
</div>
<script>

    var file_path = '';
    //实例化一个plupload上传对象
    var uploader = new plupload.Uploader({
        browse_button : 'uplod-btn', //触发文件选择对话框的按钮，为那个元素id
        //url : 'uploadFile.html?uid={$uid}&parent_folder={:urlencode($parentFolder)}', //服务器端的上传页面地址
        url:'/papi/clocklog/upload_excel',
        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:'2m',
            prevent_duplicates : true //不允许选取重复文件
        }
    });

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

    //绑定各种事件，并在事件监听函数中做你想做的事
    uploader.bind('FilesAdded',function(uploader,files){
        //每个事件监听函数都会传入一些很有用的参数，
        //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
        for(var i = 0, len = files.length; i<len; i++){
            var file_name = files[i].name; //文件名
            //构造html来更新UI
            var html =file_name;
            $('.im-choose-span').html(html);
        }
    });
    uploader.bind('UploadProgress',function(uploader,file){
        //每个事件监听函数都会传入一些很有用的参数，
        //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
        layui.use('element', function(){
            var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
            element.progress('im-progress',file.percent + '%');
        });
    });

    //当队列中的某一个文件上传完成后触发监听函数参数
    uploader.bind('FileUploaded',function(uploader,file,responseObject){
        var Object=JSON.parse(responseObject.response);
        // console.log(Object);
        file_path = Object.data
        res = Object
            
        if(res.code != 200 ) layer.alert("上传失败："+res.msg);
    });

    uploader.bind('UploadComplete',function(uploader,file){
        //每个事件监听函数都会传入一些很有用的参数，
        //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
        layui.use('element', function() {
            var $ = layui.jquery, layer = layui.layer;
            layer.alert("文件上传成功，请查看导入记录");
        });
    });

    //最后给"开始上传"按钮注册事件
    $("#start_upload").on('click',function(){
        uploader.start();
    });

    function get_select(func){
        func(res);
        layer.closeAll();
    }


</script>