import snippets from './snippets';
import { border, color, padding, pxProp } from '../_utils/css';

export default {
  snippets,
  componentName: 'AMSelector',
  docUrl: 'https://mobile.ant.design/zh/components/selector',
  title: '选择组',
  category: '表单',
  group: '基础组件',
  priority: 1,
  props: [
    {
      name: 'options',
      title: { label: '选项', tip: 'options | 选项' },
      propType: 'object',
      setter: 'JsonSetter',
      supportVariable: true,
    },
    {
      name: 'defaultValue',
      title: { label: '默认值', tip: '默认选中值' },
      propType: { type: 'arrayOf', value: 'string' },
      defaultValue: [],
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: {
            componentName: 'StringSetter',
          },
        },
      },
      supportVariable: true,
    },
    {
      name: 'value',
      title: { label: '当前值', tip: '当前选中的选项' },
      propType: { type: 'arrayOf', value: 'string' },
      setter: {
        componentName: 'ArraySetter',
        props: {
          itemSetter: {
            componentName: 'StringSetter',
          },
        },
      },
      supportVariable: true,
    },
    {
      name: 'disabled',
      title: { label: '是否禁用', tip: '是否为禁用状态' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      name: 'showCheckMark',
      title: { label: '是否显示对勾角标', tip: 'showCheckMark | 是否显示对勾角标' },
      propType: 'bool',
      defaultValue: true,
      setter: 'BoolSetter',
    },
    {
      name: 'fieldNames',
      title: { label: '自定义字段', tip: '自定义options中label、value、disabled的字段' },
      propType: 'object',
      setter: 'JsonSetter',
      supportVariable: true,
    },
    {
      name: 'multiple',
      title: { label: '是否允许多选', tip: 'multiple | 是否允许多选' },
      propType: 'bool',
      defaultValue: false,
      setter: 'BoolSetter',
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        border('', '边框样式'),
        border('checked', '边框样式'),
        color('checked', '选中背景色'),
        color('checked-text', '选中文字颜色'),
        color('', '背景色'),
        padding('', '选项的内边距'),
        color('text', '文字颜色'),
        pxProp('gap', '间距', '间距大小，仅在 columns 存在时生效'),
        pxProp('gap-vertical', '水平间距', '水平方向的间距大小，仅在 columns 存在时生效'),
        pxProp('gap-horizontal', '垂直间距', '垂直方向的间距大小，仅在 columns 存在时生效'),
      ],
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          description: '选项变化时的回调',
          template:
            "\tonChange(value, extend, ${extParams}){\n\t\t// 选项变化时的回调\n\t\tconsole.log('onChange',value, extend);\n\t}\n",
        },
      ],
    },
  },
};