import { t } from "../../src/locale";
import snippets from "./snippets";
import { getFlowEventConfig } from "../_com-props/flowEventConfig";
import componentKey from "../_com-props/componentKey";
import componentName from "../_com-props/componentName";
import loopData from "../_com-props/loopData";
function clamp(value, min, max) {
  return Math.max(min, Math.min(max, value));
}
export default {
  snippets: snippets,
  componentName: 'Col',
  "group": t('gridCol.key_Ug4bbm4Hmo7o'),
  title: t('gridCol.key_EpggIT4Hlgh9'),
  props: [loopData, componentKey, componentName, {
    name: 'isWalletConnect',
    title: {
      label: t('gridCol.key_CmdPFwsmmH3M'),
      tip: t('gridCol.key_CmdPFwsmmH4M')
    },
    propType: 'bool',
    setter: 'BoolSetter',
    defaultValue: false
  }, getFlowEventConfig({
    label: t('gridCol.initEvent'),
    tip: t('gridCol.initEventTip'),
    props: {}
  }), getFlowEventConfig({
    name: "clickFlowEvent",
    label: t('gridCol.clickFlowEvent'),
    tip: t('gridCol.clickFlowEventTip'),
    props: {}
  }),
  // getFlowEventConfig({
  //   name: "mouseDownFlowEvent",
  //   label: t('button.mouseDownFlowEvent'),
  //   tip: t('button.mouseDownFlowEventTip'),
  //   props: {}
  // }),
  // getFlowEventConfig({
  //   name: "mouseUpFlowEvent",
  //   label: t('button.mouseUpFlowEvent'),
  //   tip: t('button.mouseUpFlowEventTip'),
  //   props: {}
  // }),
  {
    type: 'field',
    name: 'intervalProps',
    title: t('gridCol.interval'),
    extraProps: {
      display: 'accordion',
      defaultCollapsed: true
    },
    setter: {
      componentName: 'ObjectSetter',
      display: 'inline',
      props: {
        config: {
          items: [{
            type: 'field',
            name: 'visible',
            title: t('gridCol.openInterval'),
            setter: [{
              componentName: 'BoolSetter',
              props: {
                defaultValue: false
              }
            }]
          }, {
            name: 'count',
            title: t('gridCol.intervalCount'),
            setter: [{
              componentName: 'NumberSetter',
              initialValue: 10
            }],
            condition: function condition(target) {
              var intervalProps = target.getProps().getPropValue('intervalProps');
              return intervalProps === null || intervalProps === void 0 ? void 0 : intervalProps.visible;
            }
          }, {
            name: 'intervalTime',
            title: t('gridCol.intervalTime'),
            setter: [{
              componentName: 'NumberSetter',
              initialValue: 10,
              props: {
                min: 0
              }
            }],
            condition: function condition(target) {
              var intervalProps = target.getProps().getPropValue('intervalProps');
              return intervalProps === null || intervalProps === void 0 ? void 0 : intervalProps.visible;
            }
          }]
        }
      }
    }
  }, {
    name: 'span',
    title: {
      label: t('gridCol.key_CmdPFwsmmH2M'),
      tip: t('gridCol.key_oer8yUNFyBKX')
    },
    propType: 'number',
    setter: {
      componentName: 'NumberSetter',
      props: {
        min: 0,
        max: 24
      }
    }
  }, {
    name: 'styleWebOS',
    title: {
      label: t('gridRow.key_FAr6jUiyP7z4'),
      tip: t('gridRow.key_tcUnf2iinPgb')
    },
    propType: 'bool',
    setter: "BoolSetter",
    defaultValue: false
  }, {
    name: 'order',
    title: {
      label: t('gridCol.key_DjbFmC3PvZTb'),
      tip: t('gridCol.key_Ff6CphCili5D')
    },
    propType: 'number'
  }, {
    name: 'pull',
    title: {
      label: t('gridCol.key_xkSKhlN1OqTM'),
      tip: t('gridCol.key_2JhdSMXJEd81')
    },
    propType: 'number',
    setter: {
      componentName: 'NumberSetter',
      props: {
        min: 0,
        max: 24
      }
    }
  }, {
    name: 'push',
    title: {
      label: t('gridCol.key_Un3VvXJIQ7Sb'),
      tip: t('gridCol.key_Jx65HJ4qIYPz')
    },
    propType: 'number',
    setter: {
      componentName: 'NumberSetter',
      props: {
        min: 0,
        max: 24
      }
    }
  }, {
    title: t('gridCol.buttonStatus'),
    display: 'block',
    type: 'group',
    items: [{
      name: 'hoverStyle',
      title: t('button.hoverStyle'),
      type: 'group',
      extraProps: {
        display: 'entry'
      },
      items: [{
        name: 'hoverStyle',
        title: {
          label: t('button.hoverStyle'),
          tip: t('button.hoverStyleTip')
        },
        setter: 'CStyleSetter',
        extraProps: {
          display: 'block'
        }
      }]
    }, {
      name: 'clickStyle',
      title: t('button.clickStyle'),
      type: 'group',
      extraProps: {
        display: 'entry'
      },
      items: [{
        name: 'clickStyle',
        title: {
          label: t('button.clickStyle'),
          tip: t('button.clickStyleTip')
        },
        setter: 'CStyleSetter',
        extraProps: {
          display: 'block'
        }
      }]
    }, {
      name: 'selectStyle',
      title: t('button.selectStyle'),
      type: 'group',
      extraProps: {
        display: 'entry'
      },
      items: [{
        name: 'selectStyle',
        title: {
          label: t('button.selectStyle'),
          tip: t('button.selectStyleTip')
        },
        setter: 'CStyleSetter',
        extraProps: {
          display: 'block'
        }
      }]
    }, {
      name: 'loadingStyle',
      title: t('button.loadingStyle'),
      type: 'group',
      extraProps: {
        display: 'entry'
      },
      items: [{
        name: 'loadingStyle',
        title: {
          label: t('button.loadingStyle'),
          tip: t('button.loadingStyleTip')
        },
        setter: 'CStyleSetter',
        extraProps: {
          display: 'block'
        }
      }]
    }, {
      name: 'errorStyle',
      title: t('button.errorStyle'),
      type: 'group',
      extraProps: {
        display: 'entry'
      },
      items: [{
        name: 'errorStyle',
        title: {
          label: t('button.errorStyle'),
          tip: t('button.errorStyleTip')
        },
        setter: 'CStyleSetter',
        extraProps: {
          display: 'block'
        }
      }]
    }]
  }],
  configure: {
    component: {
      isContainer: true,
      nestingRule: {
        parentWhitelist: ['Row']
      }
    },
    supports: {
      events: false,
      style: true,
      "loop": false,
      "condition": false
    },
    advanced: {
      getResizingHandlers: function getResizingHandlers() {
        return ['e'];
      },
      callbacks: {
        onResizeStart: function onResizeStart(e, currentNode) {
          var parent = currentNode.parent;
          if (parent) {
            var parentNode = parent.getDOMNode();
            if (parentNode) {
              currentNode.parentRect = parentNode.getBoundingClientRect();
            }
          }
          currentNode.beforeSpan = currentNode.getPropValue('span') || 24;
          currentNode.startRect = currentNode.getRect();
        },
        onResize: function onResize(e, currentNode) {
          var deltaX = e.deltaX;
          var startWidth = currentNode.startRect ? currentNode.startRect.width : currentNode.beforeSpan * (currentNode.parentRect.width / 24);
          var width = startWidth + deltaX;
          if (!currentNode.startRect) {
            currentNode.startRect = {
              width: width
            };
          }
          width = clamp(width, 0, currentNode.parentRect.width);
          var allowMoveX = Math.round(width - startWidth); // 实际被允许的x轴移动
          currentNode.moveColumn = Math.round(allowMoveX / (currentNode.parentRect.width / 24)); // 计算移动距离所占的列
          if (allowMoveX > 0) {
            currentNode.moveColumn++;
          } else {
            currentNode.moveColumn--;
          }
          currentNode.targetColumn = clamp(currentNode.beforeSpan + currentNode.moveColumn, 1, 24);
          // currentNode.setPropValue('span', currentNode.targetColumn);
          var dom = currentNode.getDOMNode();
          dom.style.width = Math.round(width) + "px";
          dom.style.flex = 'none';
          dom.style.maxWidth = '100%';
        },
        onResizeEnd: function onResizeEnd(e, currentNode) {
          currentNode.getDOMNode().style.cssText = '';
          currentNode.targetColumn = clamp(currentNode.targetColumn, 1, 24);
          currentNode.setPropValue('span', currentNode.targetColumn);
        }
      }
    }
  }
};