<template>
  <div>
    <el-select style="width: 100%"  @change="changeLanguage" v-model="lang">
      <el-option v-for="lan in langList"
                 :key="lan.value"
                 :label="lan.label"
                 :value="lan.value">
      </el-option>
    </el-select>
  </div>
</template>
<script>
import {isNotNull} from "@/api/language/index";
import { changeLanguages } from "@/api/system/api";
import Bus from '../../utils/Bus.js'
export default {
  name: "i18n",
  data(){
    return {
      lang: "繁體中文",
      langList: [
        {
          label: "繁體中文",
          value: "zh_TW"
        },
        // {
        //   label: "Tiếng Việt",
        //   value: "vi"
        // },
        // {
        //   label: "简体中文",
        //   value: "zh_CN"
        // },
        // {
        //   label: "English",
        //   value: "en_US"
        // }
      ],
    }
  },
  created() {
    let value = localStorage.getItem("lang");
    if(value){
      this.lang = value;
    } else {
      // 如果没有设置语言，使用默认的繁体中文
      this.lang = "zh_TW";
      localStorage.setItem("lang", "zh_TW");
    }
  },
  methods: {
    changeLanguage(value){
      this.$i18n.locale = value;
      localStorage.setItem("lang", value);
      changeLanguages(value).then(response => {
        console.info("change-language:" + value);
        Bus.$emit('l18zh',value);
        // window.location.reload();
      });
    },
  }
}
</script>
