<template>
  <div>
    <el-select v-model="selectedRow.id" @change="changedVal">
      <template #prefix><i :class="flagIcon"></i></template>
      <el-option v-for="info in allShops" :label=info.account_name :value=info.id :key="info.id">
        <template #default>
          <i :class="`fi fi-${info.country_code.toLowerCase()}`"></i> {{ info.account_name }}
        </template>
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, onBeforeMount } from 'vue';
import type { Ref } from 'vue'
import { GetList } from './api'
import { Profile } from './types'
import { useShopInfo } from '/@/stores/shopInfo'


defineOptions({
  name: 'ShopSelector'
})
const shopInfo = useShopInfo()
const selectedRow: Ref<Profile> = ref(shopInfo.profile)
const allShops: Ref<Profile[]> = ref([])

onBeforeMount(async () => {
  const resp = await GetList({ limit: 999, query: '{-refresh_token}' })
  allShops.value = resp.data
})
const flagIcon = computed(()=> {
  return "fi fi-" + selectedRow.value.country_code.toLowerCase()
})
const changedVal = () => {
  shopInfo.updateShopInfo(selectedRow.value)
}

</script>

<style scoped>
</style>
