
<style>
  #component-anim .layui-card-body{padding: 15px;}

  #component-anim .component-anim-demo{font-size: 0;}
  #component-anim .component-anim-demo li{display: inline-block; vertical-align: middle; width: 127px; line-height: 25px; padding: 20px 0; font-size: 14px; text-align: center; color: #666; transition: all .3s; -webkit-transition: all .3s;margin:5px;}
  #component-anim .component-anim-demo li .layui-icon{display: inline-block; font-size: 36px;}

  #component-anim .component-anim-demo li .fontclass{display: none;}
  #component-anim .component-anim-demo li .name{color: #c2c2c2;}
  #component-anim .component-anim-demo li:hover{background-color: #f2f2f2; color: #000;}

  #component-anim .component-anim-demo li{width: 168px;}
  #component-anim .component-anim-demo .layui-anim{cursor: pointer;}
  #component-anim .component-anim-demo .layui-anim{width:150px;height:100px;}
  #component-anim .component-anim-demo .code{height:25px;}

  #component-anim .component-anim-demo .layui-anim-yes
  {
  	border:1px solid #0000ff;
  }
  #component-anim .component-anim-demo .layui-anim-no
  {
  	border: 1px solid #e2e2e2;
  }
  </style>

<div class="layui-card"  id="component-anim">
  <div class="layui-card-header">
  	<input type="hidden" class="file_key" value="<?php echo isset($key) ? $key : "" ?>">
  	<input type="hidden" class="file_pg" value="<?php echo isset($search_pg) ? $search_pg : "" ?>">
  	<input type="hidden" class="file_cur" value="<?php echo isset($cur) ? $cur : "" ?>">
  	<div class="layui-inline"><div class="layui-input-inline"><input type="text" style="width: 100%;" class="layui-input file_filename" value="<?php echo isset($search_name) ? $search_name : "" ?>" autocomplete="new-password" placeholder="<?php echo isset($name) ? $name : "" ?>"></div></div>

  	<div class="layui-inline" style="display: none;"><div class="layui-input-inline"><input type="text" style="width: 100%;"  class="layui-input file_tag" value="<?php echo isset($search_tag) ? $search_tag : "" ?>" autocomplete="new-password" placeholder="标签"></div></div>

  	<div class="layui-inline"><div class="layui-input-inline"><select lay-ignore="" class="layui-input file_cate" style="width: 100%;"><option parent="" value="-1" selected="">选择分类</option>
  		<?php if(isset($cate) && is_array($cate)): foreach($cate as $k => $v): ?>
  		<option parent="" value="<?php echo isset($v['id']) ? $v['id'] : "" ?>" <?php if($v['id'] == $search_cate): ?>selected<?php endif ?>><?php echo isset($v['name']) ? $v['name'] : "" ?></option>
  		<?php endforeach;endif; ?>
  	</select></div></div>

  	<div class="layui-inline" class="file-search" onclick="showUploadFilesSearch($(this))"><div class="layui-input-inline"><button type="button" class="layui-btn"><i class="fa fa-save"></i> 搜索</button></div></div>

  </div>
  <div class="layui-card-body">
    
    <ul class="component-anim-demo">
    	<?php if(isset($file) && is_array($file)): foreach($file as $k1 => $v1): ?>
      <li class="<?php if($v1['check']): ?>layui-anim-yes<?php else: ?>layui-anim-no<?php endif ?>">
        <div class="layui-anim" data-anim="layui-anim-up" onclick="showUploadFilesSet($(this), '<?php echo isset($v1['name']) ? $v1['name'] : "" ?>','<?php echo isset($v1['url']) ? $v1['url'] : "" ?>','<?php echo isset($v1['id']) ? $v1['id'] : "" ?>')"><img src="<?php echo isset($v1['pic']) ? $v1['pic'] : "" ?>" style="max-width: 150px;max-height: 100px;margin-left: 10px;"/></div>
        <div class="code"><?php echo isset($v1['source_name']) ? $v1['source_name'] : "" ?></div>
      </li>
      <?php endforeach;endif; ?>
    </ul>
    <div id="file-page"></div>
</div>

  

<script>
layui.use('laypage', function(){
  var laypage = layui.laypage;
  
  //执行一个laypage实例
  laypage.render({
    elem: 'file-page' //注意，这里的 test1 是 ID，不用加 # 号
    ,count: <?php echo isset($total) ? $total : "" ?> //数据总数，从服务端得到
    ,limit:12
    ,curr:<?php echo isset($search_pg) ? $search_pg : "" ?>
    ,jump: function(obj, first){
	    //首次不执行
	    if(!first){
	      $('.file_pg').val(obj.curr);
	    	showUploadFilesSearch($('.file_pg'));
	    }
	  }
  });
});
</script>

</div>