<template>
  <div class="control has-icons-left">
    <input
      class="input"
      type="text"
      :placeholder="placeholder || ''"
      v-model="value"
      :disabled="disabled || false"
      inputmode="numeric"
      autocomplete="tel"
    />
    <span class="icon is-left">
      <SvgIcon v-bind="{name: 'phone.png', type: 'gray', size: 20}"></SvgIcon>
    </span>
  </div>
</template>

<script>
export default {
  props: ["record", "attr", "placeholder", "disabled"],

  data() {
    return {
      value: "",
    };
  },

  created() {
    const initial = this.record?.[this.attr];
    this.value = initial ? String(initial) : "";
  },

  watch: {
    /** giống InputEmail.vue: watch value → emit ngay */
    value(newVal) {
      // giữ lại CHỈ chữ số
      const digits = String(newVal).replace(/\D/g, "");

      // sync lại UI nếu user nhập ký tự khác số
      if (digits !== newVal) {
        this.value = digits;
        return;
      }

      // emit string số hoặc null
      this.$emit("phone", digits.length ? digits : null);
    },

    record(newVal) {
      const v = newVal?.[this.attr];
      this.value = v ? String(v) : "";
    },
  },
};
</script>
