<template>
  <div class="">
    <t-select
      class="language-select"
      :bordered="true"
      v-model="locale"
      :options="languageOptions"
      :onChange="changeLanguage"
      :borderless="true"
    ></t-select>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n';
const props = defineProps({
  type: {
    type: String,
    default: 'home',
  },
});
const { locale } = useI18n();
// 回到客户端修改获取浏览器语言
if (process.client) {
  let lan = localStorage.getItem('lang');
  if (navigator.language === 'zh-CN' || navigator.language === 'zh-TW') {
    lan = 'cn';
  } else if (navigator.language == 'en') {
    lan = 'en';
  }
  if (lan) {
    locale.value = lan;
  }
}
const languageOptions = [
  {
    label: '中文简体',
    value: 'cn',
  },
  {
    label: 'English',
    value: 'en',
  },
];
const changeLanguage = (v: string) => {
  locale.value = v;
  localStorage.setItem('lang', v);
};
</script>

<style lang="less" scoped>
.language-select {
  margin-right: 16px;
  width: 108px;
  display: flex;
  justify-content: center;
  align-items: center;
  :deep(.t-input__inner) {
    font-weight: 700;
    font-size: 15px;
  }
}
</style>
