<!--
 * 语言选择
  -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useLocalStorage } from 'src/common/hooks';
import { Langs } from 'src/config/enum';
// interface IDetailProps {
//   type: string;
//   data: any;
// }
// const props = withDefaults(defineProps<IDetailProps>(), {
//   type: '',
//   data: {},
// });

const { locale } = useI18n();
const { getItem, setItem } = useLocalStorage();

const languageLabel = ref('');

onMounted(() => {
  let language = getItem('LANG');
  let languageOpt = { label: '简体中文', value: 'zh-CN' };

  if (language) {
    languageOpt = JSON.parse(language as string);
  } else {
    setItem('LANG', JSON.stringify(languageOpt));
  }

  locale.value = languageOpt.value;
  languageLabel.value = languageOpt.label;
});

function onItemClick(item: any) {
  if (item.value === locale.value) return;

  setItem('LANG', JSON.stringify(item));
  languageLabel.value = item.label;
  locale.value = item.value;
}
</script>
<template>
  <div class="language-select">
    <q-btn-dropdown :label="languageLabel" flat color="#fff" no-caps>
      <q-list>
        <q-item
          clickable
          v-close-popup
          @click="onItemClick(item)"
          v-for="item in Langs"
          :key="item.value"
          :class="{ 'active-sel-item': item.value === $i18n.locale }"
        >
          <q-item-section>
            <q-item-label>{{ item.label }}</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
  </div>
</template>

<style lang="scss" scoped>
.language-select {
  box-sizing: border-box;
  height: $header-heigyht;
  line-height: $header-heigyht;
  margin-right: $padding-sm;
}
.active-sel-item {
  color: $primary;
}
</style>