<template>
  <select v-model.sync="selectedOption">
    <option value="" disabled>{{ $t('Select Country') }}</option>
    <option v-for="option in dataCountries" :value="option.value" :key="`option-${option.value}`">
      {{ option.text }}
    </option>
  </select>
</template>

<script lang="ts" setup>
import type {ISelect} from "@/types/select-d-t";

const props = withDefaults(defineProps<{
  defaultCurrent: Number | String | null | undefined
}>(), {
  defaultCurrent: null
})

const {t} = useI18n();
const route = useRoute();
const selectedOption = ref(Number(props.defaultCurrent || 0));
const isSelected = (value: string|number) => Boolean(selectedOption.value && (Number(value) === (selectedOption.value + 1)));
const {data: dataCountries, pending: pendingCountries, error: errorCountries, execute: executeCountries } = useLazyAsyncData(
    `countries_data_select`,
    (): Promise<ISelect[]> => $axios.get("countries").then((res) => {
      const index = res.data.data.findIndex((item: ISelect) => item.value === res.data.default);
      selectedOption.value = index > -1 ? index+1 : 0;
      return res.data.data;
    }),
    {
      default: () => null,
      watch: [route],
      immediate: true,
    }
);

</script>