{% load i18n %}
<style>
    #id_frameareaSearch{
     min-width: 178px !important;
    }
</style>
<div class="layui-row">
  <div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-header">
        <div class="layui-form">
          <div class="layui-form-item">
            <div class="layui-inline">
              <div class="layui-input-inline" style="width: 160px">
                <input id="id_frameareaSearch" type="text" placeholder="{% trans 'areaList_search_area' %}" name="frame-area-search" autocomplete="off"
                       class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <div class="button-3d" lay-submit="" lay-filter="areaSearch">
                <i class="fa fa-fw fa-search"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-card-body">
        <table id="id_attAreaList" class="layui-hide" lay-filter="attAreaList"></table>
      </div>
    </div>
  </div>
  <input id="id_selectedArea" type="text" class="layui-hide"/>
</div>
<script>
  layui.use(['form', 'table', 'tablePlug'], function (){
    var table = layui.table, tablePlug = layui.tablePlug, form=layui.form;
    tablePlug.smartReload.enable(true);
    var opts = {
      elem: "#id_attAreaList"
      ,height: 250
      ,text: {none: gettext('none_data')}
      ,request: {
        pageName: 'page',
        limitName: 'page_size'
      }
      ,page: {
        layout: ['count', 'prev', 'page', 'next', 'limit']
        ,limit: 50
        ,limits: [20, 50, 80, 100, 200]
        ,groups: 1
      }
      ,cols: [[
          {field: 'id', type: 'checkbox'}
          ,{field: 'area_code', title: "{% trans 'area_field_code' %}", width: 90}
          ,{field: 'area_name', title: "{% trans 'area_field_name' %}", width: 140}
          ,{field: 'parent_area_name', title: "{% trans 'area_field_parentArea' %}", width: 140}
      ]]
      ,url: '/personnel/api/areas/'
    };
    var areaTable = table.render(opts);
    table.on('checkbox(attAreaList)', function(obj){
      var checkedData = table.checkStatus("id_attAreaList");
      if(checkedData.data.length > 0){
        $("#id_selectedArea").val(JSON.stringify(checkedData.data));
      }else{
        $("#id_selectedArea").val("");
      }
    });
    form.on('submit(areaSearch)', function(){
      var alias = $("#id_frameareaSearch").val();
      table.reload(areaTable.config.id, {where: {search: alias}})
    });
    $("#id_frameareaSearch").keypress(function(event){
      if (event.keyCode == "13") {
        var alias = $(this).val();
        table.reload(areaTable.config.id, {where: {search: alias}});
      };
    });
  });
</script>
