<template>
  <ui-input
    v-model="formattedPhone"
    name="phone"
    label="Телефон"
    mask="+7 ### ###-##-##"
    placeholder="+7"
  />
</template>

<script lang="ts">
import { Component, Emit, Vue, Watch } from 'vue-property-decorator'
import UiInput from './UiInput.vue'
import PhoneHelper from '../../helpers/PhoneHelper'

@Component({
  components: { UiInput },
  inheritAttrs: false,
})
export default class UiPhoneInput extends Vue {
  formattedPhone: string = this.getFormattedPhone()

  getFormattedPhone(): string {
    const formatted = PhoneHelper.clearValue(this.$attrs.value)
    return formatted.replace(/^7/, '')
  }

  @Watch('formattedPhone')
  @Emit()
  input() {
    return PhoneHelper.clearValue(this.formattedPhone)
  }
}
</script>
