import snippets from './snippets';

export default {
  snippets,
  componentName: 'Calendar',
  title: '日历',
  category: '数据展示',
  group: "基础组件",
  props: [
    {
      name: 'defaultValue',
      title: { label: '默认值', tip: 'defaultValue | 默认展示的日期' },
      propType: 'date',
      setter: 'DateSetter',
    },
    // {
    //   name: 'dateCellRender',
    //   title: {
    //     label: '自定义日期追加渲染',
    //     tip: 'dateCellRender | 自定义渲染日期单元格，返回内容会被追加到单元格',
    //   },
    //   propType: 'func',
    // },
    // {
    //   name: 'dateFullCellRender',
    //   title: {
    //     label: '自定义渲染日期单元格，返回内容覆盖单元格',
    //     tip: 'dateFullCellRender | 自定义渲染日期单元格，返回内容覆盖单元格',
    //   },
    //   propType: 'func',
    // },
    {
      name: 'disabledDate',
      title: { label: '不可选日期', tip: 'disabledDate | 不可选择的日期' },
      propType: 'func',
    },
    {
      name: 'fullscreen',
      title: { label: '全屏显示', tip: 'fullscreen | 是否全屏显示' },
      propType: 'bool',
      defaultValue: true,
    },
    // {
    //   name: 'locale',
    //   title: { label: '国际化配置', tip: 'locale | 国际化配置' },
    //   propType: 'object',
    // },
    {
      name: 'showMode',
      title: { label: '是否默认模式', tip: 'showMode | 是否默认模式' },
      setter: 'BoolSetter',
      defaultValue: false,
    },
    {
      name: 'mode',
      title: { label: '初始模式', tip: 'mode | 初始模式' },
      propType: { type: 'oneOf', value: ['month', 'year'] },
      defaultValue: 'month',
      condition: {
        type: 'JSFunction',
        value: 'target => !!target.getProps().getPropValue("showMode")',
      },
    },
    // {
    //   name: 'monthCellRender',
    //   title: {
    //     label: '自定义渲染月单元格，返回内容会被追加到单元格',
    //     tip: 'monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格',
    //   },
    //   propType: 'func',
    // },
    // {
    //   name: 'monthFullCellRender',
    //   title: {
    //     label: '自定义渲染月单元格，返回内容覆盖单元格',
    //     tip: 'monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格',
    //   },
    //   propType: 'func',
    // },
    // {
    //   name: 'validRange',
    //   title: { label: '设置可以显示的日期', tip: 'validRange | 设置可以显示的日期' },
    //   propType: { type: 'arrayOf', value: 'object' },
    // },
    // {
    //   name: 'value',
    //   title: { label: '当前值', tip: 'value | 展示日期' },
    //   propType: 'object',
    // },
    {
      name: 'onPanelChange',
      title: { label: '日期面板变化回调', tip: 'onPanelChange | 日期面板变化回调' },
      propType: 'func',
    },
    {
      name: 'onSelect',
      title: { label: '点击选择日期回调', tip: 'onSelect | 点击选择日期回调' },
      propType: 'func',
    },
    {
      name: 'onChange',
      title: { label: '日期变化回调', tip: 'onChange | 日期变化回调' },
      propType: 'func',
    },
    // {
    //   name: 'headerRender',
    //   title: { label: '自定义头部内容', tip: 'headerRender | 自定义头部内容' },
    //   propType: 'func',
    // },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onPanelChange',
          description: '日期面板变化回调',
          template:
            "onPanelChange(date,mode,${extParams}){\n// 日期面板变化回调\nconsole.log('onPanelChange', date, mode);}",
        },
        {
          name: 'onSelect',
          description: '点击选择日期回调',
          template:
            "onSelect(date,info,${extParams}){\n// 选择日期回调，包含来源信息\nconsole.log('onSelect', date,info);}",
        },
        {
          name: 'onChange',
          description: '日期变化回调',
          template:
            "onChange(date,${extParams}){\n// 日期变化回调\nconsole.log('onChange', date);}",
        },
      ],
    },
  },
};