<template>
  <div class="language-wrapper">
    <el-select @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>
export default {
  name: "language-switcher",
  props: {
    ws: {
      type: String,
      default: '',
    },
  },
  watch: {
    ws(val) {
      this.init();
    },
  },
  data() {
    return {
      lang: localStorage.getItem('language') || process.env.VUE_APP_DEF_LANGUAGE,
      langList: [
        {
          label: "中文",
          value: "zh"
        },
        {
          label: "English",
          value: "en"
        }
      ],
    };
  },
  // 组件卸载前清空图层信息
  beforeDestroy() {
  },
  created() {

  },
  mounted() {
    this.init();
  },
  methods: {
    init() {

    },
    changeLanguage(event) {
      this.$i18n.locale = event // 改变为中文
      localStorage.setItem('language', event)//在localStorage中存入设置
    },
  },
};
</script>
<style lang="scss">
.language-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 100%;

  .el-input--suffix .el-input__inner {
    padding: 0;
    border: none;
  }
}
</style>
