import snippets from './snippets';
import { pickerBaseEvents, pickerModalProps } from '../_utils/picker/common';

export default {
  snippets,
  componentName: 'AMModelessDatePicker',
  docUrl: 'https://mobile.ant.design/zh/components/picker#datepicker',
  title: '非模态日期选择器',
  category: '表单',
  group: '基础组件',
  props: [
    {
      name: 'render',
      title: {
        label: '内容',
        tip: 'render | 内容，可以通过this.value 获取选中值',
      },
      propType: 'func',
      setter: {
        componentName: 'SlotSetter',
        title: '内容',
        initialValue: {
          type: 'JSSlot',
          params: ['value'],
          value: [
            {
              componentName: 'AMText',
              props: {
                type: 'inherit',
                children: {
                  type: 'JSExpression',
                  value:
                    '`${this.value? window.dayjs(this.value).format("YYYY-MM-DD") : "请选择"}`',
                },
              },
            },
          ],
        },
      },
    },
    {
      name: 'filter',
      title: { label: '可供选择的时间', tip: 'filter | 可供选择的时间' },
      propType: 'func',
      setter: [
        {
          componentName: 'FunctionSetter',
          props: {
            template:
              'getDateFilter(){\n// 过滤可供选择的时间 \nreturn {\n' +
              '  day: (val, { date }) => {\n' +
              '    // 去除所有周末\n' +
              '    if (date.getDay() > 5 || date.getDay() === 0) {\n' +
              '      return false\n' +
              '    }\n' +
              '    return true\n' +
              '  },\n' +
              '  hour: (val: number) => {\n' +
              '    // 只保留每天的14点到18点\n' +
              '    if (val < 14 || val > 18) {\n' +
              '      return false\n' +
              '    }\n' +
              '    return true\n' +
              '  },\n' +
              '};\n}',
          },
        },
        'VariableSetter',
      ],
    },
    {
      name: 'min',
      title: { label: '最小值', tip: '最小值' },
      propType: 'func',
      setter: [
        {
          componentName: 'FunctionSetter',
          props: {
            template: 'getMinDate(){ \nreturn new Date()\n}',
          },
        },
        'VariableSetter',
      ],
    },
    {
      name: 'max',
      title: { label: '最大值', tip: '最大值' },
      propType: 'func',
      setter: [
        {
          componentName: 'FunctionSetter',
          props: {
            template: 'getMinDate(){ \nreturn new Date()\n}',
          },
        },
        'VariableSetter',
      ],
    },
    {
      name: 'precision',
      title: { label: '精度', tip: 'precision | 设置按钮大小' },
      propType: {
        type: 'oneOf',
        value: ['year', 'month', 'day', 'hour', 'minute', 'second', 'week', 'week-day'],
      },
      setter: [
        {
          componentName: 'SelectSetter',
          props: {
            options: [
              {
                title: '年',
                value: 'year',
              },
              {
                title: '月',
                value: 'month',
              },
              {
                title: '日',
                value: 'day',
              },
              {
                title: '小时',
                value: 'hour',
              },
              {
                title: '分',
                value: 'minute',
              },
              {
                title: '秒',
                value: 'second',
              },
              {
                title: '周',
                value: 'week',
              },
              {
                title: '星期几',
                value: 'week-day',
              },
            ],
          },
        },
        'VariableSetter',
      ],
      defaultValue: 'middle',
    },
    {
      name: 'tillNow',
      title: { label: '展示"至今"', tip: '展示"至今"' },
      propType: 'bool',
      setter: 'BoolSetter',
      supportVariable: true,
    },
    ...pickerModalProps,
  ],
  configure: {
    supports: {
      style: true,
      events: [...pickerBaseEvents],
    },
  },
};