<template>
  <el-dropdown type="primary" @command="handleCommand">
    <div v-if="size === 'large'" class="lang-change-btn">
      <img style="width: 24px; height: 24px" src="@/assets/earth.png" alt="" />
      <SvgIcon icon-class="earth" class-name="svg-icon-earth"></SvgIcon>
      {{ curLang }}
    </div>
    <img v-else style="width: 20px; height: 20px" src="@/assets/earth.png" alt="" />
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="lang in langs" :key="lang.value" :command="lang.value">
        {{ lang.text }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import i18n from '@/i18n'
import { ipcRenderer } from 'electron'
import SvgIcon from '@/components/SvgIcon/index.vue'

export default {
  components: {
    SvgIcon,
  },
  props: {
    size: {
      type: String,
      default: 'large',
    },
  },
  data() {
    return {
      langs: [
        {
          text: i18n.t('ying-wen'),
          value: 'en',
        },
        {
          text: i18n.t('zhong-wen'),
          value: 'zh-CN',
        },
        {
          text: i18n.t('e-yu'),
          value: 'ru-RU',
        },
        {
          text: i18n.t('sai-er-wei-ya-yu'),
          value: 'sr',
        },
      ],
    }
  },
  computed: {
    curLang() {
      const curVal = localStorage.getItem('lang') || 'zh-CN'
      return this.langs.find(({ value }) => value === curVal).text
    },
  },
  methods: {
    handleCommand(lang) {
      localStorage.setItem('lang', lang)
      ipcRenderer.send('window-lang-change')
    },
  },
}
</script>

<style>
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.lang-change-btn {
  display: flex;
  height: 54px;
  padding: 0px 16px;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--e-6-e-6-e-6, #e6e6e6);
}
</style>
