<extend name="Public/base"/>
<block name="body">
<script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <script type="text/javascript" src="__STATIC__/webuploader/webuploader.js"></script>
    
    <link rel="stylesheet" type="text/css" href="__CSS__/admin_table.css" media="all">
<link rel="stylesheet" type="text/css" href="__STATIC__/webuploader/webuploader.css" media="all">
    <div class="cf main-place top_nav_list navtab_list">
        <h3 class="page_title">{$meta_title}</h3>
        <p class="description_text"></p>
    </div>
    
    
    <div class="tab-content tabcon1711 tabcon17112"> 
    
    <IF condition="$type == edit">
       <form action="{:U('edit',['menu_name' => $menu_name])}" method="post" class="form-horizontal form_info_ml">
    <else />
       <form action="{:U('add',['menu_name' => $menu_name])}" method="post" class="form-horizontal form_info_ml">
    </IF>
    
        <table border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
                <td class="l noticeinfo">菜单名称</td>
                <td class="r table_radio">
                    <input type="text" class="" name="name" value="{$data.name|default=''}" >
                </td>
            </tr>
            <tr>
                <td class="l noticeinfo">菜单标题</td>
                <td class="r table_radio">
                    <input type="text" class="" name="title" value="{$data.title|default=''}" >
                </td>
            </tr>
            <tr>
                <td class="l noticeinfo">平台</td>
                <td class="r table_radio">
                    <span class="form_select">
                        <select name="menu_version">
                            <foreach name="menu_version" item="vo" key="k">
                                <if condition="$data['menu_version'] == $k">
                                    <option value="{$k}" selected="selected">{$vo}</option>
                                <else />
                                    <option value="{$k}">{$vo}</option>
                                </if>
                            </foreach>

                        </select>
                    </span>
                </td>
            </tr>
            <tr>
                <td class="l noticeinfo">菜单链接</td>
                <td class="r table_radio">
                    <input type="text" class="" name="url" value="{$data.url|default=''}" >
                </td>
            </tr>
            <tr>
                <td class="l noticeinfo">url类型</td>
                <td class="r table_radio">
                    <span class="form_select">
                        <select name="type">
                            <foreach name="but_type" item="vo" key="k">
                                <if condition="$data['type'] == $k">
                                    <option value="{$k}" selected="selected">{$vo}</option>
                                <else />
                                    <option value="{$k}">{$vo}</option>
                                </if>
                            </foreach>

                        </select>
                    </span>
                </td>
            </tr>
            <tr>
                <td class="l noticeinfo">跳转目标</td>
                <td class="r table_radio">
                    <input type="text" class="" name="act" value="{$data.act|default=''}" placeholder='url类型为原生时填写'>
                </td>
            </tr>
            <tr>
                <td class="l noticeinfo">IOS链接</td>
                <td class="r table_radio">
                    <input type="text" class="" name="ios_url" value="{$data.ios_url|default=''}">
                </td>
            </tr>
             <tr>
                <td class="l noticeinfo">排序</td>
                <td class="r table_radio">
                    <input type="text" class="" name="sort" value="{$data.sort|default=''}">
                </td>
            </tr>
            <tr>
                <td class="l noticeinfo">游戏隐藏</td>
                <td class="r table_radio">
                    <input type="text" class="" name="game_status" value="{$data.game_status|default=''}">
                 <span class="notice-text" style="left:215px;">针对游戏id隐藏,多个用,隔开</span>
                </td>
            </tr>
            <tr>
                <td class="l noticeinfo">状态</td>
                <td class="r table_radio">
                    <span class="form_select">
                        <select name="status">
                            <if condition="$data['status'] == 1 || !isset($data['status'])">
                                <option value="1" selected="selected">显示</option>
                                <option value="0">隐藏</option>
                            <else />
                                <option value="0" selected="selected">隐藏</option>
                                <option value="1">显示</option>
                            </if>

                        </select>
                    </span>
                </td>
            </tr>
            <tr class="picbox">
                <td class="l noticeinfo">菜单图标</td>
                <td class="r table_radio">
                    <span class="form_icon table_btn table_upload">
<!--                            <input type="hidden" name="icon" id="cover_id_icon" value=""/>
                            <div id="uploader-demo" >
                                <div id="icon">
                                    <div class="webuploader-pick" style="line-height: 13px">上传图片</div></div>
                                 <div id="iconList" class="uploader-list" style="display: flex;"></div>
                            </div>-->
<!--                        <div class="upload-img-box">
                        <notempty name="data['icon']">
                            <div class="upload-pre-item">
                                <span class="placeholder-graphic placeholder-graphic_icon"><img src="{$data['icon']}"/></span>
                            </div>
                        </notempty>
                        </div>-->
                                           <input type="hidden" name="id" value="{$data['id']}" />
                                               <input type="hidden" name="icon" value="{$data['cover']}" />
                                               <div id="uploadImg" class="wu-example">
                                                   <div class="btns">
                                                       <div id="icon">
                                                           <div class="webuploader-pick" style="line-height: 14px">上传图片</div>
                                                       </div>
                                                   </div>
                                                   <!--用来存放文件信息-->
                                                   <div id="icon_thelist" class="uploader-list" style="display: flex;">

                                                   </div>
                                               </div>
                    </span>
                    <span class="notice-text" style="left:215px;">菜单图标</span>
                </td>
            </tr>
          </tbody>
        </table>
        <input type="hidden" name="id" value="{:I('id')}">
  
  
    
        <script type="text/javascript">
        //上传图片
        /* 初始化上传插件 */
       //上传游戏图标
/* 初始化上传插件 */
//$("#upload_picture_icon").uploadify({
//    "height"          : 30,
//    "swf"             : "__STATIC__/uploadify/uploadify.swf",
//    "fileObjName"     : "download",
//    "buttonText"      : "上传图标",
//    "uploader"        : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
//    "width"           : 120,
//    'removeTimeout'   : 1,
//    'fileTypeExts'    : '*.jpg; *.jpeg; *.png; *.gif;',
//    "onUploadSuccess" : upload_picture_icon{$field.name},
//    'onFallback' : function() {
//        alert('未检测到兼容版本的Flash.');
//    }
//});
//function upload_picture_icon{$field.name}(file, data){
//    var data = $.parseJSON(data);
//    var src = '';
//    if(data.status){
//        src = data.path || data.url;
//        $("#cover_id_icon").val(src);
//        $("#cover_id_icon").parent().find('.upload-img-box').html(
//            '<div class="upload-pre-item"><span class="placeholder-graphic placeholder-graphic_icon"><img src="' + src + '"/></span></div>'
//        );
//    } else {
//        updateAlert(data.info);
//        setTimeout(function(){
//            $('#top-alert').find('button').click();
//            $(that).removeClass('disabled').prop('disabled',false);
//        },1500);
//    }
//}
        </script>  
    </form>
    <div class="form-item cf">
      <button class="submit_btn ajax-post mlspacing" id="submit" type="submit" target-form="form-horizontal">
          保存
      </button>
      <a class="submit_btn " alt="返回上一页" title="返回上一页" href="javascript:window.history.back();" >
          返回
      </a>
    </div>
  
  </div>
    
</block>
<block name="script">
<script type="text/javascript" charset="utf-8">
    //导航高亮
    highlight_subnav('{:U('SdkMenu/lists')}');
</script>
<script> 
        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){
                //秒传验证
                if (file['source']['ext'] === 'zip' || file['source']['ext'] === 'rar') {
                    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){
                //分片验证是否已传过,用于断点续传
                if (block['file']['source']['ext'] === 'zip' || block['file']['source']['ext'] === 'rar') {
                    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){
                if (file['source']['ext'] === 'zip' || file['source']['ext'] === 'rar') {
                    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+'/'+data.name);
                            $("#file_size").val(file.size);
                        }, function(jqXHR, textStatus, errorThrown){
                            task.reject();
                        });
                        return $.when(task);
                    }else{
                        //UploadComlate(file);
                    }
                }
            }
        });
        var uploaderImgIcon = WebUploader.create({
            // 选完文件后,是否自动上传。
            auto: true,
            // swf文件路径
            swf: '__STATIC__/webuploader/Uploader.swf',
            // 文件接收服务端。
            server: "{:U('File/uploadPicture',array('session_id'=>session_id(),'flag'=>true))}",
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建,可能是input元素,也可能是flash.
            pick: {
                id:'#icon',
                multiple:true
            },
            // dnd: false,
            paste: document.body,
            accept: {
                title: '图片',
                extensions: 'png,gif,jpg,jpeg,bmp',
                mimeTypes: '.png,.gif,.jpg,.jpeg,.bmp',
            },
            // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
            resize: false,
            disableGlobalDnd: true,
            fileNumLimit:1,
            threads:5,
            thumb:true,
            compress:false,
            prepareNextFile: true,
            formData: function(){return $.extend(true, {}, userInfo);},
            chunked:false,
            duplicate: true
        });      
                
        var imgListIconData = [];
        <?php if (!empty($img)) :?>
        var html = '';
        $('#icon_thelist').css('margin-top','10px');
        <?php foreach ($img as $value3) { ?>
        <?php $value3 = (int)$value3; ?>
            imgListIconData.push(<?=$value3?>);
            
            html += '<div id="' + <?=$value3?> + '" class="item flooring_page_img_box" style="margin-right: 10px;">';
            html += '<a href="javascript:;"><img src="<?=get_cover($value3,"path")?>" style="width: 100px;height: 100px;cursor: move;"></a>';
            html += '<h4 class="info" style="text-align: center;">';
            html += '<a href="javascript:;" class="jsdelzip table_click" style="float:none;display:inline-block;" img-id="' + <?=$value3?> + '">删除</a>';
            html += '</h4>';
            html += '<div class="progress progress-striped active" style="display: none;">';
            html += '<div class="progress-bar" role="progressbar" style="width: 100%;">100%</div>';
            html += '</div>';
            html += '</div>';
        <?php }?>
        $('#icon_thelist').html(html);
         
        $('#icon_thelist').children().children('h4').children('.jsdelzip').on('click', function() {
            var thisId = $(this).attr('img-id');
            $(this).parent().parent().remove();

            $.each(imgListIconData,function(index, item) {
                if (thisId == item) {
                    imgListIconData.splice(index,1);
                    return false;
                }
            });

            setIconVal();
        });
        <?php endif ;?>          
         var thisIndex2 = 0;
        var imgIconList = $("#icon_thelist");
        uploaderImgIcon.on( 'fileQueued', function( file ) {
            var html = '';
            html += '<div id="' + file.id + '" class="item" style="margin-right: 10px;">';
            html += '<a href="javascript:;"><img src="" style="width: 100px;height: 100px;cursor: move;"></a>';
            html += '<h4 class="info">' + file.name + '</h4>';
            html += '<p class="state">等待上传...</p>';
            html += '</div>';

            imgIconList.append(html);
            imgIconList.css('margin-top','10px');

            var img2 = imgIconList.children('#'+file.id).find('img');
            uploaderImgIcon.makeThumb(file, function (error, src) {
                if (error) {
                    return;
                }
                img2.attr('src', src);
            }, 300, 300);
        });

        // 文件上传过程中创建进度条实时显示。
        uploaderImgIcon.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) + '%' );
        });

        uploaderImgIcon.on( 'uploadSuccess', function( file , response) {
            imgListIconData.push(Number(response.id));
            console.log(response)
            setIconVal();

            $( '#'+file.id ).find('p.state').text('已上传').fadeOut(800);
            //alert(JSON.stringify(response));
            $('#'+file.id).find('h4.info').append('<a href="javascript:;" class="jsdelzip table_click" style="float:none;display:inline-block;margin-left:10px;">删除</a>');
            $('#'+file.id).find('.jsdelzip').on('click',function() {
                uploaderImgIcon.removeFile( file.id );
                $('#'+file.id).remove();

                $.each(imgListIconData,function(index, item) {
                    if (response.id == item) {
                        imgListIconData.splice(index,1);
                        return false;
                    }
                });
                setIconVal();

                return false;
            });
        });
        
         function setIconVal()
        {
            var icon = '';
            $.each(imgListIconData,function(index, item) {
                icon += item + ',';
            });
            icon = icon.substring(0, icon.length - 1);
            $('input[name=icon]').val(icon);
            console.log(icon)
        }
    
    </script>
</block>