<template>
  <van-field
    ref="input"
    v-model="dataModel"
    :label="label"
    :name="name"
    :border="border"
    :disabled="disabled"
    :readonly="readonly"
    :required="required"
    :clearable="clearable"
    :clickable="clickable"
    :is-link="isLink"
    :error="error"
    :error-message="errorMessage"

    :arrow-direction="arrowDirection"
    :label-class="labelClass"
    :label-width="labelWidth"
    :label-align="labelAlign"
    :input-align="inputAlign"
    :error-message-align="errorMessageAlign"
    :autosize="autosize"
    :left-icon="leftIcon"
    :right-icon="rightIcon"
    :icon-prefix="iconPrefix"
    :rules="editable?rules:null"
  >
    <template #input>
      <van-stepper
        v-model="dataModel"
        :max="max"
        :min="min"
        :step="step"
        :placeholder="placeholder "

        :disabled="disabled"
        :theme="theme"
        :button-size="buttonSize"
        v-on="$listeners"
      />
    </template>
  </van-field>
</template>
<script>
import FieldMixin from '@/mixins/field'

export default {
  name: 'ibps-stepper',
  mixins: [FieldMixin],
  props: {
    max: [String, Number],
    min: [String, Number],
    step: [String, Number],

    buttonSize: {
      type: [String, Number],
      default: 22
    },
    theme: {
      type: String,
      default: 'round'
    }
  },
  data() {
    return {
      dataModel: ''
    }
  },
  watch: {
    value: {
      handler(val) {
        this.dataModel = val
      },
      immediate: true
    },
    dataModel: {
      handler(val) {
        this.$emit('update:value', val)
      },
      deep: true
    }
  }
}
</script>

