{extend name="public/base" /}
{block name="title"}文章管理{/block}
{block name="content"}
<div class="layui-fluid">   
  <div class="layui-card">
    <form class="layui-form layui-card-header layuiadmin-card-header-auto" id="searchForm">
      <div class="layui-form-item asuma-form-item">
          <div class="layui-inline">
              <label class="layui-form-label">文章标题</label>
              <div class="layui-input-block">
                  <input type="text" name="title" autocomplete="off" class="layui-input">
              </div>
          </div>

          <div class="layui-inline">
              <label class="layui-form-label">栏目</label>
              <div class="layui-input-block">
                  <select name="column" >
                    <option value="">请选择</option>
                    {volist name="column" id="vo"}
                      <option value="{$vo.id}"  >{$vo.name}</option>
                    {/volist}
                  </select>
              </div>
          </div>
   
          <div class="layui-inline">
              <button class="layui-btn layui-btn-asuma layuiadmin-btn-admin" lay-submit lay-filter="articlesSearch">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
              </button>
          </div>
      </div>
    </form>
    
    <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
            <a href="{:route('Contents/articlesAdd')}" class="layui-btn layui-btn-asuma layuiadmin-btn-admin" >添加</a>
            <a href="{:route('Contents/articlesAdd2')}" class="layui-btn layui-btn-asuma layuiadmin-btn-admin" >添加2</a>
            <button class="layui-btn layui-btn-danger layuiadmin-btn-role" id="delAll">删除</button>
        </div>
        <table id="articles" lay-filter="articles"></table>  
    </div>
  </div>
</div>
{/block}
{block name="footjs"}
<script type="text/html" id="statusTpl" data-url="{:route('Contents/changeArticlesStatus')}">
  <input type="checkbox" name="status" value="{{d.id}}" title="发布" lay-filter="optstatus" {{d.status == 1 ? 'checked' : ''}}>
</script>

<script type="text/html" id="optTpl">
  <a class="layui-btn layui-btn-asuma layui-btn-xs" href="{:route('articlesEdit')}?id={{d.id}}">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
  layui.use(['form','table'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table;

    var tableIns =  table.render({
      elem: '#articles'
      ,url: "{:route('Contents/articlesList')}" //数据接口
      ,page: {curr:location.hash.replace('#!pg=', ''), hash:'pg'} //开启分页
      ,limit:10
      ,limits:[10,25,50]
      ,done:function (res, curr, count) {
        if(count <= this.limit){
          $('.layui-table-page').addClass('layui-hide');//总条数小于每页限制条数时隐藏分页
        }
      }
      ,cols: [[ //表头
        {type: "checkbox",fixed: "left"}
        ,{field: 'id', title: 'ID',  sort: true, width:65}
        ,{field: 'title', title: '文章标题', width: '30%'}
        ,{field: 'name', title: '所属栏目'}
        ,{field: 'author', title: '发布人/作者'}
        ,{field: 'status', title: '状态', templet: '#statusTpl'}
        ,{field: 'create_time', title: '发布时间', sort: true}
        ,{title: '操作',toolbar: '#optTpl'}
      ]]
    });
    
    table.on('sort(articles)',function(obj){
      if(tableIns.config.page.count <= tableIns.config.page.limit){
        $('.layui-table-page').addClass('layui-hide');//总条数小于每页限制条数时隐藏分页
      }
    })

    //监听搜索
    form.on('submit(articlesSearch)', function(data){
      let field = data.field;
      //执行重载
      tableIns.reload({
        where: field
        ,page:{curr:1}
      });

      return false;
    });

    form.on('checkbox(optstatus)', function(obj){
      var wish = obj.elem.checked
      var id = obj.value
      $.post($('#statusTpl').data('url'),{id:id, status: wish}, function(res){
        if(res.code != 1){
          layer.tips(res.result, obj.othis, {tips:1});
          obj.elem.checked = !wish;
          form.render('checkbox');
        }
      }, 'json')
    })

    $('#delAll').on('click', function () {
        var checkStatus = table.checkStatus('articles')
        ,checkData = checkStatus.data; //得到选中的数据

        if(checkData.length === 0){
          return layer.msg('请选择数据');
        }
        var str = '';
          $.each(checkData, function(i,val){      
           str += val.id + ",";
        
        })
          str=str.substring(0,str.length-1);

        layer.confirm('确定删除吗？', function(index) {

           $.post("{:route('Contents/del')}", {uid:str}, function(res){
              if(res.code == 1){
                layer.msg('删除成功');
                table.reload('articles'); //重载表格
                layer.close(index); //再执行关闭 
              }else{
                layer.msg(res.result, {icon: 5});
              }
            },'json');
            
        });
    });

    table.on('tool(articles)', function(obj){
        switch(obj.event){
          case 'del':
              layer.confirm('确定删除？？', function(index){
     
                   $.post("{:route('Contents/del')}", {id:obj.data.id}, function(res){
                      if(res.code == 1){
                        layer.msg('删除成功');
                        table.reload('articles'); //重载表格
                        layer.close(index); //再执行关闭 
                      }else{
                        layer.msg(res.result, {icon: 5});
                      }
                    },'json');

                }); 
          break;
        };
    });


  });
</script>
{/block}