<template>
  <div class="language-switcher">
    <select v-model="locale" @change="switchLanguage">
      <option 
        v-for="lang in availableLocales" 
        :key="lang.code" 
        :value="lang.code"
      >
        {{ lang.name }}
      </option>
    </select>
  </div>
</template>

<script setup lang="ts">
const { locale, locales } = useI18n()
const switchLocalePath = useSwitchLocalePath()
const router = useRouter()

const availableLocales = computed(() => {
  return (locales.value).map(l => {
    return {
      code: l.code,
      name: l.name
    }
  })
})

const switchLanguage = () => {
  const path = switchLocalePath(locale.value)
  if (path) {
    router.push(path).then(() => {
      window.location.reload() // 强制刷新页面
    })
  }
}
</script>

<style scoped lang="less">
.language-switcher {
  select {
    padding: @spacing-sm @spacing-md;
    border: 1px solid @border-color;
    border-radius: @border-radius-md;
    background-color: transparent;
    color: @light-text-color;
    cursor: pointer;

    &:hover {
      border-color: @secondary-color;
    }

    option {
      padding: 10px;
      background-color: @primary-color;
      color: @light-text-color;
    }
  }
}
</style>