import { FormSchema } from '/@/components/Form';

import dayjs from 'dayjs';

export const schemas: FormSchema[] = [
  {
    label: '文本框',
    field: 'name',
    component: 'Input',
    componentProps: {
      prefix: '中文',
      showCount: true,
    },
    defaultValue: '张三',
  },
  {
    label: '密码',
    field: 'password',
    component: 'InputPassword',
    componentProps: {
      //是否显示切换按钮或者控制密码显隐
      visibilityToggle: true,
      prefix: '密码',
    },
  },
  {
    label: '搜索框',
    field: 'searchBox',
    component: 'InputSearch',
    componentProps: {
      onSearch: (value) => {
        console.log(value);
      },
    },
  },
  {
    label: '文本域',
    field: 'textArea',
    component: 'InputTextArea',
    componentProps: {
      //可以点击清除图标删除内容
      allowClear: true,
      //是否展示字数
      showCount: true,
      //自适应内容高度，可设置为 true | false 或对象：{ minRows: 2, maxRows: 6 }
      autoSize: {
        //最小显示行数
        minRows: 2,
        //最大显示行数
        maxRows: 3,
      },
    },
  },
  {
    label: '数值输入框',
    field: 'number',
    component: 'InputNumber',
    componentProps: {
      //带标签的 input，设置后置标签
      addonAfter: '保留两位小数',
      //最大值
      max: 100,
      //数值经度
      precision: 2,
      //步数
      step: 0.1,
    },
  },

  {
    label: '下拉框',
    field: 'jinputtype',
    component: 'Select',
    componentProps: {
      options: [
        { value: 'like', label: '模糊（like）' },
        { value: 'ne', label: '不等于（ne）' },
        { value: 'ge', label: '大于等于（ge）' },
        { value: 'le', label: '小于等于（le)' },
      ],
      //下拉多选
      mode: 'multiple',
      //配置是否可搜索
      showSearch: true,
    },
  },
  {
    field: 'TreeSelect',
    label: '下拉树',
    component: 'TreeSelect',
    componentProps: {
      //是否显示下拉框，默认false
      treeCheckable: true,
      //标题
      title: '下拉树',
      //下拉树
      treeData: [
        {
          label: '洗衣机',
          value: '0',
          children: [
            {
              label: '滚筒洗衣机',
              value: '0-1',
            },
          ],
        },
        {
          label: '电视机',
          value: '1',
          children: [
            {
              label: '平板电视',
              value: '1-1',
              disabled: true,
            },
            {
              label: 'CRT电视机',
              value: '1-2',
            },
            {
              label: '投影电视',
              value: '1-3',
            },
          ],
        },
      ],
    },
  },
  {
    label: 'RadioButtonGroup组件',
    field: 'status',
    component: 'RadioButtonGroup',
    componentProps: {
      options: [
        { label: '有效', value: 1 },
        { label: '无效', value: 0 },
      ],
    },
  },
  {
    label: '单选框',
    field: 'radioSex',
    component: 'RadioGroup',
    componentProps: {
      //options里面由一个一个的radio组成,支持disabled禁用
      options: [
        { label: '男', value: 1, disabled: false },
        { label: '女', value: 0 },
      ],
    },
  },
  {
    label: '多选框',
    field: 'checkbox',
    component: 'Checkbox',
    componentProps: {
      //是否禁用,默认false
      disabled: false,
    },
  },
  {
    label: '多选框组',
    field: 'checkSex',
    component: 'CheckboxGroup',
    componentProps: {
      //RadioGroup 下所有 input[type="radio"] 的 name 属性
      name: '爱好',
      //options支持disabled禁用
      options: [
        { label: '运动', value: 0, disabled: true },
        { label: '听音乐', value: 1 },
        { label: '看书', value: 2 },
      ],
    },
    defaultValue: [2],
  },
  {
    label: '自动完成组件',
    field: 'AutoComplete',
    component: 'AutoComplete',
    componentProps: {
      options: [{ value: 'Burns Bay Road' }, { value: 'Downing Street' }, { value: 'Wall Street' }],
    },
  },
  {
    label: '级联选择',
    field: 'cascade',
    component: 'Cascader',
    componentProps: {
      //最多显示多少个tag
      maxTagCount: 2,
      //浮层预设位置
      placement: 'bottomRight',
      //在选择框中显示搜索框,默认false
      showSearch: true,
      options: [
        {
          label: '北京',
          value: 'BeiJin',
          children: [
            {
              label: '海淀区',
              value: 'HaiDian',
            },
          ],
        },
        {
          label: '江苏省',
          value: 'JiangSu',
          children: [
            {
              label: '南京',
              value: 'Nanjing',
              children: [
                {
                  label: '中华门',
                  value: 'ZhongHuaMen',
                },
              ],
            },
          ],
        },
      ],
    },
  },
  {
    label: '日期选择',
    field: 'dateSelect',
    component: 'DatePicker',
    componentProps: {
      //日期格式化，页面上显示的值
      format: 'YYYY-MM-DD',
      //返回值格式化（绑定值的格式）
      valueFormat: 'YYYY-MM-DD',
      //是否显示今天按钮
      showToday: true,
      //不可选择日期
      disabledDate: (currentDate) => {
        let date = dayjs(currentDate).format('YYYY-MM-DD');
        let nowDate = dayjs(new Date()).format('YYYY-MM-DD');
        //当天不可选择
        if (date == nowDate) {
          return true;
        }
        return false;
      },
    },
  },
  {
    label: '月份选择',
    field: 'monthSelect',
    component: 'MonthPicker',
    componentProps: {
      //不可选择日期
      disabledDate: (currentDate) => {
        let date = dayjs(currentDate).format('YYYY-MM');
        let nowDate = dayjs(new Date()).format('YYYY-MM');
        //当天不可选择
        if (date == nowDate) {
          return true;
        }
        return false;
      },
    },
  },
  {
    label: '周选择',
    field: 'weekSelect',
    component: 'WeekPicker',
    componentProps: {
      size: 'small',
    },
  },
  {
    label: '时间选择',
    field: 'timeSelect',
    component: 'TimePicker',
    componentProps: {
      size: 'default',
      //日期时间或者时间模式下是否显示此刻，不支持日期时间范围和时间范围
      showNow: true,
    },
  },
  {
    label: '日期时间范围',
    field: 'dateTimeRangeSelect',
    component: 'RangePicker',
    componentProps: {
      //是否显示时间
      showTime: true,
      //日期格式化
      format: 'YYYY/MM/DD HH:mm:ss',
      //范围文本描述用集合
      placeholder: ['请选择开始日期时间', '请选择结束日期时间'],
    },
  },
  {
    label: '日期范围',
    field: 'dateRangeSelect',
    component: 'RangeDate',
    componentProps: {
      //日期格式化
      format: 'YYYY/MM/DD',
      //范围文本描述用集合
      placeholder: ['请选择开始日期', '请选择结束日期'],
    },
  },
  {
    label: '时间范围',
    field: 'timeRangeSelect',
    component: 'RangeTime',
    componentProps: {
      //日期格式化
      format: 'HH/mm/ss',
      //范围文本描述用集合
      placeholder: ['请选择开始时间', '请选择结束时间'],
    },
  },
  {
    label: '开关',
    field: 'switch',
    component: 'Switch',
    componentProps: {
      //开关大小，可选值：default small
      size: 'default',
      //非选中时的内容
      unCheckedChildren: '开启',
      //非选中时的值
      unCheckedValue: '0',
      //选中时的内容
      checkedChildren: '关闭',
      //选中时的值
      checkedValue: '1',
      //是否禁用
      disabled: false,
    },
  },
  {
    label: '滑动输入条',
    field: 'slider',
    component: 'Slider',
    componentProps: {
      //最小值
      min: -20,
      //最大值
      max: 100,
      //是否为双滑块模式
      range: true,
      //刻度标记
      marks: {
        '-20': '-20°C',
        0: '0°C',
        26: '26°C',
        37: '37°C',
        100: {
          style: {
            color: '#f50',
          },
          label: '100°C',
        },
      },
    },
  },
  {
    label: '评分',
    field: 'rate',
    component: 'Rate',
    componentProps: {
      //是否允许半选
      allowHalf: true,
      //star 总数
      count: 5,
      //tooltip提示，有几颗星写几个
      tooltips: ['非常差', '较差', '正常', '很好', '非很好'],
    },
  },
  {
    label: '分割线',
    field: 'divisionLine',
    component: 'Divider',
    componentProps: {
      //是否虚线
      dashed: false,
      //分割线标题的位置（left | right | center）
      orientation: 'center',
      //文字是否显示为普通正文样式
      plain: true,
      //水平还是垂直类型（horizontal | vertical）
      type: 'horizontal',
    },
  },
];