<template>
  <el-select
    v-model="localCountryCode"
    filterable
    clearable
    placeholder="选择国家"
    @change="updateParent"
    style="width: 100%"
  >
    <el-option
      v-for="country in countryList"
      :key="country.iconName"
      :label="` ${country.cnName}  ${country.localName}`"
      :value="country.phoneCode"
      >{{ country.cnName }} ({{ country.phoneCode }} )</el-option
    >
  </el-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getCountriesPage } from '@/api/member/countries'
const emit = defineEmits(['updateValue'])
defineOptions({ name: 'PhoneNumberInput' })

const countryList = ref([])

const initCountryList = async () => {
  const params = {
    pageNo: 1,
    pageSize: 500,
    status: 1
  }
  const res = await getCountriesPage(params)
  countryList.value = countryList.value.concat(res.list)
}

const localCountryCode = ref('')

const updateParent = () => {
  emit('updateValue', localCountryCode.value)
}

onMounted(async () => {
  await initCountryList()
  localCountryCode.value  = countryList.value[0].phoneCode
  updateParent()
})
</script>
