{% extends "groups/base.html" %}
{% load static %}
{% block headother%}
<!-- DataTables -->
<link rel="stylesheet" href="{% static 'groups/bower_components/datatables/jquery.dataTables.min.css' %}">
<link rel="stylesheet" href="{% static 'groups/bower_components/layer/theme/default/layer.css' %}">
{% endblock %}


{% block title %}客户类型{% endblock %}

{% block content %}
<!-- Main content -->
<section class="content">
  <div id="devlist">
    <div class="box box-primary" id="liebiao">
      <div class="box-header">
        <div class="btn-group pull-left">
          <button type="button" id="btnRefresh" class="btn btn-default">
            <i class="glyphicon glyphicon-repeat"></i>刷新
          </button>
        </div>
        <div class="btn-group pull-left">&nbsp</div>
        <div class="btn-group pull-left">
          <button type="button" id="btnCreate" class="btn btn-default">
            <i class="glyphicon glyphicon-plus"></i>新增
          </button>

        </div>
        <div class="btn-group pull-left">&nbsp</div>
        <div class="btn-group pull-left">
          <button type="button" id="btnDelete" class="btn btn-default">
            <i class="glyphicon glyphicon-trash"></i>删除
          </button>
        </div>
      </div>
      <div class="box-body">
        <table id="dtbList" class="display" cellspacing="0" width="100%">
          <thead>
            <tr valign="middle">
              <th><input type="checkbox" id="checkAll"></th>
              <th>名称</th>
              <th>说明</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
        <br> <br>
      </div>
    </div>
  </div>
</section>
<!-- /.content -->
{% endblock %}


{% block endother%}
<!-- DataTables -->
<script src="{% static 'groups/bower_components/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'groups/bower_components/datatables/dataTables.const.js' %}"></script>
<!-- SlimScroll -->
<script src="{% static 'groups/bower_components/jquery-slimscroll/jquery.slimscroll.min.js' %}"></script>
<!-- FastClick -->
<script src="{% static 'groups/bower_components/fastclick/lib/fastclick.js' %}"></script>
<script src="{% static 'groups/bower_components/layer/layer.js' %}"></script>


<script>
  var oDataTable = null;
  $(function () {
    oDataTable = initTable();

    function initTable() {
      var oTable = $('#dtbList').DataTable($.extend(true, {},
        DATATABLES_CONSTANT.DATA_TABLES.DEFAULT_OPTION,
        {
          ajax: {
            "url": "{% url 'rbac-role-list' %}",
          },
          columns: [
            DATATABLES_CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,
            {
              data: "name",
              //width : "20%",
            },
            {
              data: "desc",
              //width : "20%",
            },

            {
              data: "id",
              width: "16%",
              bSortable: "false",
              render: function (data, type, row, meta) {
                var ret = "";
                var ret = "<button title='详情-编辑' onclick='doUpdate("
                  + data + ")'><i class='glyphicon glyphicon-pencil'></i></button>";
                // ret = ret + "<button title='关联用户' onclick='doUpdateUser("
                //   + data + ")'><i class='glyphicon glyphicon-user'></i></button>";
                ret = ret + "<button title='关联菜单' onclick='doUpdateMenu("
                  + data + ")'><i class='glyphicon glyphicon-tree-conifer'></i></button>";
                ret = ret + "<button title='删除' onclick='doDelete("
                  + data + ")'><i class='glyphicon glyphicon-trash'></i></button>";
                return ret;
              }
            }],
        }));
      return oTable;
    }

  });
  $("#btnCreate").click(function () {
        layer.open({
            type: 2,
            title: '新增',
            shadeClose: false,
            maxmin: true,
            area: ['800px', '300px'],
            content: "{% url 'rbac-role-create' %}",
            end: function () {
                //关闭时做的事情
                oDataTable.ajax.reload();
            }
        });
    });
    $("#btnRefresh").click(function () {
        oDataTable.ajax.reload();
    });
    /*点取消刷新新页面*/
  $("#btnCancel").click(function () {
    window.location.reload();

  });
  function doUpdate(id) {
    layer.open({
      type: 2,
      title: '编辑',
      shadeClose: false,
      maxmin: true,
      area: ['800px', '400px'],
      content: ["{% url 'rbac-role-update' %}" + '?id=' + id, 'no'],
      end: function () {
        oDataTable.ajax.reload();
      }
    });
  }

  //checkbox全选
  $("#checkAll").on("click", function () {
    if ($(this).prop("checked") === true) {
      $("input[name='checkList']").prop("checked", $(this).prop("checked"));
      $('#example tbody tr').addClass('selected');
    } else {
      $("input[name='checkList']").prop("checked", false);
      $('#example tbody tr').removeClass('selected');
    }
  });

  //批量删除
  $("#btnDelete").click(function () {
    if ($("input[name='checkList']:checked").length == 0) {
      layer.msg("请选择要删除的记录");
      return;
    }

    var arrId = new Array();
    $("input[name='checkList']:checked").each(function () {
      //alert($(this).val());
      arrId.push($(this).val());
    });

    sId = arrId.join(',');

    layer.alert('确定删除吗？', {
      title: '提示'
      , icon: 3 //0:感叹号 1：对号 2：差号 3：问号 4：小锁 5：哭脸 6：笑脸
      , time: 0 //不自动关闭
      , btn: ['确定', '取消']
      , yes: function (index) {
        layer.close(index);
        $.ajax({
          type: "POST",
          url: "{% url 'rbac-role-delete' %}",
          data: { "id": sId, csrfmiddlewaretoken: '{{ csrf_token }}' },
          cache: false,
          success: function (msg) {
            if (msg.result) {
              layer.alert("操作成功", { icon: 1 });
              oDataTable.ajax.reload();
            } else {
              //alert(msg.message);
              layer.alert("操作失败", { icon: 2 });
            }
            return;
          }
        });
      }
    });
  });

  //删除单个数据
  function doDelete(id) {
    layer.alert('确定删除吗？', {
      title: '提示'
      , icon: 3 //0:感叹号 1：对号 2：差号 3：问号 4：小锁 5：哭脸 6：笑脸
      , time: 0 //不自动关闭
      , btn: ['确定', '取消']
      , yes: function (index) {
        layer.close(index);
        $.ajax({
          type: "POST",
          url: "{% url 'rbac-role-delete' %}",
          data: { "id": id, csrfmiddlewaretoken: '{{ csrf_token }}' },
          cache: false,
          success: function (msg) {
            if (msg.result) {
              layer.alert('删除成功', { icon: 1 });
              oDataTable.ajax.reload();
            } else {
              //alert(msg.message);
              layer.alert('删除失败', { icon: 2 });
            }
            return;
          }
        });
      }
    });
  }

  //关联菜单
  function doUpdateMenu(id) {
    layer.open({
      type: 2,
      title: '权限分配',
      shadeClose: false,
      maxmin: true,
      area: ['800px', '480px'],
      content: ["{% url 'rbac-role-role2menu' %}" + '?id=' + id, 'no'],

    });
  }
</script>
{% endblock %}