{% extends "data_grid.html" %}
{% load i18n static iclock_tags common %}
{% block main_body %}
  <div class="layui-row layui-col-space15" style="margin-top: 0px; margin-bottom: 0px">
    <div class="layui-col-md2">
      <div class="layui-tab" style="padding-top: 20px;">
        <ul class="layui-tab-title">
          <li class="layui-this">{% trans 'employee_department_filter' %}</li>
          <li>{% trans 'employee_area_filter' %}</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            <div id="{{ model_name }}-tree-container" class="layui-card">
            <div  id="{{ model_name }}-dept-tree-control" class="layui-card-header" style="background-color: #f2f2f2">
            <span class="" name="all"><a href="javascript:void(0);" title="{% trans 'department_tree_selectAll' %}"><i
                class="fa fa-fw fa-check-square-o"></i></a></span>
            <span class="selected" name="mul"><a href="javascript:void(0);" title="{% trans 'department_tree_multipleSelect' %}"><i
                class="fa fa-fw fa-list"></i></a></span>
            <span name="sub"><a href="javascript:void(0);" title="{% trans 'department_tree_selectSubDepartment' %}"><i
                class="fa fa-fw fa-sitemap"></i></a></span>
            </div>
            <div class="layui-card-body">
                <ul id="{{ model_name }}-tree" class="ztree ztree-pure" style="overflow-y: auto"></ul>
            </div>
            </div>
          </div>
          <div class="layui-tab-item">
            <div id="{{ model_name }}-tree-container" class="layui-card">
              <div  id="{{ model_name }}-area-tree-control" class="layui-card-header" style="background-color: #f2f2f2">
                <span class="" name="all"><a href="javascript:void(0);" title="{% trans 'department_tree_selectAll' %}"><i
                    class="fa fa-fw fa-check-square-o"></i></a></span>
                <span class="selected" name="mul"><a href="javascript:void(0);" title="{% trans 'department_tree_multipleSelect' %}"><i
                    class="fa fa-fw fa-list"></i></a></span>
                <span name="sub"><a href="javascript:void(0);" title="{% trans 'area_tree_selectSubDepartment' %}"><i
                    class="fa fa-fw fa-sitemap"></i></a></span>
              </div>
              <div class="layui-card-body">
                <ul id="{{ model_name }}-tree-area" class="ztree ztree-pure" style="overflow-y: auto"></ul>
              </div>
            </div>
          </div>
        </div>
    </div>
    </div>

    <div class="layui-col-md10">
      <table id="id_grid_{{ model_name }}" class="layui-hide" lay-filter="{{ model_name }}"></table>
      <script type="text/html" id="{{ model_name|safe }}_toolbar">
        <div class="layui-btn-container grid-toolbar" style="">
          <ul class="layui-nav"></ul>
        </div>
      </script>
    </div>
  </div>
{% endblock %}

{% block actionAfterTableRender %}
  layui.use(['table', 'tablePlug', 'layer', 'flow'], function(){
    var table = layui.table, tablePlug = layui.tablePlug, layer=layui.layer, flow=layui.flow;
    tablePlug.smartReload.enable(true);

    function refreshFilter() {
      var nodes = zTree.getCheckedNodes(true);
      var deptID = [];
      nodes.forEach(function (item) {
        deptID.push(item.id);
      });
      function recursive(item) {
            deptID.push(item.id)
            if(item.children){
               item.children.forEach(function (Childitem){
            recursive(Childitem)
        });
            }
            }
        if (deptID.length === 0) {
            var all_nodes = zTree.getNodes(true)
            all_nodes.forEach(function (item) {
             recursive(item)
        });
        }
      var old_where = get_layui_table_config('{{ model_name }}').where
      var new_where = $.extend({}, old_where, {
          _p1_employee__department_id__id__in: '[' + deptID.join(',') + ']'
        })

      table.reload('id_grid_{{ model_name }}', {
        where: new_where
      });

    }
    function refreshFilterByArea() {
      var nodes = zTree_area.getCheckedNodes(true);
      var deptID = [];
      nodes.forEach(function (item) {
        deptID.push(item.id);
      });
      if (deptID.length === 0) {
        var all_nodes = zTree_area.getNodes(true);
        all_nodes.forEach(function (item) {
            deptID.push(item.id);
        });
      }
      var old_where = get_layui_table_config('{{ model_name }}').where
      var new_where = $.extend({}, old_where, {
          _p1_employee__area__id__in: '[' + deptID.join(',') + ']'
        })

      table.reload('id_grid_{{ model_name }}', {
        where: new_where
      });

    }
    function onClick(event, treeId, treeNode) {
        if(treeId == "{{ model_name }}-tree") {
            zTree.checkNode(treeNode, !treeNode.checked, false, false);
            refreshFilter();
        }else{
            zTree_area.checkNode(treeNode, !treeNode.checked, false, false);
            refreshFilterByArea();
        }
    }

    function onCheck(event, treeId, treeNode) {
        if(treeId == "{{ model_name }}-tree") {
            refreshFilter('d');
        }else{
            refreshFilterByArea('d');
        }
    }

    function department_tree() {
      var setting = {
        view: {
          dblClickExpand: false,
          showIcon: false,
          showLine: true
        },
        data: {
          simpleData: {
            enable: true
          }
        },
        check: {
          enable: true,
          chkboxType: {"Y": "", "N": ""},
          chkStyle: 'checkbox',
          radioType: "all"
        },
        callback: {
          onClick: onClick
          , onCheck: onCheck
        }
      };
      $.ajax({
        url: "{% url 'biotime:personnel_department_tree_nodes' %}",
        type: "GET",
        dataType: "json",
        success: function (nodes) {
          zTree = $.fn.zTree.init($("#{{ model_name }}-tree"), setting, nodes);
        }
      });
      $.ajax({
        url: "{% url 'biotime:personnel_area_tree_nodes' %}",
        type: "GET",
        dataType: "json",
        success: function (nodes) {
            zTree_area = $.fn.zTree.init($("#{{ model_name }}-tree-area"), setting, nodes);
        }
      });
    }

    department_tree();

    $("#{{ model_name }}-dept-tree-control span").click(function () {
      var name = $(this).attr('name');
      if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
        if (name === 'all') {
          if (zTree.setting.check.chkStyle === 'checkbox') {
            zTree.checkAllNodes(false);
            refreshFilter();
          }
        } else if (name === 'mul') {
          var nodes = zTree.getCheckedNodes(true);
          zTree.checkAllNodes(false);
          if (nodes.length > 0) {
            zTree.checkNode(nodes[0], true, false, true);
          }
          zTree.setting.check.chkStyle = 'radio';
        } else if (name === "sub") {
          zTree.setting.check.chkboxType = {"Y": "", "N": ""};
        }
      } else {
        $(this).addClass('selected');
        if (name === 'all') {
          if (zTree.setting.check.chkStyle === 'checkbox') {
            zTree.checkAllNodes(true);
            refreshFilter();
          }
        } else if (name === 'mul') {
          zTree.setting.check.chkStyle = 'checkbox';
        } else if (name === "sub") {
          zTree.setting.check.chkboxType = {"Y": "s", "N": "s"};
        }
      }
      zTree.refresh();
    });
    $("#{{ model_name }}-area-tree-control span").click(function () {
        var name = $(this).attr('name');
        if ($(this).hasClass('selected')) {
          $(this).removeClass('selected');
          if (name === 'all') {
            if (zTree_area.setting.check.chkStyle === 'checkbox') {
              zTree_area.checkAllNodes(false);
              refreshFilterByArea();
            }
          } else if (name === 'mul') {
            var nodes = zTree_area.getCheckedNodes(true);
            zTree_area.checkAllNodes(false);
            if (nodes.length > 0) {
              zTree_area.checkNode(nodes[0], true, false, true);
            }
            zTree_area.setting.check.chkStyle = 'radio';
          } else if (name === "sub") {
            zTree_area.setting.check.chkboxType = {"Y": "", "N": ""};
          }
        } else {
          $(this).addClass('selected');
          if (name === 'all') {
            if (zTree_area.setting.check.chkStyle === 'checkbox') {
              zTree_area.checkAllNodes(true);
              refreshFilterByArea();
            }
          } else if (name === 'mul') {
            zTree_area.setting.check.chkStyle = 'checkbox';
          } else if (name === "sub") {
            zTree_area.setting.check.chkboxType = {"Y": "s", "N": "s"};
          }
        }
        zTree_area.refresh();
      });
  })
{% endblock %}
