{% 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-card side-grid-tree">
        <div class="layui-card-header">
          <a href="javascript:void(0);" data-toggle="tooltip" title="Refresh">
            <span id="{{ model_name }}_show_all"><i class="fa fa-fw fa-refresh"></i></span>
          </a>

        </div>
        <div id="id_{{ model_name }}flow" class="layui-card-body">
          <ul id="{{ model_name }}_tree" class="ztree ztree-pure" style="overflow-y: auto;"></ul>
        </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 class="layui-hidden">
        <input type="hidden" id="{{ model_name }}_area">
    </div>

  </div>
{% endblock %}
{% block grid_opt_update %}
  function update_side_ztree() {
    $('#{{ model_name }}_show_all').trigger('click');
  }

  $.extend(true, dimension, {
    actions: {
      GeneralActionNew: ['auto', 'auto'],
      GeneralActionDelete: ['auto', 'auto']
    }
  });

  $.extend(true, callback, {
    load: {
        done: $.fn.resize_side_ztree_if_any
    },
    edit: {
      done: update_side_ztree
    },
    delete: {
      done: update_side_ztree
    },
    actions: {
      GeneralActionNew: {
        done: update_side_ztree
      },
      GeneralActionDelete: {
        done: update_side_ztree
      }
    }
  });
{% endblock grid_opt_update %}
{% 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 area_tree() {
      var setting = {
        view: {
          dblClickExpand: false,
          showLine: true
        },
        data: {
          simpleData: {
            enable: true
          }
        },
        check: {
          enable: false,
          chkboxType: {"Y": "ps", "N": "s"},
          radioType: "all"
        },
        callback: {
          onClick: onClick
        }
      };

      function onClick(event, treeId, treeNode) {
        try{
            $("#{{ model_name }}_area").val(treeNode.id);
            url_params = { 'area_id': treeNode.id };
        } catch(e) {
            url_params = { 'area_id': $("#{{ model_name }}_area").val() };
        }
        table.reload('id_grid_{{ model_name }}', {where: {_p1_area__id__in: JSON.stringify([treeNode.id])}});
      }
      $.ajax({
        url: "{% url 'biotime:personnel_area_tree_nodes_without_default' %}",
        type: "GET",
        dataType: "json",
        success: function (nodes) {
          var zTree = $.fn.zTree.init($("#{{ model_name }}_tree"), setting, nodes);
          nodes_data = zTree.getNodes();
          if (nodes_data) {
            if ($("#{{ model_name }}_area").val()) {
                for (let node in nodes_data ) {
                    if (nodes_data[node].id == $("#{{ model_name }}_area").val()) {
                        zTree.selectNode(nodes_data[node]);
                        break;
                    }
                }
            } else {
                zTree.selectNode(nodes_data[0]);
                $("#{{ model_name }}_area").val(nodes_data[0].id);
            }
            if ($("#{{ model_name }}_area").val()){
                let area_id = Number($("#{{ model_name }}_area").val());
                table.reload('id_grid_{{ model_name }}', {where: {_p1_area__id__in: JSON.stringify([area_id])}});
            } else {
                url_params = { 'area_id': nodes_data[0].id };
            }
          }
        }
      });
    }

    area_tree();

    $("#{{ model_name }}_show_all").click(function () {
      area_tree();
    });

    //$("#{{ model_name }}_reset").click()
  })
{% endblock %}