import BasicNumberMobile from '../../basic/number/mobile'
import { useFormInput } from '../../../hooks/form-input'
import { formInputProps } from '../../form-input-props'
import './index.less'
import { useRange } from '@cip/components/cip-form-input/extension/number-range/use-range'
export default {
  props: formInputProps,
  setup (props, context) {
    const { proxyOtherValue, securityConfig } = useFormInput(props, context)
    // min和max限制输入值大小
    const { min, max, joint } = useRange(props)
    return () => <div class={['extension-number-range', 'extension-number-range--mobile']}>
      <BasicNumberMobile
        v-model={proxyOtherValue.value}
        config={{
          ...securityConfig,
          max: max.value,
          placeholder: securityConfig.value.startPlaceholder
        }}
      />
      <span style="padding: 0px 8px;">{joint.value}</span>
      <BasicNumberMobile
        v-model={proxyOtherValue[0].value}
        config={{
          ...securityConfig,
          min: min.value,
          placeholder: securityConfig.value.endPlaceholder
        }}
      />
    </div>
  }
}