<?php include_once(mvc::$cfg['PATH_TPL'].'public/headBase.php');?>
<style type="text/css">.lay-inline {display: inline;width: auto;}</style>
<script type="text/javascript" src="<?php echo mvc::$cfg['SELF_URL'];?>static/js/jquery.autocomplete.js?ver=1.0.0"></script>
<script type="text/javascript" src="<?php echo mvc::$cfg['SELF_URL'];?>static/ueditor/ueditor.config.js?ver=1.0.0"></script>
<script type="text/javascript" src="<?php echo mvc::$cfg['SELF_URL'];?>static/ueditor/ueditor.all.min.js?ver=1.0.0"></script>
<script type="text/javascript" src="<?php echo mvc::$cfg['SELF_URL'];?>static/zTree_v3-master/js/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="<?php echo mvc::$cfg['SELF_URL'];?>static/zTree_v3-master/js/jquery.ztree.excheck.min.js"></script>
<script type="text/javascript" src="<?php echo mvc::$cfg['SELF_URL'];?>static/zTree_v3-master/js/jquery.ztree.exedit.min.js"></script>
<script type="text/javascript" src="<?php echo mvc::$cfg['SELF_URL'];?>static/js/ueditorImgUpload.js?ver=1.0.0"></script>
<style>
    .modal-header{
        padding: 10px;
    }
    .close{
        float: right;
    }
</style>
<div class="modal-header">
    <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
    <h4 class="modal-title">图片管理</h4>
</div>
<div class="modal-body">
    <div class="wrapper">
        <div id="tabhead" class="tabhead">
            <span class="tab focus" data-content-id="upload" onclick="showList(this)">上传新图片</span>
            <span class="tab" data-content-id="online" onclick="showList(this)">从图片空间选择</var></span>
        </div>
        <div id="tabbody" class="tabbody">
            <!-- 上传图片 -->
            <div id="upload" class="panel focus">
                <div id="queueList" class="queueList">
                    <div class="statusBar element-invisible">
                        <div class="progress">
                            <span class="text">0%</span>
                            <span class="percentage"></span>
                        </div><div class="info"></div>
                        <div class="btns">
                            <div id="filePickerBtn"></div>
                            <div class="uploadBtn"><var id="lang_start_upload"></var></div>
                        </div>
                    </div>
                    <div id="dndArea" class="placeholder">
                        <div class="filePickerContainer">
                            <div id="filePickerReady"></div>
                        </div>
                    </div>
                    <ul class="filelist element-invisible">                      
                        <li id="filePickerBlock" class="filePickerBlock"></li>
                    </ul>
                </div>
            </div>

            <!-- 在线图片 -->
            <div id="online" class="panel">
                <div class="leftMenu">
                    <div><input type="text" class="layui-input lay-inline" id="searchCate"></div>
                    <ul id="treeMenu" class="ztree"></ul>
                </div>
                <div id="imageList">
                    <form id="pic-form">
                        <div class="imageList-nav">
                            <div class="imageList-nav-left">
                                <select class="layui-input lay-inline" onchange="ajaxChangePic();" name="orderBy">
                                    <option value="tdesc">按添加时间从晚到早</option>
                                    <option value="tasc">按添加时间从早到晚</option>
                                    <option value="sdesc">按图片大小从大到小</option>
                                    <option value="sasc">按图片大小从小到大</option>
                                    <option value="nasc">按图片名升</option>
                                    <option value="ndesc">按图片名降</option>
                                </select>
                            </div>
                            <input type="hidden" name="isPro" value="1">
                            <input type="text" class="layui-input lay-inline" name="picName" value="">
                            <button type="submit" class="layui-btn" onclick="dosearch();return false;">搜索</button>
                            <input type="hidden" name="id" value="">
                            <input type="hidden" name="pid" value="">
                            <input type="hidden" name="picType" value="">
                            <input type="hidden" name="cate" value="">
                            <div class="imageList-nav-right">
                                <span class="icon2 icon2_left disabled"></span><span <?php if ($nextPage == 2) { ?>onclick='changePage(2);'<?php }?> class="icon2 icon2_right<?php if($nextPage == 0) { echo ' disabled';}?>"></span>
                            </div>
                        </div>
                    </form>
                    <ul class="list">
                        <?php foreach($list as $v){?>
                        <li id="pic-<?php echo $v['spi_id'];?>" pic="<?php echo $v['spi_id'];?>" title="<?php echo $v['spi_oriname'];?>">
                            <img width="100" height="100" src="<?php echo mvc::$cfg['FILE_CENTER']['b2c']['url_get'].'&c='.$v['spi_cate'].'&f='.$v['spi_path'].'100/'.$v['spi_name'].'.'.$v['spi_ext'].mvc::$cfg['FILE_CENTER']['b2c']['get_uri'];?>" _src="<?php echo mvc::$cfg['FILE_CENTER']['b2c']['url_get'].'&c='.$v['spi_cate'].'&f='.$v['spi_path'].'100/'.$v['spi_name'].'.'.$v['spi_ext'].mvc::$cfg['FILE_CENTER']['b2c']['get_uri'];?>" height="116" >
                            <p class="success-check"><img src="<?php echo mvc::$cfg['FILE_CENTER']['b2c']['url_get'].'&c='.$v['spi_cate'].'&f='.$v['spi_path'].'100/'.$v['spi_name'].'.'.$v['spi_ext'].mvc::$cfg['FILE_CENTER']['b2c']['get_uri'];?>"></p>
                            <div class="pic-size"><span><?php echo $v['spi_width'].'X'.$v['spi_height'];?></span></div>
                            <span class="icon-online"></span>
                        </li>
                        <?php }?>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <div class="select-info">已选<num class="red2">0</num>张图片(拖动图片更改插入顺序)</div>
    <div id="proUpload" class="select-pic-list" style="display: none;" ondragover="allowDrop(event)"  ondrop="drop(event)">
        <ul></ul>
    </div>
</div>
<div class="modal-footer center">
    <button type="button" class="layui-btn" onclick="addProPic();" id="submitBtn">确定</button>
    <button type="button" class="layui-btn layui-btn-primary" data-dismiss="modal" aria-label="Close">取消</button>
</div>
<script type="text/javascript">
    var setting={
         data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pid"
            },
            view: {
                showLine: true,
                showIcon: true
            }
        },
        callback: {
            onClick: zTreeOnClick
        }
    }
    // 实例化ztree
    $.fn.zTree.init($("#treeMenu"), setting, <?php echo $treeArr;?>);
    var treeObj = $.fn.zTree.getZTreeObj("treeMenu");
    $('#imageList').on('click','li',function(){
        var picId=$(this).attr('pic');
        $(this).toggleClass('selected');
        if($(this).hasClass('selected')){
            var img=$(this).find('img');
            // console.log(img)
            var src=img.eq(0).attr('src');
            var _src=img.eq(1).attr('src');
            var html='<li id="select-'+picId+'" pic="'+picId+'" draggable="true" ondragstart="drag(event,'+picId+')">'+
                        '<img width="100" height="100" src="'+src+'">'+
                        '<p class="success-check"><img src="'+_src+'"></p>'+
                        '<div class="cancel-select"><span></span></div>'+
                    '</li>';
            $('.select-pic-list').show().find('ul').append(html);
        }else{
            $('#select-'+picId).remove();
            if($('.select-pic-list li').length==0) $('.select-pic-list').hide();
        }
        $('num').html($('.select-pic-list li').length);
    });
    $('.select-pic-list').on('click','.cancel-select span',function(){
        var picId=$(this).parents('li').attr('pic');
        $('#pic-'+picId).trigger('click');
    });
    
    //自动完成
    $("#searchCate").autocomplete(<?php echo $treeArr;?>, {
        minChars: 0,
        max: 500,
        matchContains : true,
        formatItem: function(row) {
            return row.name;
        },
        formatMatch: function(row) {
            return row.name;
        },
        formatResult: function(row) {
            return row.name;
        }
    });
    //自动完成选中回调
    $("#searchCate").result(function(event, data, formatted){
        var nodes = treeObj.getNodesByParam("id", data.id, null);
        treeObj.expandNode(nodes[0], true, false, true);
        treeObj.selectNode(nodes[0]);
        zTreeOnClick('','',data);
    });
    function addProPic(){
        // console.log(456);
        // return false;
        var item=$('.select-pic-list#proUpload li');
        var srcArr=[];
        var idArr=[];
        if(item.length>0){
            for (var i = 0; i < item.length; i++) {
                srcArr.push(item.eq(i).find('.success-check img').attr('src'));
                idArr.push(item.eq(i).attr('pic'))
            }
        }
        var obj = $('#imgbtn'+PRODUCT.uploadImageId).parents('li');
        var index=obj.parent('ul').find('li .has_proimg :visible').length;
        console.log(obj.parent('ul').find('li .has_proimg :visible'))
        index=parseInt(index);
        index=index>0?index:0;
        var eq=0;
        if(srcArr.length>1){
            for(var i =index;i<=srcArr.length;i++){
                 var litem=obj.parent('ul').find('li').eq(i);
                 if(!litem.find('.has_proimg').is(':visible'))
                {
                    litem.find('.add_proimg_btn').show().next().hide();
                    litem.find('.proimg').attr('src', srcArr[eq]);
                    litem.find('[name="imgs[]"]').val(idArr[eq]);
                    litem.find('.no_proimg').hide();
                    litem.find('.has_proimg').show();
                    eq++;
                }
            }
        }else{
            obj.find('.proimg').attr('src', srcArr[eq]);
            obj.find('.no_proimg').hide();
            obj.find('.has_proimg').show();
            obj.find('[name="imgs[]"]').val(idArr[eq]);
        }
        $('#layer_box').modal('hide');
        $('.modal-content').html('');
    }
    function zTreeOnClick(event, treeId, treeNode){
        var data={'id':treeNode.id,'pid':treeNode.pid,'picType':treeNode.picType,'cate':treeNode.cate};
        var url=SELF_URL+'seller/getCatePic?isAjax=1&isPro=1';
        ajaxGetPic(url,data);
    }
    function dosearch(){
        var data=$('#pic-form').serialize();
        ajaxGetPic(SELF_URL+'seller/getCatePic?isAjax=1',data);
    }
</script>