define(function (require) {
  return function () {
    var $grid1, $grid2, $grid3;

    function refreshGrid1() {
      $grid1.yvgrid('reload', {
        url: demoApi('/queryStaff'),
      });
    }

    function refreshGrid2(rowid) {
      var row = $grid1.yvgrid('rowData', rowid);
      if (!row) {
        $.yvan.msg('请先在职员列表选择一行数据');
        return;
      }
      console.log('query data:', row);
      $grid3.yvgrid('clear');
      $grid2.yvgrid('reload', {
        url: demoApi('/queryStaffWorkareaOrder'),
        queryParams: { staffId: row.staffId }
      });
    }

    function refreshGrid3(rowid) {
      var row = $grid2.yvgrid('rowData', rowid);
      if (!row) {
        $.yvan.msg('请先在职员作业权限列表选择一行数据');
        return;
      }
      $grid3.yvgrid('reload', {
        url: demoApi('/queryStaffWorkPriority'),
        queryParams: { operPermId: row.operPermId }
      });
    }

    var grid1 = {
      onRender: function () {
        $grid1 = $(this);
      },
      xtype: 'yvgrid',
      toolbar: {
        xtype: 'toolbar',
        title: '职员列表',
        items: [
          {
            text: '查询', onClick: function () {
              refreshGrid1();
            }
          }
        ]
      },
      idField: 'staffId',
      columns: [[
        //{ field: 'staffId', title: 'staffId' },
        { field: 'staffCode', title: '职员编号' },
        { field: 'staffName', title: '职员名称' },
        { field: 'logogram', title: '助记码' },
        { field: 'staffDesc', title: '人员描述' },
        { field: 'staffJob', title: '岗位' },
        { field: 'staffNo', title: '工号' },
        { field: 'staffTel', title: '手机' },
        { field: 'staffAddr', title: '联系地址' },
      ]],
      onBeforeSelect: function (targetBoundIndex, oldIndex, event) {
        console.log('grid1 beforeSelect type:' + event.type + ', oldIndex:' + oldIndex + ', newIndex:' + targetBoundIndex);
      },
      onSelectRow: function (rowid, data, event) {
        refreshGrid2(rowid);
      }
    };

    var grid2 = {
      onRender: function () {
        $grid2 = $(this);
      },
      xtype: 'yvgrid',
      toolbar: {
        xtype: 'toolbar',
        title: '职员作业权限'
      },
      columns: [[
        { field: 'operPermId', hidden: true },
        //{ field: 'staffId', title: 'staffId' },
        { field: 'staffName', title: '职员名称' },
        { field: 'whareaName', title: '拣货区名称' },
        { field: 'workareaOrder', title: '作业顺序' },
        { field: 'regionName', title: '区域名称' },
        { field: 'remark', title: '备注' },
      ]],
      onSelectRow: function (rowid) {
        refreshGrid3(rowid);
      }
    };

    var grid3 = {
      onRender: function () {
        $grid3 = $(this);
      },
      xtype: 'yvgrid',
      toolbar: {
        xtype: 'toolbar',
        title: '作业优先级'
      },
      columns: [[
        { field: 'operModuleType', title: '作业类别', formatter: $.yvan.bizDict('OperationModule').combo() },
        { field: 'priority', title: '作业优先级' },
        { field: 'remark', title: '备注' }
      ]]
    };

    return {
      center: {
        border: false,
        items: grid1
      },
      south: {
        height: '50%',
        split: true,
        border: false,
        items: {
          xtype: 'layout',
          west: {
            width: '60%',
            border: false,
            split: true,
            items: grid2
          },
          center: {
            width: '40%',
            border: false,
            items: grid3
          }
        }
      }
    };
  };
});