<template>
  <div>
    <div class="kole-phone" :class="{ 'is-focus': focused, 'is-error': !valid && !!number }">
      <select class="kole-phone-code" v-model="code">
        <option v-for="c in codes" :key="c.value" :value="c.value">{{ c.value }} {{ c.label }}</option>
      </select>
      <input
        class="kole-phone-input"
        :value="number"
        inputmode="numeric"
        :placeholder="placeholder"
        @input="onInput"
        @focus="focused = true"
        @blur="focused = false"
      />
    </div>
    <div class="kole-phone-tip" :class="tipClass">{{ tipText }}</div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  modelValue: { type: String, default: '' },
  placeholder: { type: String, default: '请输入手机号' },
  codes: {
    type: Array,
    default: () => [
      { value: '+86', label: '中国大陆' },
      { value: '+852', label: '香港' },
      { value: '+1', label: '美国' },
      { value: '+81', label: '日本' }
    ]
  }
});
const emit = defineEmits(['update:modelValue']);
const code = ref('+86');
const number = ref(props.modelValue);
const focused = ref(false);

const valid = computed(() =>
  code.value === '+86' ? /^1[3-9]\d{9}$/.test(number.value) : number.value.length >= 6 && number.value.length <= 15
);
const tipClass = computed(() => (!number.value ? '' : valid.value ? 'ok' : 'error'));
const tipText = computed(() =>
  !number.value ? '支持中国大陆、香港、美、日等区号' : valid.value ? '格式正确：' + code.value + ' ' + number.value : '手机号格式不正确'
);

function onInput(e) {
  number.value = e.target.value.replace(/\D/g, '').slice(0, 11);
  e.target.value = number.value;
  emit('update:modelValue', code.value + ' ' + number.value);
}
</script>

<style src="./PhoneInput.css"></style>
