import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const StepsMeta: IPublicTypeComponentMetadata = {
  componentName: 'Steps',
  title: 'Steps',
  group: '原子组件',
  category: '步骤类',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'yl-ssa-lowcode-antd-comps',
    version: '0.1.42',
    exportName: 'Steps',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  props: [
    {
      name: 'items',
      title: {
        label: '菜单项',
        tip: `举例:{
          label: 'Navigation Two',
          key: 'app',
          icon: <AppstoreOutlined />,
          category:"Menu.Item",//类型
          disabled: true,//是否禁用
          children: []
        }`,
      },
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: {
            componentName: 'ObjectSetter',
            props: {
              config: {
                items: [
                  {
                    name: 'title',
                    title: { label: '标题', tip: '标题' },
                    setter: 'StringSetter',
                  },
                  {
                    name: 'subTitle',
                    title: { label: '子标题', tip: '子标题' },
                    setter: 'StringSetter',
                  },
                  {
                    name: 'description',
                    title: { label: '步骤描述', tip: '步骤描述' },
                    setter: 'StringSetter',
                  },
                  {
                    name: 'disabled',
                    title: { label: '是否禁用', tip: '是否为禁用状态' },
                    setter: 'BoolSetter',
                  },
                  // {
                  //   name: 'icon',
                  //   title: {
                  //     label: '自定义渲染',
                  //     tip:
                  //       'render | 插槽内的物料表达式可通过this.record获取当前行数据，this.index获取索引',
                  //   },
                  //   propType: 'func',
                  //   setter: [
                  //     {
                  //       componentName: 'SlotSetter',
                  //       title: '单元格插槽',
                  //       initialValue: {
                  //         type: 'JSSlot',
                  //         params: ['text', 'record', 'index'],
                  //         value: [],
                  //       },
                  //     },
                  //     'VariableSetter',
                  //   ],
                  // },
                  {
                    name: 'iconShow',
                    title: { label: '图标', tip: '图标' },
                    setter: 'BoolSetter',
                  },
                  {
                    name: 'status',
                    title: { label: '状态', tip: '状态' },
                    setter: [
                      {
                        componentName: 'RadioGroupSetter',
                        props: {
                          options: [
                            {
                              title: 'wait',
                              value: 'wait',
                            },
                            {
                              title: 'process',
                              value: 'process',
                            },
                            {
                              title: 'finish',
                              value: 'finish',
                            },
                            {
                              title: 'error',
                              value: 'error',
                            },
                          ],
                        },
                      },
                      'VariableSetter',
                    ],
                  },
                ],
              },
            },
            initialValue: () => {
              return {
                title: 'In Progress',
                subTitle: 'Left 00:00:08',
                description: 'This is a description.',
                iconShow: false,
              };
            },
          },
        },
      },
    },
    {
      name: 'className',
      title: { label: '步骤条类名', tip: '步骤条类名' },
      propType: 'string',
    },
    {
      name: 'type',
      title: {
        label: '类型',
        tip: '步骤条类型，有 `default` 和 `navigation` 两种',
      },
      propType: { type: 'oneOf', value: ['default', 'navigation'] },
      defaultValue: 'default',
    },
    {
      name: 'current',
      title: {
        label: '当前步骤',
        tip: '指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态',
      },
      propType: 'number',
    },
    {
      name: 'direction',
      title: {
        label: '步骤条方向',
        tip: '指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向',
      },
      propType: {
        type: 'oneOf',
        value: ['horizontal', 'vertical'],
      },
    },
    {
      name: 'labelPlacement',
      title: {
        label: '标签放置位置',
        tip: '指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方',
      },
      propType: {
        type: 'oneOf',
        value: ['horizontal', 'vertical'],
      },
      defaultValue: 'horizontal',
    },
    {
      name: 'progressDot',
      title: {
        label: '点状步骤条',
        tip: '点状步骤条，可以设置为一个 func',
      },
      propType: { type: 'oneOfType', value: ['bool', 'func'] },
    },
    {
      name: 'size',
      title: {
        label: '尺寸',
        tip: '指定大小',
      },
      propType: {
        type: 'oneOf',
        value: ['default', 'small'],
      },
      defaultValue: 'default',
    },
    {
      name: 'status',
      title: {
        label: '当前步骤状态',
        tip: '指定当前步骤的状态，可选 `wait` `process` `finish` `error`',
      },
      propType: {
        type: 'oneOf',
        value: ['wait', 'process', 'finish', 'error'],
      },
      defaultValue: 'process',
    },
    {
      name: 'initial',
      title: {
        label: '起始序号',
        tip: '起始序号，从 0 开始记数',
      },
      propType: 'number',
      defaultValue: 0,
    },
  ],
  configure: {
    component: {
      isContainer: true,
    },
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template:
            "onChange(current,${extParams}){\n// 点击切换步骤时触发\nconsole.log('onChange',current);}",
        },
      ],
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '步骤条',
    screenshot: require('./__screenshots__/steps.png'),
    schema: {
      componentName: 'Steps',
      props: {
        current: 1,
        items: [
          {
            title: 'Finished',
            description: 'This is a description.',
            iconShow: false,
          },
          {
            title: 'In Progress',
            subTitle: 'Left 00:00:08',
            description: 'This is a description.',
            iconShow: false,
          },
          {
            title: 'Waiting',
            description: 'This is a description.',
            iconShow: false,
          },
        ],
      },
      children: [
        {
          componentName: 'Icon',
          props: {
            type: 'AppstoreOutlined',
            size: 20,
          },
        },
      ],
    },
  },
];

export default {
  ...StepsMeta,
  snippets,
};