<extend name="Public/manage" />
<block name="head">
    <script type="text/javascript" src="__STATIC__/webuploader/webuploader.js"></script>
    <link rel="stylesheet" type="text/css" href="__STATIC__/webuploader/webuploader.css" media="all">
    <script src="__STATIC__/md5.js" type="text/javascript" charset="utf-8"></script>
</block>
<block name="body" >
    
        <div class="matter_right_content">

            <form id="addServer" action="" method="post" class="form-horizontal" enctype="multipart/form-data" novalidate="novalidate">
                <div class="title create_title create_server_title">
                    <h3>游戏素材 </h3>
                </div>
                <div class="form-group clearfix">
                    <label class="mrc_left mrc control-label"><span class="must_red">*</span> 游戏名称</label>
                    <div class="mrc_right4_3_3 mrc input-format matter_border">
                        <input type="text" class="form-control" placeholder="不超过10个字" value="{$data.game_name}" readonly disabled>
                    </div>
                    <div class="clearfix"></div>
                    <div class="mrc_colum_ml mrc_colum4_1_6 mrc input-status"></div>
                </div>
                <div class="form-group clearfix">
                    <label class="mrc_left mrc control-label"><font color="red">*</font> 上传素材包</label>
                    <div class="mrc_colum2_5 mrc input-format">
                        <div id="picker" style="line-height:35px;">上传素材包</div>
                        <!--用来存放文件信息-->
                        <div id="thelist" class="uploader-list">
                        </div>
                        <input type="hidden" id="file_url"  name="file_url"  value="{$data.material_url}"/>
                        <input type="hidden" id="file_name"  value=""/>
                    </div>
                    <div class="mrc_right4_3_3 mrc">
                        <label class="col-lg-11 control-label matter_notice" style="font-weight: normal;">请上传zip格式或rar格式文件</label>
                    </div>
                    <div class="clearfix"></div>
                    <div class="mrc_colum_ml mrc_colum4_1_6 mrc input-status"></div>
                </div>

                <div class="form-group clearfix">
                    <label class="mrc_left mrc control-label"></label>
                    <div class="mrc_colum4_1_6 mrc">
                        <input type="submit" class="btn btn_primary user_btn" id="editServer" value="提交审核">&nbsp;&nbsp;&nbsp;<a href="javascript:history.go(-1);" class="btn btn_default user_btn_default">取消</a>
                    </div>
                </div>
            </form>

        </div>
    
    <script>
						function delFile(){
                layer.confirm('您确定要删除素材包吗?', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                   location.reload();
                }, function(){

                });
            }
					
            $(function() {
                $.validator.addMethod("checkFileType", function(value, element,params){
                    var type = value;
                    var flag = false;
                    for (var i=0;i<params.length;i++) {
                        if (type.indexOf(params[i])>-1) {
                            flag = true;break;
                        }
                    }
                    return flag;
                }, "上传文件类型错误");
                
                
                
                $("#addServer").validate({
                    ignore:"",
                    rules:{
                        game_name: {
                            required: true,
                        },
                        
                        file_url: {
                            required: true,
                            checkFileType: ['zip','rar'],
                        }
                    },
                    messages:{
                        game_name: {
                            required: "请选择游戏",
                        },
                        file_url: {
                            required: "请上传游戏素材包",
                            checkFileType: "上传文件类型必须是.zip 或 .rar",
                        }
                    },
                    submitHandler: function (form) {
                        $(form).ajaxSubmit({
                            success:function(result){
                                if(result.status == 1){
                                    layer.msg(result.info,{time:1500},function(){
                                        location.href = "{:U('Game/index')}";
                                    });
                                }else{
                                    layer.msg(result.info);
                                }
                            },error:function(a,b,c){layer.msg("服务器异常");}
                        });
                    }
                });


                var userInfo = {userId:"kazaff", md5:""};   //用户会话信息
                var chunkSize = 5000 * 1024;        //分块大小
                var uniqueFileName = null;          //文件唯一标识符
                var md5Mark = null;
                var backEndUrl = "{:U('File/shard_upload',array('type'=>1,'session_id'=>session_id()))}";
                WebUploader.Uploader.register({
                    "before-send-file" : "beforeSendFile",
                    "before-send"      : "beforeSend",
                    "after-send-file"  : "afterSendFile"
                }, {
                    beforeSendFile: function(file){
                        //秒传验证
                        var task = new $.Deferred();
                        var start = new Date().getTime();
                        (new WebUploader.Uploader()).md5File(file, 0, 10*1024*1024).progress(function(percentage){
                            //console.log(percentage);
                        }).then(function(val){
                            //console.log("总耗时: "+((new Date().getTime()) - start)/1000);
                            md5Mark = val;
                            userInfo.md5 = val;
                            $.ajax({
                                type: "POST"
                                , url: backEndUrl
                                , data: {status: "md5Check", md5: val}
                                , cache: false
                                , timeout: 1000 //todo 超时的话,只能认为该文件不曾上传过
                                , dataType: "json"
                            }).then(function(data, textStatus, jqXHR){
                                alert(data.chunk);
                                //console.log(data);
                                if(data.ifExist){   //若存在,这返回失败给WebUploader,表明该文件不需要上传
                                    task.reject();
                                    uploader.skipFile(file);
                                    file.path = data.path;
                                }else{
                                    task.resolve();
                                    //拿到上传文件的唯一名称,用于断点续传
                                    uniqueFileName = md5(''+userInfo.userId+file.name+file.type+file.lastModifiedDate+file.size);
                                }
                            }, function(jqXHR, textStatus, errorThrown){    //任何形式的验证失败,都触发重新上传
                                task.resolve();
                                //拿到上传文件的唯一名称,用于断点续传
                                uniqueFileName = md5(''+userInfo.userId+file.name+file.type+file.lastModifiedDate+file.size);
                            });
                        });
                        return $.when(task);
                    }
                    , beforeSend: function(block){
                        //分片验证是否已传过,用于断点续传
                        var task = new $.Deferred();
                        $.ajax({
                            type: "POST"
                            , url: backEndUrl
                            , data: {
                                status: "chunkCheck"
                                , name: uniqueFileName
                                , chunkIndex: block.chunk
                                , size: block.end - block.start
                            }
                            , cache: false
                            , timeout: 1000 //todo 超时的话,只能认为该分片未上传过
                            , dataType: "json"
                        }).then(function(data, textStatus, jqXHR){
                            if(data.ifExist){   //若存在,返回失败给WebUploader,表明该分块不需要上传
                                task.reject();
                            }else{
                                task.resolve();
                            }
                        }, function(jqXHR, textStatus, errorThrown){    //任何形式的验证失败,都触发重新上传
                            task.resolve();
                        });

                        return $.when(task);
                    }
                    , afterSendFile: function(file){
                        var chunksTotal = 0;
                        if((chunksTotal = Math.ceil(file.size/chunkSize)) > 1){
                            //合并请求
                            var task = new $.Deferred();
                            $.ajax({
                                type: "POST"
                                , url: backEndUrl
                                , data: {
                                    status: "chunksMerge"
                                    , name: uniqueFileName
                                    , chunks: chunksTotal
                                    , ext: file.ext
                                    , md5: md5Mark
                                }
                                , cache: false
                                , dataType: "json"
                            }).then(function(data, textStatus, jqXHR){
                                //todo 检查响应是否正常
                                task.resolve();
                                file.path = data.path;
                                $("#file_name").val(data.name);
                                $("#file_url").val(data.path);
                                $("#file_size").val(file.size);
                            }, function(jqXHR, textStatus, errorThrown){
                                task.reject();
                            });
                            return $.when(task);
                        }else{
                        }
                    }
                });
                var uploader = WebUploader.create({
                    // 选完文件后,是否自动上传。
                    auto: true,
                    // swf文件路径
                    swf: '__STATIC__/webuploader/Uploader.swf',
                    // 文件接收服务端。
                    server: backEndUrl,
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建,可能是input元素,也可能是flash.
                    pick: {id:'#picker'},
                    //dnd: "#theList",
                    paste: document.body,
                    // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
                    resize: false,
                    disableGlobalDnd: true,
                    fileNumLimit:1,
                    threads:3,
                    compress: false,
                    prepareNextFile: true,
                    formData: function(){return $.extend(true, {}, userInfo);},
                    accept:{
                        title: 'zip',
                        extensions: 'zip,rar',
                        mimeTypes: '.zip,.rar'
                    },
                    duplicate:true,
                    chunked:true,
                    chunkSize: 5*1000*1024,
                    duplicate: true
                });
								uploader.on('beforeFileQueued', function(file) {
									if($('#thelist').find('.item.jsupitem').length>0) {
									layer.msg('素材包已存在,请删除后重新上传');
									}
								});
// 当有文件被添加进队列的时候
                uploader.on( 'fileQueued', function( file ) {
                    $("#thelist").append( '<div id="' + file.id + '" class="item jsupitem">' +
                        '<h4 class="info">' + file.name + '</h4>' +
                        '<p class="state">等待上传...</p>' +
                        '</div>' );
                });

// 文件上传过程中创建进度条实时显示。
                uploader.on( 'uploadProgress', function( file, percentage ) {
                    var $li = $( '#'+file.id ),
                        $percent = $li.find('.progress .progress-bar');
                    // 避免重复创建
                    if ( !$percent.length ) {
                        $percent = $('<div class="progress progress-striped active">' +
                            '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                            '</div>' +
                            '</div>').appendTo( $li ).find('.progress-bar');
                    }
                    $li.find('p.state').text('上传中');
                    $percent.css( 'width', percentage * 100 + '%' );
                    $percent.text( (percentage * 100).toFixed(0) + '%' );
                });

                uploader.on( 'uploadSuccess', function( file , response) {                   
										var $li = $( '#'+file.id ),
                        $percent = $li.find('.progress .progress-bar');
												$li.siblings().remove();
                    var url=window.location.host+response.path+"/"+response.name;
                    $li.find('h4.info').html("<table><tr><td><a class='showfile' href='http://"+url+"'>"+response.name+"</a></td>"+"<td><a href='javascript:;' onclick='delFile("+file.id+");'><img src='__IMG__/remove.gif'></a></td></tr></table>");
                    $li.find('p.state').text('');
                    if(!response.chunk){
                        $("#file_url").val(response.path);
												$("#file_name").val(response.name);
                    }
                });

                uploader.on( 'uploadError', function( file ) {
                    $( '#'+file.id ).find('p.state').text('上传出错');
                });

                uploader.on( 'uploadComplete', function(file) {
                    $( '#'+file.id ).find('.progress').fadeOut();
										var file_name = $.trim($('#file_name').val());
										var file_url = $.trim($('#file_url').val());
										if(file_name && file_url) {
										$('#file_url').val(file_url+'/'+file_name);
										var url=window.location.host+file_url.replace('./','/')+'/'+file_name;
										$( '#'+file.id ).find('.showfile').attr('href',url).text(file.name);
										}
										$('#file_url').valid();
                });



                
            });
            $.VMenu.show('#menu');
            $.VMenu.open('m2.1');
        </script>
</block>