<template>
  <div class="d-flex box ml-2 mr-2">
    <v-btn :small="option.dense" color="primary" @click="handleClick(false)">
      <v-icon :dense="option.dense">mdi-minus</v-icon>
    </v-btn>

    <v-text-field
      :style="`width: ${option.width || 40}px;`"
      type="number"
      :value="data"
      :dense="option.dense"
      :disabled="option.disabled"
      :hide-details="true"
      :hide-spin-buttons = true
    >
    </v-text-field>
    <v-btn :small="option.dense" color="primary" @click="handleClick(true)">
      <v-icon :dense="option.dense">mdi-plus</v-icon>
    </v-btn>
  </div>
</template>

<script>
export default {
  name: 'form-count',
  props: {
    option: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      data: null
    }
  },
  created () {
    this.data = this.option.value
  },
  methods: {
    handleClick (val) {
      if (val) {
        if (this.data >= this.option.max) return
        this.data++
      } else {
        if (this.data <= this.option.min) return
        this.data--
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// .box {
//   border: 1px solid #ccc;
// }
::v-deep {
  .v-text-field.v-input--dense:not(.v-text-field--outlined) input {
    text-align: center;
  }
  .theme--light.v-text-field > .v-input__control > .v-input__slot:before {
    border: unset;
  }
  .v-text-field {
    margin: 0;
  }
}
</style>
