import { alignItems, backgroundColor, border, fontSize, lengthProp, padding, pxProp, width } from '../_utils/css';
import snippets from './snippets';

export default {
    snippets,
    componentName: 'AMCheckList',
    docUrl: 'https://mobile.ant.design/zh/components/check-list',
    title: '可勾选列表',
    category: '信息录入',
    group: '基础组件',
    props: [
        {
            name: 'activeIcon',
            title: "图标",
            propType: 'node',
            setter: 'SlotSetter',
        },
        {
            name: 'defaultValue',
            title: "默认项",
            propType: 'object',
            setter: 'JsonSetter',
            supportVariable: true,
        },
        {
            name: 'disabled',
            title: '是否禁用',
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: false,
        },
        {
            name: 'multiple',
            title: '是否允许多选',
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: false,
        },
        {
            name: 'readOnly',
            title: '只读',
            propType: 'bool',
            setter: 'BoolSetter',
            defaultValue: false,
        },
        {
            name: 'value',
            title: "选中项",
            propType: 'object',
            setter: 'JsonSetter',
            supportVariable: true,
        },
        {
            title: 'CSS变量',
            display: 'block',
            type: 'group',
            items: [
                fontSize('header', '标题字体大小'),
                fontSize('', '内容字体大小'),
                backgroundColor('active', '点击时的背景颜色'),
                padding('left', '左内边距padding'),
                padding('right', '右内边距padding'),
                border('top', '顶部边框样式'),
                border('bottom', '底部边框样式'),
                border('inner', '分割线样式'),
                alignItems('列表项的align-items', 'align-items', 'center'),
                width('prefix', '列表项左侧区域宽度'),
                pxProp('prefix-padding-right', '列表项左侧区域右边距'),
                lengthProp('extra-max-width', '列表项右侧宽度'),
            ],
        },

    ],
    configure: {
        component: {
            isContainer: true,
            nestingRule: { childWhitelist: ['AMCheckList.Item'] }
        },
        supports: {
            style: true,
            events: [
                {
                    name: 'onChange',
                    template: "onChange(string[]){\n// 选项改变时触发\nconsole.log('onChange');}",
                },
            ]
        },
    },
};