module.exports = {
  group: '原子组件',
  componentName: 'ResponsiveGrid.Cell',
  title: '布局容器 Cell',
  docUrl: '',
  screenshot: '',
  npm: {
    "package": '@alilc/lowcode-materials',
    version: '{{version}}',
    exportName: 'ResponsiveGrid',
    main: '',
    destructuring: true,
    subName: 'Cell'
  },
  props: [{
    name: 'colSpan',
    propType: 'number',
    description: '横向，占据几列'
  }, {
    name: 'rowSpan',
    propType: 'number',
    description: '纵向，占据几行'
  }, {
    name: 'style',
    propType: 'object'
  }],
  configure: {
    component: {
      isContainer: true
    },
    advanced: {
      // 这个函数返回false会报错...
      getResizingHandlers: function getResizingHandlers(node) {
        var currentNodeIndex = node.index;
        var parent = node.parent;
        if (!parent) return [];
        var layout = parent.getPropValue('layout');
        if (!layout) return [];
        layout = layout.split(':').map(function (item) {
          return parseInt(item, 10);
        });
        // 最后一个节点不允许拖拽
        if (currentNodeIndex >= layout.length - 1) {
          return [];
        }
        return ['e'];
      },
      callbacks: {
        onResizeStart: function onResizeStart(e, currentNode) {
          var trigger = e.trigger;
          var nodeIndex = currentNode.index;
          var startLayout = currentNode.parent.getPropValue('layout');
          startLayout = startLayout.split(':').map(function (item) {
            return parseInt(item, 10);
          });
          var eachWidth = currentNode.getRect().width / startLayout[nodeIndex];
          // 暴露到currentNode节点上供onResize回调使用
          currentNode.nodeIndex = nodeIndex;
          currentNode.startLayout = startLayout;
          currentNode.eachWidth = eachWidth;
        },
        onResize: function onResize(e, currentNode) {
          var trigger = e.trigger,
            deltaX = e.deltaX,
            deltaY = e.deltaY;
          var nodeIndex = currentNode.nodeIndex,
            startLayout = currentNode.startLayout,
            eachWidth = currentNode.eachWidth;
          var moveColumn = Math.round(deltaX / eachWidth);
          var layout = [].concat(startLayout); // 浅拷贝
          if (moveColumn > 0) {
            moveColumn = Math.min(moveColumn, layout[nodeIndex + 1] - 1);
          } else {
            moveColumn = -Math.min(-moveColumn, layout[nodeIndex] - 1);
          }
          layout[nodeIndex] += moveColumn;
          layout[nodeIndex + 1] -= moveColumn;
          // 获取下一个节点实例
          var nextNode = currentNode.parent.children.filter(function (c, index) {
            return index === nodeIndex + 1;
          });
          // 为当前节点设置colSpan属性
          currentNode.setPropValue('colSpan', layout[nodeIndex]);
          // 为nextChild节点设置colSpan属性
          if (nextNode && nextNode[0]) {
            nextNode[0].setPropValue('colSpan', layout[nodeIndex + 1]);
          }
          // 为父容器设置layout属性
          currentNode.parent.setPropValue('layout', layout.join(':'));
        }
      }
    }
  },
  icon: '',
  category: '布局容器类'
};