import snippets from './snippets';
import {  color, fontSize, height, pxProp, } from '../_utils/css';

export default {
  componentName: 'AMNoticeBar',
  docUrl: 'https://mobile.ant.design/zh/components/notice-bar',
  title: '通告栏',
  category: '引导提示',
  group: '基础组件',
  props: [
    {
      name: 'closeable',
      title: '是否可关闭',
      propType: 'bool',
      setter: 'BoolSetter',
      defaultValue:false,
    },
    {
        name: 'icon',
        title:'左侧广播图标',
        propType: 'node', 
        setter: 'SlotSetter', 
      },
    {
      name: 'color',
      title: '通告栏的类型',
      propType: {
        type: 'oneOf',
        value: ['default', 'alert','error','info'],
    },
    setter: [
        {
            componentName: 'SelectSetter',
            props: {
                options: [
                    {
                        title: 'default',
                        value: 'default',
                    },
                    {
                        title: 'alert',
                        value: 'alert',
                    },
                    {
                        title: 'error',
                        value: 'error',
                    },
                    {
                        title: 'info',
                        value: 'info',
                    }
                ],
            },
        },
        'VariableSetter',
    ],
    defaultValue: 'default',
    },
    {
      name: 'content',
      title: '公告内容',
      propType: {
        type: 'oneOfType',
        value: ['node', 'string'],
      },
      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
    },
    {
      name: 'extra',
      title: '额外操作区域，显示在关闭按钮左侧',
      propType: {
        type: 'oneOfType',
        value: ['node', 'string'],
      },
      setter: ['SlotSetter', 'StringSetter', 'VariableSetter'],
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        color('background','背景色'),
        color('border','边框颜色'),
        fontSize("","文字字号"),
        height("","整体高度"),
        pxProp("icon-font-size","左侧图标的字号"),
        color('text', '文字颜色	'),
      ],
    },
  ],
  configure: {
    supports: {
      style: true,
    },
  },
  snippets,
};