/*
 * @Author: 卜启缘
 * @Date: 2021-06-01 09:45:21
 * @LastEditTime: 2021-06-22 23:08:50
 * @LastEditors: 卜启缘
 * @Description: '表单项类型 - 步进器
 * @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\stepper\index.tsx
 */
import { Field, Stepper } from 'vant'
import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils'
import { createFieldProps } from './createFieldProps'
import { useGlobalProperties } from '@/hooks/useGlobalProperties'
import {
  createEditorInputNumberProp,
  createEditorInputProp,
  createEditorSwitchProp,
  createEditorSelectProp
} from '@/visual-editor/visual-editor.props'

export default {
  key: 'stepper',
  moduleName: 'baseWidgets',
  label: '表单项类型 - 步进器',
  preview: () => (
    <Field
      name="stepper"
      label="步进器"
      labelWidth={50}
      v-slots={{ input: () => <Stepper modelValue={3} /> }}
    ></Field>
  ),
  render: ({ size, block, props }) => {
    const { registerRef } = useGlobalProperties()

    return (
      <Field
        {...props}
        modelValue={''}
        style={{
          width: size.width ? `${size.width}px` : null
        }}
        v-slots={{
          input: () => (
            <Stepper
              ref={(el) => registerRef(el, block._vid)}
              {...props}
              v-model={props.modelValue}
            ></Stepper>
          )
        }}
      />
    )
  },
  props: {
    modelValue: createEditorInputNumberProp({ label: '默认值', defaultValue: 0 }),
    name: createEditorInputProp({ label: '字段名', defaultValue: 'stepper' }),
    label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '步进器' }),
    min: createEditorInputNumberProp({ label: '最小值', defaultValue: 0 }),
    max: createEditorInputNumberProp({ label: '最大值' }),
    ...createFieldProps(),
    allowEmpty: createEditorSwitchProp({ label: '是否允许输入的值为空', defaultValue: false }),
    buttonSize: createEditorInputProp({
      label: '按钮大小以及输入框高度，默认单位为 px',
      defaultValue: '28px'
    }),
    decimalLength: createEditorInputProp({ label: '固定显示的小数位数', defaultValue: '' }),
    defaultValue: createEditorInputProp({
      label: '初始值，当 v-model 为空时生效',
      defaultValue: '1'
    }),
    disableInput: createEditorSwitchProp({ label: '是否禁用输入框', defaultValue: false }),
    disableMinus: createEditorSwitchProp({ label: '是否禁用减少按钮', defaultValue: false }),
    disablePlus: createEditorSwitchProp({ label: '是否禁用增加按钮', defaultValue: false }),
    disabled: createEditorSwitchProp({ label: '是否禁用步进器', defaultValue: false }),
    inputWidth: createEditorInputProp({ label: '输入框宽度，默认单位为 px', defaultValue: '32px' }),
    integer: createEditorSwitchProp({ label: '是否只允许输入整数', defaultValue: false }),
    longPress: createEditorSwitchProp({ label: '是否开启长按手势', defaultValue: true }),
    placeholder: createEditorInputProp({ label: '输入框占位提示文字', defaultValue: '' }),
    showInput: createEditorSwitchProp({ label: '是否显示输入框', defaultValue: true }),
    showMinus: createEditorSwitchProp({ label: '是否显示减少按钮', defaultValue: true }),
    showPlus: createEditorSwitchProp({ label: '是否显示增加按钮', defaultValue: true }),
    step: createEditorInputProp({ label: '步长，每次点击时改变的值', defaultValue: '1' }),
    theme: createEditorSelectProp({
      label: '样式风格',
      options: [
        {
          label: '默认',
          value: ''
        },
        { label: '圆角风格', value: 'round' }
      ],
      defaultValue: ''
    })
  },
  resize: {
    width: true
  },
  model: {
    default: '绑定字段'
  }
} as VisualEditorComponent
