import snippets from './snippets';

export default {
  snippets,
  componentName: 'AMFormDescItem',
  title: '表单描述项',
  category: '表单',
  group: '基础组件',
  props: [
    {
      name: 'name',
      title: { label: '字段名', tip: '字段名' },
      isRequired: true,
      setter: {
        componentName: 'MixedSetter',
        props: {
          setters: ['StringSetter', 'JsonSetter', 'ExpressionSetter'],
        },
      },
      supportVariable: true,
    },
    {
      name: 'label',
      title: { label: '标签', tip: '标签' },
      propType: { type: 'oneOfType', value: ['string', 'node'] },
    },
    {
      name: 'colon',
      title: {
        label: '是否展示冒号',
        tip: 'colon | 是否展示冒号',
      },
      propType: 'bool',
      defaultValue: true,
      supportVariable: true,
    },
    {
      name: 'extra',
      title: {
        label: '扩展',
        tip: 'extra | 表单项尾部的内容',
      },
      propType: {
        type: 'oneOfType',
        value: ['node'],
      },
      setter: {
        componentName: 'SlotSetter',
      },
    },
    {
      name: 'valuePropName',
      title: {
        label: '子组件值字段',
        tip: `子节点的值的字段，如 Switch 的是 'checked'`,
      },
      propType: 'string',
      defaultValue: 'value',
      setter: 'StringSetter',
      supportVariable: true,
    },

    {
      type: 'group',
      title: '样式',
      display: 'accordion',
      items: [
        {
          name: 'hidden',
          title: {
            label: '是否隐藏',
            tip: '是否隐藏整个字段',
          },
          propType: 'bool',
          setter: 'BoolSetter',
          supportVariable: true,
        },
        {
          name: 'layout',
          title: { label: '表单布局', tip: '表单布局' },
          setter: [
            {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '水平',
                    value: 'horizontal',
                  },
                  {
                    title: '垂直',
                    value: 'vertical',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
          propType: { type: 'oneOf', value: ['horizontal', 'vertical'] },
          defaultValue: 'horizontal',
        },
        {
          name: 'labelStyle',
          title: { label: '标签样式', tip: 'labelStyle | 标签样式' },
          propType: 'object',
          setter: 'JsonSetter',
          supportVariable: true,
        },
        {
          name: 'valueStyle',
          title: { label: '值样式', tip: 'valueStyle | 值样式' },
          propType: 'object',
          setter: 'JsonSetter',
          supportVariable: true,
        },
      ],
    },
  ],
  configure: {
    component: {
      isContainer: true,
      nestingRule: { childWhitelist: [], parentWhitelist: [] },
    },
    supports: { style: true },
    advanced: {
      callbacks: {
        onNodeRemove: (removedNode, currentNode) => {
          if (!removedNode || !currentNode) {
            return;
          }
          const { children } = currentNode;
          // 若无children,则说明当前P组件内已为空,需要删除P组件本身
          if (children && children.length === 0) {
            currentNode.remove();
          }
        },
      },
    },
  },
};