/*
 * @Author: wenrongyun wenrongyun@benlaixian.onaliyun.com
 * @Date: 2022-05-17 17:35:11
 * @LastEditors: wenrongyun wenrongyun@benlaixian.onaliyun.com
 * @LastEditTime: 2022-05-20 14:18:18
 * @FilePath: /lowcode-materials/lowcode/pro-form/meta.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { uuid } from "../_utils/utils";
import snippets from "./snippets";
import { createElement } from 'react';


export default {
  snippets,
  componentName: "BLProForm",
  title: "提交表单",
  category: "页面展示",
  group: "精选组件",
  configure: {
    component: {
      isContainer: true,
      isMinimalRenderUnit: true,
      nestingRule: {
        childWhitelist: /ProForm.*/i,
      },
    },
    props: [
      {
        name: 'globalConfig',
        title: '全局配置',
        type: 'group',
        display: 'accordion',
        items: [
          {
            name: 'getState',
            title: { label: '获取数据', tip: '获取数据' },
            propType: 'func',
            setter: {
              componentName: 'FunctionSetter',
            },
            condition: () => false,
          },
          {
            name: 'setState',
            title: { label: '设置数据', tip: '设置数据' },
            propType: 'func',
            setter: {
              componentName: 'FunctionSetter',
            },
            condition: () => false,
          },
          {
            name: 'formKey',
            title: { label: 'form标识', tip: 'form标识' },
            propType: 'string',
            setter: "StringSetter",
          },
          {
            name: 'columns',
            title: '布局',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '一列',
                    value: 1,
                  },
                  {
                    title: '二列',
                    value: 2,
                  },
                  {
                    title: '三列',
                    value: 3,
                  },
                  {
                    title: '四列',
                    value: 4,
                  },
                ],
              },
              initialValue: 4
            },

          },
          {
            name: 'labelAlign',
            title: {
              label: {
                type: 'i18n',
                zh_CN: '标签位置',
                en_US: 'Label Align',
              },
              tip: {
                type: 'i18n',
                zh_CN: '属性: labelAlign | 说明: 标签的位置\n@enumdesc 上, 左, 内',
                en_US: 'prop: labelAlign | description: label align',
              },
            },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '上',
                    value: 'top',
                  },
                  {
                    title: '左',
                    value: 'left',
                  },
                  {
                    title: '内',
                    value: 'inset',
                  },
                ],
              },
            },
            defaultValue: 'top',
          },
          {
            name: 'labelCol.fixedSpan',
            title: '标题宽度',
            condition: (target) => {
              return target.parent.getPropValue('labelAlign') === 'left';
            },
            setter: {
              componentName: 'NumberSetter',
              props: {
                min: 0,
                max: 24,
              },
            },
            defaultValue: 4
          },
          {
            name: 'labelCol.offset',
            title: '标题偏移',
            condition: (target) => {
              return target.parent.getPropValue('labelAlign') === 'left';
            },
            setter: {
              componentName: 'NumberSetter',
              props: {
                min: 0,
                max: 24,
              },
            },
          },
          {
            name: 'wrapperCol.span',
            title: '内容宽度',
            condition: (target) => {
              const labelAlign = target.parent.getPropValue('labelAlign');
              return labelAlign === 'left' || labelAlign === 'inset';
            },
            setter: {
              componentName: 'NumberSetter',
              props: {
                min: 0,
                max: 24,
              },
            },
          },
          {
            name: 'wrapperCol.offset',
            title: '内容偏移',
            condition: (target) => {
              const labelAlign = target.parent.getPropValue('labelAlign');
              return labelAlign === 'left' || labelAlign === 'inset';
            },
            setter: {
              componentName: 'NumberSetter',
              props: {
                min: 0,
                max: 24,
              },
            },
          },
          {
            name: 'labelTextAlign',
            title: {
              label: {
                type: 'i18n',
                zh_CN: '标签对齐',
                en_US: 'Text Align',
              },
              tip: {
                type: 'i18n',
                zh_CN: '属性: labelTextAlign | 说明: 标签的左右对齐方式\n@enumdesc 左, 右',
                en_US: 'prop: labelTextAlign | description: label text align',
              },
            },
            condition: (target) => {
              return target.parent.getPropValue('labelAlign') === 'left';
            },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: ['left', 'right'],
              },
            },
            defaultValue: 'right',
          },
        ],
      },
      {
        name: '!items',
        title: '表单项',
        display: 'accordion',
        extraProps: {
          getValue(target: any) {
            const nodes = target?.node?.children?.map((child: any = {}) => {
              const { propsData, componentName } = child;
              const { formItemProps, ...componentProps } = propsData;
              return { componentName, componentProps, ...formItemProps };
            });
            return nodes;
          },
          setValue(target: any, value) {
            const { node } = target;
            const map = {};
            const adderMap = {};
            if (!Array.isArray(value)) {
              value = [];
            }
            value.forEach((item: any = {}) => {
              item.componentName = item.componentName || 'BLProFormInput';
              map[item.primaryKey] = item;
              adderMap[item.primaryKey] = item;
            });

            node.children.mergeChildren(
              (child) => {
                const targetKey =
                  child.getPropValue('primaryKey') ||
                  child.getPropValue('formItemProps').primaryKey;
                if (map?.[targetKey]) {
                  const target = map[targetKey];
                  const { componentName, componentProps, ...formItemProps } = target;
                  const props = {
                    formItemProps,
                    ...componentProps,
                  };
                  node.replaceChild(child, {
                    componentName,
                    props,
                  });
                  delete adderMap[targetKey];
                  return false;
                }
                return true;
              },
              () => {
                const items = [];
                for (const key in adderMap) {
                  if (Object.hasOwnProperty.call(adderMap, key)) {
                    const { componentName, componentProps, ...formItemProps } = adderMap[key] || {};
                    const props = { componentProps, formItemProps };
                    items.push({
                      componentName,
                      props,
                    });
                  }
                }
                return items;
              },
              (firstChild, secondeChild) => {
                const first = value.findIndex(
                  (item) =>
                    item.primaryKey === firstChild.getPropValue('primaryKey') ||
                    firstChild.getPropValue('formItemProps').primaryKey,
                );
                const seconde = value.findIndex(
                  (item) =>
                    item.primaryKey === secondeChild.getPropValue('primaryKey') ||
                    secondeChild.getPropValue('formItemProps').primaryKey,
                );
                return first - seconde;
              },
            );
          },
        },
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              initialValue: () => {
                return {
                  componentName: 'BLProFormInput',
                  primaryKey: uuid(),
                  label: '表单项123',
                  size: 'medium',
                  colSpan: 1,
                  fullWidth: true,
                };
              },
              props: {
                config: {
                  items: [
                    {
                      name: 'componentName',
                      title: '表单项组件',
                      display: 'inline',
                      defaultValue: 'BLProFormInput',
                      important: true,
                      setter: {
                        componentName: 'SelectSetter',
                        props: {
                          options: [
                            {
                              title: '输入框',
                              value: 'BLProFormInput',
                            },
                            {
                              label: "密码框",
                              value: "BLProFormInputPassWord"
                            },
                            {
                              label: "搜索文本框",
                              value: "BLProFormSearch"
                            },
                            {
                              label: "数字输入框",
                              value: "BLProFormNumberPicker"
                            },
                            {
                              label: "选择器",
                              value: "BLProFormSelect"
                            },
                            {
                              label: "级联选择器",
                              value: "BLProFormCascader"
                            },
                            {
                              label: "日期选择框",
                              value: "BLProFormDatePicker"
                            },
                            {
                              label: "时间选择框",
                              value: "BLProFormTimePicker"
                            },
                            {
                              label: "日期区间选择",
                              value: "BLProFormDatePickerRangePicker"
                            },
                            {
                              label: "树型选择控件",
                              value: "BLProFormTree"
                            },
                            {
                              label: "多行文本",
                              value: "BLProFormInputTextArea"
                            },
                            {
                              label: "单选框",
                              value: "BLProFormRadio"
                            },
                            {
                              label: "复选按钮组",
                              value: "BLProFormCheckbox"
                            },
                            {
                              label: "评分",
                              value: "BLProFormRating"
                            },

                            // {
                            //   label: "图片",
                            //   value: "BLProFormImage"
                            // },
                            {
                              label: "文件",
                              value: "BLProFormUpload"
                            }
                          ],
                        },
                      },
                    },
                    {
                      name: 'primaryKey',
                      title: '编号',
                      condition: () => false,
                      setter: 'StringSetter',
                      defaultValue: () => uuid(),
                    },
                    {
                      name: 'name',
                      title: {
                        label: {
                          type: 'i18n',
                          zh_CN: '表单标识',
                          en_US: 'Name',
                        },
                        tip: {
                          type: 'i18n',
                          zh_CN: '属性: name | 说明: 表单标识，用于表单校验',
                          en_US: 'prop: name | description: form item name',
                        },
                      },
                      setter: 'StringSetter',
                    },
                    {
                      name: 'label',
                      title: '标题',
                      display: 'inline',
                      defaultValue: '表单项',
                      setter: 'StringSetter',
                      important: true,
                      supportVariable: true,
                    },
                    {
                      name: 'size',
                      title: {
                        label: '尺寸',
                        tip: '单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。',
                      },
                      setter: {
                        componentName: 'RadioGroupSetter',
                        props: {
                          options: ['small', 'medium', 'large'],
                        },
                      },
                      defaultValue: 'medium',
                    },
                    {
                      name: 'columnSpan',
                      title: '表单项宽度',
                      initialValue: 1,
                      setter: {
                        componentName: 'RadioGroupSetter',
                        props: {
                          options: [
                            {
                              title: '一列',
                              value: 1,
                            },
                            {
                              title: '二列',
                              value: 2,
                            },
                            {
                              title: '三列',
                              value: 3,
                            },
                            {
                              title: '四列',
                              value: 4,
                            },
                          ],
                        },
                      },
                    },
                    {
                      name: 'labelTip.enable',
                      title: '标题提示',
                      setter: {
                        componentName: 'BoolSetter',
                      },
                    },
                    {
                      name: 'labelTip.icon',
                      title: '提示图标',
                      setter: {
                        componentName: 'IconSetter',
                      },
                    },
                    {
                      name: 'labelTip.content',
                      title: '提示内容',
                      setter: {
                        componentName: 'StringSetter',
                      },
                    },
                    {
                      name: 'required',
                      defaultValue: false,
                      title: {
                        label: '是否必填',
                        tip: 'required | 是否必填',
                      },
                      setter: {
                        componentName: 'BoolSetter',
                      },
                      extraProps: {},
                    },
                    {
                      name: 'fullWidth',
                      defaultValue: true,
                      title: {
                        label: '宽度占满',
                        tip: '单个 Item 中表单类组件宽度是否是100%',
                      },
                      setter: {
                        componentName: 'BoolSetter',
                      },
                    },
                    {
                      name: 'isPreview',
                      title: {
                        label: '预览态',
                        tip: '是否开启预览态',
                      },
                      setter: 'BoolSetter',
                    },
                    {
                      name: 'autoValidate',
                      title: {
                        label: '自动校验',
                        tip: '是否修改数据时自动触发校验',
                      },
                      setter: 'BoolSetter',
                    },
                    {
                      name: '!entry',
                      title: '组件详细配置',
                      display: 'block',
                      setter: (target) => {
                        return createElement(
                          'div',
                          {
                            onClick: () => {
                              target.node.children.get(target.parent.key).select();
                            },
                          },
                          '点击配置',
                        );
                      },
                    },
                  ],
                },
              },
            },
          },
        },
      },
      {
        title: '操作栏按钮',
        display: 'accordion',
        extraProps: {
          display: 'accordion',
          defaultCollapsed: true,
        },
        type: 'group',
        items:[
          {
            name: 'btn_newline',
            defaultValue: true,
            title: {
              label: '另起一行',
              tip: '另起一行',
            },
            setter: {
              componentName: 'BoolSetter',
            },
          },
          {
            name: 'btn_justify',
            title: { label: '按钮位置', tip: '按钮位置' },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '居左',
                    value: 'flex-start',
                  },
                  {
                    title: '居中',
                    value: 'center',
                  },
                  {
                    title: '居右',
                    value: 'flex-end',
                  },
                ],
              },
            },
            propType: { type: 'oneOf', value: ['flex-start', 'center', 'flex-end'] },
            defaultValue: 'center',
            condition: (target:any) => {
              return target.parent.getPropValue('btn_newline')
            },
          },
          {
            name: 'btn_justify_line',
            title: { label: '按钮位置', tip: '按钮位置' },
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '居左',
                    value: 'flex-start',
                  },
                  {
                    title: '居右',
                    value: 'flex-end',
                  },
                ],
              },
            },
            propType: { type: 'oneOf', value: ['flex-start',  'flex-end'] },
            defaultValue: 'flex-start',
            condition: (target:any) => {
              return !target.parent.getPropValue('btn_newline')
            },
          },
          {
            name: "formbtns",
            title: { label: "操作按钮", tip: "操作按钮" },
            extraProps: {
              display: 'plain',
            },
            setter: {
              componentName: "ArraySetter",
              props: {
                itemSetter: {
                  componentName: "ObjectSetter",
                  props: {
                    config: {
                      items: [
                        {
                          name: "btnname",
                          title: { label: "文本", tip: "btnName | 文本" },
                          propType: "string",
                          setter: "StringSetter",
                          isRequired: true,
                          defaultValue: "搜索"
                        },
                        {
                          name: "btntype",
                          propType: "string",
                          title: { label: "操作", tip: "btnType | 操作" },
                          mode: "single",
                          setter: {
                            componentName: "SelectSetter",
                            props: {
                              options: [
                                {
                                  label: "搜索",
                                  value: "submint"
                                },
                                {
                                  label: "重置",
                                  value: "reset"
                                },
                                {
                                  label: "自定义",
                                  value: "other"
                                }
                              ]
                            }
                          },
                          defaultValue: "submint",
                          isRequired: true,
                          
                        },
                       
                      ]
                    }
                  }
                }
              }
            }
          }
        ]
      },
     
    ],
    supports: {
      style: true,
      events: ['saveField', 'onSubmit', 'onChange'],
    },
  },
};