import snippets from './snippets';
import { uuid } from '../_utils/utils';
import { border, width } from '../_utils/css';

export default {
  snippets,
  componentName: 'AMForm',
  docUrl: 'https://mobile.ant.design/zh/components/form',
  title: '表单容器',
  category: '表单',
  group: '基础组件',
  props: [
    {
      name: 'ref',
      title: {
        label: 'ref',
        tip: "ref | 通过 this.$('xxx') 获取到组件实例",
      },
      defaultValue: () => {
        return `form_${uuid()}`;
      },
      setter: 'StringSetter',
      supportVariable: true,
    },
    {
      name: 'name',
      title: {
        label: '表单名称',
        tip: '表单名称，会作为表单字段 `id` 前缀使用',
      },
      propType: 'string',
      setter: 'StringSetter',
      supportVariable: true,
    },
    {
      name: 'values',
      title: { label: '表单数据源', tip: '表单数据源' },
      propType: 'object',
      setter: 'JsonSetter',
      supportVariable: true,
    },
    {
      name: 'initialValues',
      title: { label: '表单默认值', tip: '表单默认值' },
      propType: 'object',
      setter: 'JsonSetter',
      supportVariable: true,
    },
    {
      name: 'requiredMarkStyle',
      title: { label: '必填标记', tip: '必填标记' },
      propType: {
        type: 'oneOf',
        value: ['asterisk', 'text-required', 'text-optional', 'none'],
      },
      setter: [
        {
          componentName: 'SelectSetter',
          props: {
            options: [
              {
                title: '星号',
                value: 'asterisk',
              },
              {
                title: '显示必填',
                value: 'text-required',
              },
              {
                title: '显示选填',
                value: 'text-optional',
              },
              {
                title: '不显示',
                value: 'none',
              },
            ],
          },
        },
        'VariableSetter',
      ],
      defaultValue: 'asterisk',
    },
    {
      name: 'preserve',
      title: {
        label: '删除时保留值',
        tip: '当字段被删除时保留字段值',
      },
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter',
      supportVariable: true,
    },
    {
      name: 'footer',
      title: {
        label: '表尾',
        tip: 'footer | 表单尾部的内容',
      },
      propType: {
        type: 'oneOfType',
        value: ['node'],
      },
      setter: {
        componentName: 'SlotSetter',
        initialValue: {
          type: 'JSSlot',
          visible: false,
          value: [
            {
              componentName: 'AMButton',
              props: {
                type: 'submit',
                color: 'primary',
                children: '提交',
                block: true,
              },
            },
          ],
        },
      },
    },
    {
      type: 'group',
      title: '布局',
      display: 'accordion',
      items: [
        {
          name: 'mode',
          title: {
            label: '显示模式',
            tip: '支持默认和卡片两种模式',
          },
          setter: {
            componentName: 'RadioGroupSetter',
            props: {
              options: [
                {
                  title: '默认',
                  value: 'default',
                },
                {
                  title: '卡片',
                  value: 'card',
                },
              ],
            },
          },
          propType: { type: 'oneOf', value: ['default', 'card'] },
          defaultValue: 'default',
        },
        {
          name: 'layout',
          title: { label: '表单布局', tip: '表单布局' },
          setter: {
            componentName: 'RadioGroupSetter',
            props: {
              options: [
                {
                  title: '水平',
                  value: 'horizontal',
                },
                {
                  title: '垂直',
                  value: 'vertical',
                },
              ],
            },
          },
          propType: { type: 'oneOf', value: ['horizontal', 'vertical'] },
          defaultValue: 'horizontal',
        },
      ],
    },
    {
      name: 'disabled',
      title: { label: '是否禁用', tip: '是否为禁用状态' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'validateMessages',
      title: { label: '验证提示模板', tip: '验证提示模板' },
      setter: 'JsonSetter',
      defaultValue: { required: '${label}不能为空' },
    },
    {
      name: 'validateTrigger',
      title: { label: '校验时机', tip: '所有字段校验触发时机' },
      propType: {
        type: 'oneOf',
        value: ['onChange', 'onBlur'],
      },
      setter: {
        componentName: 'RadioGroupSetter',
        props: {
          options: [
            {
              title: '当前值变化时',
              value: 'onChange',
            },
            {
              title: '失去焦点时',
              value: 'onBlur',
            },
          ],
        },
      },
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        border('top', '顶部边框样式'),
        border('bottom', '底部边框样式'),
        border('inner', '分割线样式'),
        width('prefix', '表单项标签宽度'),
      ],
    },
  ],
  configure: {
    component: { isContainer: true },
    supports: {
      style: true,
      className: true,
      events: [
        {
          name: 'onFinish',
          description: '提交表单且数据验证成功后回调事件',
          template:
            "\tonFinish(values,${extParams}){\n\t\t// 提交表单且数据验证成功后回调事件\n\t\tconsole.log('onFinish',values);\n\t}\n",
        },
        {
          name: 'onFinishFailed',
          description: '提交表单且数据验证失败后回调事件',
          template:
            "\tonFinishFailed({values,errorFields,outOfDate},${extParams}){\n\t\t// 提交表单且数据验证失败后回调事件\n\t\tconsole.log('onFinishFailed',values, errorFields, outOfDate);\n\t}\n",
        },
        {
          name: 'onFieldsChange',
          description: '字段更新时触发回调事件',
          template:
            "\tonFieldsChange(changedFields,allFields,${extParams}){\n\t\t// 字段更新时触发回调事件\n\t\tconsole.log('onFieldsChange',changedFields,allFields);\n\t}\n",
        },
        {
          name: 'onValuesChange',
          description: '字段值更新时触发回调事件',
          template:
            "\tonValuesChange(changedValues,allValues,${extParams}){\n\t\t// 字段值更新时触发回调事件\n\t\tconsole.log('onValuesChange',changedValues,allValues);\n\t}\n",
        },
      ],
    },
    advanced: {
      callbacks: {
        onNodeAdd: (dragment, currentNode) => {
          const comps = [
            'Input',
            'Select',
            'Radio',
            'Checkbox',
            'Switch',
            'Upload',
            'Datepicker',
            'Rate',
            'Transfer',
          ];
          if (!dragment || !dragment.componentMeta || !dragment.componentMeta.npm) {
            return;
          }
          if (
            !dragment.componentMeta.npm.package ||
            dragment.componentMeta.npm.package.indexOf('@alilc/antd-lowcode-materials') === -1 ||
            comps.every((comp) => dragment.componentName.indexOf(comp) === -1)
          ) {
            return;
          }

          // 为目标元素包裹一层P
          const layoutPNode = currentNode.document.createNode({
            componentName: 'Form.Item',
            props: {
              label: '表单项: ',
            },
            children: [dragment.exportSchema()],
          });
          // 当前dragment还未添加入node子节点,需要setTimeout处理
          setTimeout(() => {
            currentNode.replaceChild(
              dragment,
              layoutPNode.exportSchema(),
              // 避免生成新的 nodeId
              { reserveSchemaNodeId: true },
            );
          }, 1);
        },
      },
    },
  },
};