<style>
  .layui-btn:not(.layui-btn-lg):not(.layui-btn-sm):not(.layui-btn-xs) {
    height: 34px;
    line-height: 34px;
    padding: 0 8px;
  }

  .layui-table td {
    border-left: none;
    border-right: none;
  }
</style>

<body>
  <div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">


      <!-- 
      <fieldset class="table-search-fieldset">
        <legend>搜索信息</legend>
        <div style="margin: 10px 10px 10px 10px">
          <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-inline">
                  <input type="text" name="ddusername" autocomplete="off" class="layui-input">
                </div>
              </div>


              <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                  <input type="text" name="realname" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-inline">
                <button type="submit" class="layui-btn" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
              </div>
            </div>
          </form>
        </div>
      </fieldset> -->
      <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>

          <!-- <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="expand"> 展开 </button>
          <button class="layui-btn layui-btn-sm layui-btn-green data-delete-btn" lay-event="fold"> 折叠 </button> -->

          <button class="layui-btn layui-btn-danger  layui-btn-sm data-add-btn" lay-event="delete"> 批量删除 </button>
        </div>
      </script>
      <div>
        <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
      </div>
    </div>
  </div>
  <script type="text/html" id="status">
    <input type="checkbox" name="status" {{#  if(d.status==1){ }}checked{{#  } }} lay-skin="switch" lay-text="正常|禁用" lay-filter="status" value="{{d.id}}">
    <div class="layui-unselect layui-form-switch" lay-skin="_switch">
  </script>
  <!-- 操作列 -->
  <script type="text/html" id="auth-state">
    <!-- <a class="layui-btn layui-btn-green layui-btn-xs" lay-event="edit">添加子分类</a> -->
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
  </script>

  <script type="text/html" id="tj_switch">
    <input type="checkbox" name="tj" {{#  if(d.tj==2){ }}checked{{#  } }} lay-skin="switch" lay-text="推荐|不推荐" lay-filter="tj" value="{{d.id}}">
    <div class="layui-unselect layui-form-switch" lay-skin="_switch">
  </script>
  <script type="text/html" id="img">
    <img src="/{{d.img}}" width="38px" height="38px" style="object-fig: cover" />
  </script>
  <script>
    layui.use(['table', 'treetable', 'miniPage', 'form', 'miniAdmin'], function() {
      var $ = layui.jquery;
      var table = layui.table;
      var treetable = layui.treetable;
      var miniPage = layui.miniPage;
      var miniAdmin = layui.miniAdmin;
      var form = layui.form;
      var where;
      // 渲染表格
      layer.load(2);
      var renderTable = function(data) {
        treetable.render({
          treeColIndex: 1,
          treeSpid: 0,
          treeIdName: 'id',
          treePidName: 'pid',
          url: '<?= u(MOD, "list", array("act1" => "list")) ?>',
          elem: '#munu-table',
          // data:data,
          where: where,
          page: false,
          toolbar: "#toolbarDemo",
          cols: [
            [{
                type: "checkbox",
                width: 50
              },
              {
                field: 'id',
                title: 'id',
                width: 150
              },
              {
                field: 'title',
                title: '名称',
                minwidth: 200,
              },
              {
                title: '图标',
                width: 100,
                templet: '#img',
                align: "center"
              },
              {
                title: '状态',
                templet: '#status',
                width: 100,
                align: "center"
              },
              {
                title: '推荐',
                templet: '#tj_switch',
                width: 100,
                align: "center"
              },
              {
                field: 'sort',
                title: '排序',
                edit: true,
                width: 80,
                align: 'center',
              },
              {
                templet: '#auth-state',
                width: 200,
                align: 'center',
                title: '操作'
              }
            ]
          ],
          done: function() {
            layer.closeAll('loading');
          }
        });
      }
      renderTable();

      form.on('switch(status)', function(data) {

        var id = data.value;
        var status = this.checked ? '1' : '2';
        $.post("ajax.php?act=changefield", {
          id: id,
          table: "<?= MOD ?>",
          field: "status",
          value: status
        }, function(data) {
          layer.closeAll('loading');
          if (data.code == 0) {

          } else {
            miniAdmin.error(data.msg);
          }

        }, "json");

      });

      form.on('switch(tj)', function(data) {

        var id = data.value;
        var status = this.checked ? '2' : '1';
        $.post("ajax.php?act=changefield", {
          id: id,
          table: "<?= MOD ?>",
          field: "tj",
          value: status
        }, function(data) {
          layer.closeAll('loading');
          if (data.code == 0) {
            layer.close(index);
          } else {
            miniAdmin.error(data.msg);
          }

        }, "json");

      });
      // $.ajax({
      //      url: '<?= u(MOD, "list") ?>',
      //      type: 'post',
      //      dataType: 'json',
      //      success: function(res) {
      //        renderTable(res.data);
      //      }
      //      })



      table.on('edit(munu-table)', function(obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
        if (isNaN(obj.value)) {
          miniAdmin.error("输入值须为数字");
          return;
        }
        layer.load(2);
        $.post("ajax.php?act=changefield", {
          id: obj.data.id,
          value: obj.value,
          table: "<?= MOD ?>",
          field: obj.field
        }, function(data) {
          layer.closeAll('loading');

          //table.reload("currentTableId")


        }, "json");


      });





      // 监听搜索操作
      form.on('submit(data-search-btn)', function(data) {
        var result = JSON.stringify(data.field);

        where = data.field;
        renderTable();
        return false;
        //执行搜索重载

      });


      table.on('toolbar(munu-table)', function(obj) {
        if (obj.event === 'add') { // 监听添加操作
          addedi("添加");
        } else if (obj.event === 'expand') { // 监听删除操作
          treetable.expandAll('#munu-table');
        } else if (obj.event === 'fold') { // 监听删除操作
          treetable.foldAll('#munu-table');
        } else if (obj.event === 'delete') {

          var checkStatus = table.checkStatus('munu-table')
          data = checkStatus.data;
          if (data.length == 0) {
            layer.alert("请先选择");
            return;
          }
          var ids = [];
          for (var i = 0; i < data.length; i++) {
            ids.push(data[i].id)
          }
          var ids_str = (ids.toString());

          layer.confirm('真的批量删除吗', function(index) {
            layer.load(2);
            $.post("<?= u(MOD, "del") ?>", {
              ids: ids_str
            }, function(data) {
              layer.closeAll('loading');
              if (data.code == 0) {
                layer.close(index);
                renderTable();
              } else {
                miniAdmin.error(data.msg);
              }

            }, "json");
          });
        }
      });


      //监听工具条
      table.on('tool(munu-table)', function(obj) {
        var data = obj.data;
        var layEvent = obj.event;

        if (layEvent === 'del') {

          layer.confirm('确定删除' + data.title + "?", function(index) {
            layer.load(2);
            $.post("<?= u(MOD, "del") ?>", {
              ids: data.id
            }, function(data) {
              layer.closeAll('loading');
              if (data.code == 0) {
                layer.close(index);

                renderTable();
              } else {
                miniAdmin.error(data.msg);
              }

            }, "json");
          })

          //  layer.alert('删除' + data.id);
        } else if (layEvent === 'edit') {
          addedi("修改分类", data.id)
        }
      });


      function addedi(title, id) {

        var content = miniPage.getHrefContent('index.php?mod=<?= MOD ?>&act=addedi&id=' + id);
        var openWH = miniPage.getOpenWidthHeight();

        var index = layer.open({
          title: title,
          type: 1,
          shade: 0.2,
          maxmin: true,
          shadeClose: true,
          area: [openWH[0] + 'px', openWH[1] + 'px'],
          offset: [openWH[2] / 2 + 'px', openWH[3] / 2 + 'px'],
          content: content,
          success: function(layreo, index) {

            form.on('submit(saveBtn)', function(data) {
              layer.load(2);
              data.field.sub = 1;
              $.post("<?= u(MOD, "addedi") ?>", data.field, function(res) {
                layer.closeAll('loading');

                if (res.code == 0) {
                  layer.close(index);
                  renderTable();
                } else {

                  miniAdmin.error(res.msg)
                }
              }, "json");

            })
          }
        });
        $(window).on("resize", function() {
          layer.full(index);
        });

      }


    });
  </script>
</body>

</html>