<template>
  <el-select
    class="i18n-wrap"
    v-model="currentLang"
    @change="changeLang"
    popper-class="i18n-popper"
  >
    <el-option
      v-for="(item, index) in langData"
      :value="item.value"
      :label="item.label"
      :key="index"
    ></el-option>
  </el-select>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useI18n } from "vue-i18n";

const { locale } = useI18n();

const langData = reactive([
  { value: "zhCN", label: "中文(简体)" },
  { value: "zhTW", label: "中文(繁體)" },
  { value: "enUS", label: "English" },
]);

const currentLang = ref(localStorage.getItem("lang") || "zhCN");

const changeLang = (lang) => {
  currentLang.value = lang;
  locale.value = lang;
};
</script>
<style>
.i18n-popper {
  --el-color-primary: #2b7afa;
}
</style>
<style lang="scss" scoped>
.i18n-wrap {
  :deep(.el-select__wrapper) {
    box-shadow: none;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 9999px;
    border: 1px solid #ffffff;
    outline: none;
    font-weight: normal;
    font-size: 16px;
    color: #1d2129;
    .el-select__selected-item.el-select__placeholder {
      position: relative;
      transform: translateY(0);
      width: auto;
    }
  }
}
</style>
