<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>
export default {
  name: 'KolePhoneInput',
  props: {
    value: { type: String, default: '' },
    placeholder: { type: String, default: '请输入手机号' },
    codes: {
      type: Array,
      default: () => [
        { value: '+86', label: '中国大陆' },
        { value: '+852', label: '香港' },
        { value: '+1', label: '美国' },
        { value: '+81', label: '日本' }
      ]
    }
  },
  data() {
    return { code: '+86', number: this.value, focused: false };
  },
  computed: {
    valid() {
      if (this.code === '+86') return /^1[3-9]\d{9}$/.test(this.number);
      return this.number.length >= 6 && this.number.length <= 15;
    },
    tipClass() {
      if (!this.number) return '';
      return this.valid ? 'ok' : 'error';
    },
    tipText() {
      if (!this.number) return '支持中国大陆、香港、美、日等区号';
      return this.valid ? '格式正确：' + this.code + ' ' + this.number : '手机号格式不正确';
    }
  },
  methods: {
    onInput(e) {
      this.number = e.target.value.replace(/\D/g, '').slice(0, 11);
      e.target.value = this.number;
      this.$emit('input', this.code + ' ' + this.number);
    }
  }
};
</script>

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