<title>分类管理</title>
  
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>问答管理</cite></a>
    <a><cite>分类管理</cite></a>
  </div>
</div>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
        
          <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief" lay-filter="J_tabLi_category">
              <ul class="layui-tab-title">
                <li{if $type eq 'question'} class="layui-this"{/if}><a lay-href="wendasns/category/index?type=question">问答</a></li>
                <li{if $type eq 'article'} class="layui-this"{/if}><a lay-href="wendasns/category/index?type=article">文章</a></li>
              </ul>
            </div>
          </div>

        <div class="layui-card-body">
        	<form class="layui-form" action="{:url('wendasns/category/add')}" method="post">
        		<input type="hidden" name="type" value="{$type}">

	      <table id="J_table_list" lay-filter="J_table_list" url="{:url('wendasns/category/edit')}"></table>
	      
			<div class="layui-form-item" style="margin-top: 10px;">
              <button class="layui-btn" lay-submit="" lay-filter="J_ajax_submit_btn"><i class="layui-icon layui-icon-ok-circle"></i>提交</button>
            </div>
	      </form>
	    </div>
    
      </div>
    </div>
  </div>
</div>

<script type="text/html" id="J_checkbox_tpl">
  <input type="checkbox" name="status" lay-skin="switch" lay-text="是|否" lay-filter="J_checkbox_enable" value="{{ d.id }}" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="J_table_tool">
  <button type="button" class="layui-btn layui-btn-xs J_addclass" data-id="{{d.id}}"><i class="layui-icon layui-icon-add-1"></i>添加</button>
  <a href="wendasns/category/remove" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="req" title="确定要删除吗？"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>

<script type="text/html" id="J_table_top">
  {{# if(d.category_id>0){ }}
		{{# for(var i=0;i<d.span-1;i++){ }}
	  <span style="width: 40px;display: inline-block;height: 28px;vertical-align: middle;"></span>
	  {{# } }}
	  
	  {{# if(d.icons=='s'){ }}
	  	<span style="width: 40px;display: inline-block;background: url(../static/dist/style/res/icon_list.png) no-repeat;margin-right: 5px;background-position: 0 -43px;height: 28px;vertical-align: middle;"></span>
	  {{# }else{ }}
  		<span style="width: 40px;display: inline-block;background: url(../static/dist/style/res/icon_list.png) no-repeat;margin-right: 5px;background-position: 0 -70px;height: 28px;vertical-align: middle;"></span>
  
  	{{# } }}
  {{# } }}
  <span style="vertical-align: middle;">{{d.name}}</span>
</script>

<script type="text/html" id="J_toolbar">
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-sm J_table_all" state="1">全部展开</button>
<button type="button" class="layui-btn layui-btn-sm J_table_all" state="0">全部收起</button>
</div>
</script>

<script>
;!function(){
  var $ = layui.$
  ,form = layui.form
  ,laytpl = layui.laytpl
  ,table = layui.table;
  
  //执行渲染
table.render({
  elem: '#J_table_list'
  ,url: '{:url('wendasns/category/list',['type'=>$type])}'
  ,skin: 'nob'
  ,toolbar: '#J_toolbar'
  ,cols: [[
  	   {field:'id',title:'',width:50,templet:'<div>{{# if(d.category_id==0){ }}<a href="javascript:;" class="J_table_toggle" state="0"><i class="layui-icon layui-icon-triangle-r"></i></a>{{# } }}</div>'}
      ,{field:'name',title:'分类名称',minWidth:200,edit:'text',templet:'#J_table_top'}
      ,{field:'dir_name',title:'目录名称',minWidth:120,edit:'text'}
      ,{field:'status',title:'启用',width:100,templet:'#J_checkbox_tpl',align:'center'}
      ,{title:'操作',width:150,align:'center',toolbar:'#J_table_tool'}
  ]]
  ,height: 'auto'
  ,text: {
    none: '暂无数据！'
  }
  ,done: function(res, curr, count){
  	var tpl = $('#J_table_addfirst').html(),d = new Date();
	laytpl(tpl).render({span:0,id:0,index:d.getTime()}, function(html){
		$('tbody').append(html);
		form.render();
	});
  }
});

	$('table.layui-table').on('click','button.J_addclass',function(){
		var tpl = $('#J_table_add').html(),_this = $(this),_tr = _this.parent('div').parent('td').parent('tr'),id = _this.data('id'),d = new Date();
		var span = _tr.children('td').eq(1).children('div').first().children('span').length;

		laytpl(tpl).render({span:span,id:id,index:d.getTime()}, function(html){
			if(id>0){
				_tr.after(html);
			}else{
				_tr.before(html);
			}
			form.render();
		});
	});

	$('table.layui-table').on('click','button.J_table_del',function(){
		var index = $(this).data('id');
		$('#'+index).remove();
	});

	$('table.layui-table').on('click','a.J_table_toggle',function(){
		var _this = $(this),state = _this.attr('state'),_tr = _this.parent('div').parent('td').parent('tr');
		if(state==1){
			_this.attr('state',0);
			_this.children('i').first().removeClass('layui-icon-triangle-d').addClass('layui-icon-triangle-r');
		}else{
			_this.attr('state',1);
			_this.children('i').first().removeClass('layui-icon-triangle-r').addClass('layui-icon-triangle-d');
		}

		var index = _tr.data('index') + 1;
		var length = $('table.layui-table').children('tbody').first().children('tr').length;
		var alltr = $('table.layui-table').children('tbody').first().children('tr');
		for(i=index;i<length;i++){
			var _tri = alltr.eq(i),n = _tri.children('td').first().children('div').first().children('a').length;
			if(n>0){
				break;
			}else{
				_tri.toggle();
			}
			
		}
		
	});

	$('.J_table_all').click(function(){
		var state = $(this).attr('state'),length = $('table.layui-table').children('tbody').first().children('tr').length,alltr = $('table.layui-table').children('tbody').first().children('tr');
		for(i=0;i<length;i++){
			var _tri = alltr.eq(i),n = _tri.children('td').first().children('div').first().children('a').length;
			if(n>0){
				continue;
			}else{
				if(state==1){
					_tri.show();
				}else{
					_tri.hide();
				}
				
			}
			
		}
	});
	
}();
</script>

<script type="text/html" id="J_table_addfirst">
	<tr>
	<td><div class="layui-table-cell"><a></a></div></td>
	<td><div class="layui-table-cell"></div></td>
	<td><div class="layui-table-cell"></div></td>
	<td align="center"><div class="layui-table-cell"></div></td>
	<td data-off="true" class="layui-table-col-special"><div class="layui-table-cell"><button type="button" class="layui-btn layui-btn-xs J_addclass" data-id="{{d.id}}"><i class="layui-icon layui-icon-add-1"></i>添加</button></div></td>
	</tr>
</script>

<script type="text/html" id="J_table_add">
	<tr id="{{d.index}}" class="new_table">
	<td><div class="layui-table-cell"></div></td>
	<td data-minwidth="100">
	<div class="layui-table-cell">
	{{# for(var i=0;i<d.span-1;i++){ }}
	<span style="width: 40px;display: inline-block;height: 28px;vertical-align: middle;"></span>
	{{# } }}
	{{# if(d.id>0){ }}
	<span style="width: 40px;display: inline-block;background: url(../static/dist/style/res/icon_list.png) no-repeat;margin-right: 5px;background-position: 0 -70px;height: 28px;vertical-align: middle;"></span>
	{{# } }}
	<span style="vertical-align: middle;display: inline-block;"><input name="name[{{d.id}}][]" value="" class="layui-input" style="width: 160px;height: 26px;"></span>
	</div>
	</td>
	<td><div class="layui-table-cell"><input name="dir_name[{{d.id}}][]" value="" class="layui-input" style="height: 28px;width: 160px;"></div></td>
	<td align="center"><div class="layui-table-cell"><input type="checkbox" name="state[{{d.id}}][]" lay-skin="switch" lay-text="是|否" value="1" checked=""></div></td>
	<td data-off="true" class="layui-table-col-special"><div class="layui-table-cell"><button type="button" class="layui-btn layui-btn-danger layui-btn-xs J_table_del" data-id="{{d.index}}"><i class="layui-icon layui-icon-delete"></i>删除</button></div></td>
	</tr>
</script>
