<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 Vue from 'vue'
export default Vue.extend({
  props: {
    show: Boolean
  },
  data() {
    return {
      
    }
  },
  methods: {
    selectLanguage(v: string) {
      this.$emit('selectIcon', v)
      this.$emit('hidden', true)
      window.sessionStorage.setItem('language', v)
      this.$i18n.locale = v === 'zh-CN' ? 'zh' : 'en'
      console.log({...this.$route.query, lang: v})
      this.$router.replace({ path: this.$route.path, query: { ...this.$route.query, lang: v }})
    }
  },
  created() {
    // const _b = document.body || document.documentElement
    // _b.addEventListener('click', (e) => {
    //   if (!this.show) return
    //   for (let item of e.path) {
    //     try {
    //       if (item.getAttribute('class').indexOf('i-select-item') <= -1) {
    //         this.$emit('hidden', true)
    //       }
    //     } catch(e) {
    //       throw Error(e)
    //     }
    //   }
    // })
  },
  watch: {
    // $route() {

    // }
  }
})
</script>

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