<template>
  <div v-show="show" class="i-select bg-white flex flex-col absolute shadow">
    <div
      class="i-select-item flex py-2 px-3 items-center cursor-pointer"
      style="border-bottom: 1px solid #efefef"
      @click="selectLanguage('zh-CN')"
    >
      <img src="@/assets/images/header/ZH.png" alt="" />
      <p class="text-sm text-text-color ml-3">{{ $t("lang.zh") }}</p>
    </div>
    <div
      class="i-select-item flex py-2 px-3 items-center cursor-pointer"
      @click="selectLanguage('en')"
    >
      <img src="@/assets/images/header/EN.png" alt="" />
      <p class="text-sm text-text-color ml-3">{{ $t("lang.en") }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import locale from "element-ui/lib/locale";
import enLocale from "element-ui/lib/locale/lang/en";
import zhLocale from "element-ui/lib/locale/lang/zh-CN";
import moment from "moment";

import Vue from "vue";
export default Vue.extend({
  props: {
    show: Boolean,
  },
  data() {
    return {};
  },
  methods: {
    selectLanguage(v: string) {
      if (v === "zh-CN") {
        locale.use(zhLocale);
      } else {
        locale.use(enLocale);
      }
      this.$emit("selectIcon", v);
      this.$emit("hidden", true);
      window.sessionStorage.setItem("language", v);
      this.$i18n.locale = v === "zh-CN" ? "zh" : "en";
      document.title = `${this.$t("lang.YUANLIAN")}——${this.$t("lang.title")}`;
      moment.locale(v === "zh-CN" ? "zh-cn" : "en");
      this.$router.replace({
        path: this.$route.path,
        query: { ...this.$route.query, lang: v },
      });
    },
  },
});
</script>

<style scoped>
.i-select {
  width: 100px;
  border-radius: 4px;
  left: 0;
  top: 20px;
}
</style>