<!-- https://github.com/jackocnr/intl-tel-input/blob/master/react/src/intl-tel-input/react.tsx -->
<script lang="ts" setup>
import { Iti } from 'intl-tel-input';
import intlTelInput from 'intl-tel-input/intlTelInputWithUtils';
import 'intl-tel-input/build/css/intlTelInput.min.css';
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
import useI18n from '@/hooks/useI18n';
const { currentLocale } = useI18n();
const emit = defineEmits(['update:value', 'update:change']);
const props = defineProps({
  /**有效检验 */
  preciseValidation: {
    type: Boolean,
    default: false,
  },
  /**手机号 */
  value: {
    type: String,
    default: '',
  },
  /**禁用输入 */
  disabled: {
    type: Boolean,
    default: false,
  },
  /**手机号输入提示 */
  placeholder: {
    type: String,
    default: '',
  },
  /**手机号输入最大字符串长度 */
  maxlength: {
    type: Number,
    default: 255,
  },
  /**允许清空手机号输入框 */
  allowClear: {
    type: Boolean,
  },
});

const inputRef = ref<HTMLInputElement | null>(null);
const itiRef = ref<Iti | null>(null);

function fnChange() {
  if (!itiRef.value) return;

  const number = itiRef.value?.getNumber() || '';
  const countryIso = itiRef.value?.getSelectedCountryData().iso2 || '';
  // note: this number will be in standard E164 format, but any container component can use
  // intlTelInputUtils.formatNumber() to convert this to another format
  // as well as intlTelInputUtils.getNumberType() etc. if need be
  let data = {
    number,
    countryIso,
    validity: false,
    errorCode: -1,
  };

  const isValid = props.preciseValidation
    ? itiRef.value.isValidNumberPrecise()
    : itiRef.value.isValidNumber();
  if (isValid) {
    data.validity = true;
    data.errorCode = 0;
  } else {
    const errorCode = itiRef.value.getValidationError();
    data.validity = false;
    data.errorCode = errorCode;
  }
  // console.log(data);

  emit('update:value', number);
  emit('update:change', data);
}

onMounted(() => {
  nextTick(async () => {
    if (inputRef.value) {
      let i18n = undefined;
      let initialCountry = 'us';
      // 语言文件导入问题只能复制到项目内处理
      // import fr from "intl-tel-input/i18n/fr";
      if (currentLocale.value.startsWith('zh')) {
        const { default: zh } = await import('./i18n/zh');
        i18n = zh;
        initialCountry = 'cn';
      } else {
        const { default: en } = await import('./i18n/en');
        i18n = en;
        initialCountry = 'us';
      }

      itiRef.value = intlTelInput(inputRef.value, {
        initialCountry: initialCountry,
        formatOnDisplay: true,
        autoPlaceholder: 'polite',
        i18n: i18n,
      });
      if (props.value) {
        itiRef.value.setNumber(props.value);
      }
      if (props.disabled) {
        itiRef.value.setDisabled(props.disabled);
      }
      inputRef.value.addEventListener('countrychange', fnChange);
    }
  });
});

onBeforeUnmount(() => {
  if (inputRef.value) {
    inputRef.value.removeEventListener('countrychange', fnChange);
  }
  itiRef.value?.destroy();
});
</script>

<template>
  <input
    type="tel"
    class="ant-input"
    ref="inputRef" 
    :disabled="disabled"
    :placeholder="placeholder"
    :maxlength="maxlength"
    :allow-clear="allowClear"
    @input="fnChange"
  />
</template>

<style lang="css">
.iti {
  display: block;
}

.iti .iti__country-container .iti__search-input {
  padding: 4px 8px;
}

.iti .ant-input {
  box-sizing: border-box;
  margin: 0;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: 'tnum';
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 0;
  padding: 4px 11px;
  color: #000000d9;
  font-size: 14px;
  line-height: 1.5715;
  background-color: transparent;
  background-image: none;
  border: 1px solid #424242;
  border-radius: 6px;
  transition: all 0.3s;
}
.iti .ant-input:focus,
.iti .ant-input-focused {
  border-color: var(--ant-primary-color-hover);
  box-shadow: 0 0 0 2px var(--ant-primary-color-outline);
  border-right-width: 1px !important;
  outline: 0;
}
</style>
