import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
import { uuid } from '../_utils/utils';
import snippets from './snippets';
const SegmentedMeta: ComponentMetadata = {
  "componentName": "Segmented",
  "title": "分段器",
  "docUrl": "",
  "screenshot": "",
  "devMode": "proCode",
  "npm": {
    "package": "@pisell/materials",
    "version": "3.0.1",
    "exportName": "Segmented",
    "main": "src/index.tsx",
    "destructuring": true,
    "subName": ""
  },
  "configure": {
    "props": [
      {
        name: 'block',
        title: { label: '将宽度调整为父元素宽度的选项' },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
      },
      {
        name: 'className',
        title: { label: 'className', tip: 'className' },
        propType: 'string',
        setter: 'StringSetter',
      },
      {
        name: 'defaultValue',
        title: { label: '默认值', tip: '默认内容' },
        propType: 'string',
        setter: 'StringSetter',
      },
      {
        name: 'value',
        title: { label: '当前值', tip: '当前值' },
        propType: 'string',
        setter: 'StringSetter'
      },
      {
        name: 'disabled',
        title: { label: '是否禁用' },
        propType: 'bool',
        defaultValue: false,
        setter: 'BoolSetter',
      },
      {
        name: 'size',
        title: { label: '控件大小', tip: '控件大小' },
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                title: '大',
                value: 'large',
              },
              {
                title: '中',
                value: 'middle',
              },
              {
                title: '小',
                value: 'small',
              },
            ],
          },
        },
        propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
        defaultValue: 'middle',
      },
      {
        name: 'options',
        title: { label: '可选项', tip: '可选项' },
        propType: {
          type: 'arrayOf',
          value: {
            type: 'shape',
            value: [
              {
                name: 'label',
                propType: 'string',
                description: '选项名',
                defaultValue: '选项名',
              },
              {
                name: 'value',
                propType: ['string', 'number'],
                description: '选项值',
                defaultValue: '选项值',
              },
              {
                name: 'disabled',
                propType: 'bool',
                description: '是否禁用',
                defaultValue: false,
              },
            ],
          },
        },
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'label',
                      title: '选项名',
                      setter: ['StringSetter', 'PisellI18nSetter', 'VariableSetter'],
                      isRequired: true
                    },
                    {
                      name: 'value',
                      title: '选项值',
                      setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
                      isRequired: true
                    },
                    {
                      name: 'disabled',
                      title: '是否禁用',
                      setter: ['BoolSetter', 'VariableSetter'],
                    },
                  ],
                },
              },
              initialValue: () => {
                return {
                  label: '选项名',
                  value: uuid(),
                  disabled: false,
                };
              },
            },
          },
        },
      },
    ],
    "supports": {
      style: true,
      events: [
        {
          name: 'onChange',
          template:
            "onChange(event,${extParams}){\n// 选项变化时的回调函数\nconsole.log('onChange',event);}",
        },
      ]
    },
    "component": {}
  }
};


export default {
  ...SegmentedMeta,
  snippets
};