import snippets from "./snippets";

export default {
  snippets,
  componentName: "DatePicker.RangePicker",
  title: "日期区间选择",
  category: "表单",
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.1",
    exportName: "DatePicker",
    main: "src/index.tsx",
    destructuring: true,
    subName: "RangePicker",
  },
  configure: {
    props: [
      {
        title: "值设置",
        display: "block",
        type: "group",
        items: [
          {
            name: "defaultValue",
            title: {
              label: "默认值",
              tip: "defaultValue | 默认值",
            },
            propType: "object",
            setter: "JsonSetter",
          },
          {
            name: "value",
            title: {
              label: "当前值",
              tip: "value | 当前值",
            },
            propType: "object",
            setter: "JsonSetter",
          },
          {
            name: "defaultCalendarMonth",
            title: {
              label: "默认展示月份",
              tip: "defaultCalendarMonth | 默认展示月份",
            },
            propType: "object",
            setter: "JsonSetter",
          },
        ],
      },
      {
        title: "功能选项",
        display: "block",
        type: "group",
        items: [
          {
            name: "format",
            title: {
              label: "日期格式",
              tip: "format | 展示的日期格式，配置参考 day.js",
            },
            propType: "string",
            setter: "StringSetter",
          },
          {
            name: "placeholder",
            title: {
              label: "提示文字",
              tip: "placeholder | 输入框提示文字",
            },
            propType: "string",
            setter: "PisellI18nSetter",
          },
          {
            name: "allowClear",
            title: {
              label: "支持清除",
              tip: "allowClear | 是否允许清除",
            },
            propType: "bool",
            defaultValue: true,
            setter: "BoolSetter",
          },
          {
            name: "inputReadOnly",
            title: {
              label: "设置输入框为只读",
              tip: "inputReadOnly | 设置输入框为只读",
            },
            propType: "bool",
            setter: "BoolSetter",
          },
          {
            name: "bordered",
            title: {
              label: "显示边框",
              tip: "bordered | 是否有边框",
            },
            propType: "bool",
            defaultValue: true,
            setter: "BoolSetter",
          },
          {
            name: 'open',
            title: {
              label: '弹层是否展开',
              tip: 'open | 控制弹层是否展开',
            },
            propType: 'bool',
            setter: 'BoolSetter',
          },
          {
            name: 'clearEndOnSelection',
            title: {
              label: '再次选择日期时是否清除结束时间',
              tip: 'open | 再次选择日期时是否清除结束时间',
            },
            propType: 'bool',
            setter: 'BoolSetter',
          },
          {
            name: "showTime",
            title: {
              label: "时间选择",
              tip: "showTime | 时间选择",
            },
            propType: "bool",
            defaultValue: false,
            setter: "BoolSetter",
          },
          {
            name: "popupWidth",
            title: {
              label: "弹窗宽度",
              tip: "popupWidth | 弹窗宽度",
            },
            propType: "number",
            setter: "NumberSetter",
          },
          {
            name: "suffixIcon",
            title: {
              label: {
                type: "i18n",
                "en-US": "suffixIcon",
                "zh-CN": "后缀图标",
              },
              tip: "后缀图标 | suffixIcon",
            },
            propType: "node",
            setter: {
              componentName: "SlotSetter",
              defaultValue: false,
              initialValue: {
                type: "JSSlot",
                value: [
                  {
                    componentName: "Icon",
                    props: {
                      type: "SmileOutlined",
                      size: 20,
                      rotate: 0,
                      spin: false,
                    },
                  },
                ],
              },
            },
          },
          {
            name: "isHideCustomSelect",
            title: {
              label: "是否隐藏自定义范围",
              tip: "isHideCustomSelect | 是否隐藏自定义范围",
            },
            propType: "bool",
            defaultValue: false,
            setter: "BoolSetter",
          },
          {
            name: "endDateDays",
            title: {
              label: "结束时间在开始时间的几天之后",
              tip: "endDateDays | 结束时间在开始时间的几天之后",
            },
            defaultValue: 0,
            propType: "number",
            setter: "NumberSetter",
          },
        ],
      },
      {
        title: "高级",
        display: "block",
        type: "group",
        items: [
          {
            name: "presets",
            title: {
              label: "预设范围",
              tip: "ranges | 预设时间范围快捷选择",
            },
            propType: "object",
            setter: "JsonSetter",
          },
          {
            name: "disabledDate",
            title: {
              label: "不可选日期",
              tip: "disabledDate | 不可选择的日期",
            },
            propType: "func",
            setter: [
              {
                componentName: "FunctionSetter",
                props: {
                  template:
                    "disabledDate(currentDate,${extParams}){\n// 设置不可选择的日期\nreturn true\n}",
                },
              },
              "VariableSetter",
            ],
          },
          {
            name: "disablePortal",
            title: {
              label: "渲染位置",
              tip: "disablePortal | true dom结构在当前结构下 false 追加到body",
            },
            propType: "bool",
            defaultValue: false,
            setter: "BoolSetter",
          },
          {
            name: "returnShortcutString",
            title: {
              label: "使用快捷筛选时value返回快捷字符串",
              tip: "returnShortcutString | 使用快捷筛选时返回快捷字符串",
            },
            propType: "bool",
            defaultValue: false,
            setter: "BoolSetter",
          },
        ],
      },
      // {
      //   name: 'renderExtraFooter',
      //   title: { label: '在面板中添加额外的页脚', tip: '在面板中添加额外的页脚' },
      //   propType: 'func',
      // },
      {
        name: 'className',
        title: { label: '选择器 className', tip: '选择器 className' },
        propType: 'string',
      },
      // {
      //   name: 'dropdownClassName',
      //   title: {
      //     label: '额外的弹出日历 className',
      //     tip: '额外的弹出日历 className',
      //   },
      //   propType: 'string',
      // },
      // {
      //   name: 'getPopupContainer',
      //   title: {
      //     label: '定义浮层的容器，默认为 body 上新建 div',
      //     tip: '定义浮层的容器，默认为 body 上新建 div',
      //   },
      //   propType: 'func',
      // },
      // {
      //   name: 'locale',
      //   title: { label: '国际化配置', tip: '国际化配置' },
      //   propType: 'object',
      // },
      // {
      //   name: 'popupStyle',
      //   title: { label: '额外的弹出日历样式', tip: '额外的弹出日历样式' },
      //   propType: 'CSSProperties',
      //   defaultValue: '{}',
      // },
      // {
      //   name: 'style',
      //   title: { label: '自定义输入框样式', tip: '自定义输入框样式' },
      //   propType: 'CSSProperties',
      //   defaultValue: '{}',
      // },
    ],
    supports: {
      style: true,
      events: [
        {
          name: "onChange",
          template:
            "onChange(dates,dateStrings,${extParams}){\n// 日期范围发生变化的回调\nconsole.log('onChange',dates,dateStrings);}",
        },
        {
          name: "onDateChange",
          template:
            "onDateChange(dates,${extParams}){\n// 日期改变回调 此处只为了组件外拿到当前日期项进行状态操作 通常情况下只使用onChange来拿value\nconsole.log('dates',dates);}",
        },
        {
          name: "onMonthChange",
          template:
            "onMonthChange(value,${extParams}){\n// 日历面板切换的回调\nconsole.log('onMonthChange',value);}",
        },
        {
          name: "onClose",
          template:
            "onClose(${extParams}){\n// 关闭回调\nconsole.log('onClose');}",
        },
        {
          name: "onOpen",
          template:
            "onOpen(${extParams}){\n// 打开回调\nconsole.log('onOpen');}",
        },
      ],
    },
  },
};