<template>
  <div>
    <Dropdown trigger="click" @on-click="selectLang">
      <a style="color: #515a6e; font-size:22px" href="javascript:void(0)">
        <!-- {{ title }} -->
        <Tooltip :content="title" placement="bottom">
        <Icon type="md-globe" />
        </Tooltip>
        <!-- <Icon :size="18" type="md-arrow-dropdown" /> -->
      </a>
      <DropdownMenu slot="list">
        <DropdownItem v-for="(value, key) in localList" :name="key" :key="`lang-${key}`">{{ value }}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
import { localList } from '@/locale/index.js'
export default {
  name: 'Language',
  props: {
    lang: String
  },
  data () {
    return {
      langList: {
        'zh_cn': '语言',
        'en': 'Lang'
      },
      localList: localList
    }
  },
  watch: {
    lang (lang) {
      this.$i18n.locale = lang
    }
  },
  computed: {
    title () {
      return this.langList[this.lang]
    }
  },
  methods: {
    selectLang (name) {
      this.$emit('on-lang-change', name)
    }
  }
}
</script>
