import { Slider as VanSlider, Toast } from 'vant'
import { useFormInput } from '../../../hooks/form-input'
import { formInputProps, fromInputEmits } from '../../form-input-props'
import './index.less'
import { useSliderConfig } from './use-slider-config'
export default {
  props: formInputProps,
  emits: [...fromInputEmits],
  setup (props, context) {
    const { proxyValue, securityConfig, width } = useFormInput(props, context)
    const { max, min, step } = useSliderConfig({ securityConfig })
    const handleChange = (value) => {
      Toast('当前值：' + value)
    }
    return () => <div class={'basic-slider--m__wrapper'}>
      <div class={'basic-slider--m'} style={{ width: width.value }}>
        <VanSlider
          style={{ width: '100%', top: '50%', transform: 'translateY(-50%)' }}
          v-model={proxyValue.value}
          max={max.value}
          min={min.value}
          step={step.value}
          disabled={props.disabled}
          onChange={handleChange}
        />
      </div>
    </div>
  }
}