<template>
  <div class="ws-locale-picker">
    <v-icon color="textPrimary">mdi-web</v-icon>
    <div class="ws-locale-picker__title textPrimary--text">{{title}}</div>
    <WsStateSelect
      minWidth="130px"
      @input="$emit('input',$event)"
      :items="_localeItems"
      :value="value"
      round
      evevate
    ></WsStateSelect>
  </div>
</template>

<script>
export default {
  computed: {
    _localeItems() {
      const _localeItems = [];
      const locales = this.$store.state.locale.locales;
      locales.forEach(locale => {
        _localeItems.push({
          value: locale.code,
          text: locale.name
        });
      });
      return _localeItems;
    }
  },
  mounted() {
    if (!this.value) {
      // this.$emit('input')
      const tarLocale = this.$store.state.user.currentUser.locale
        ? this.$store.state.user.currentUser.locale
        : "tw";
      this.$emit("input", tarLocale);
    }
  },
  props: {
    title: {
      type: String,
      default: null
    },
    value: {
      type: String,
      default: null
    }
  }
};
</script>

<style lang="scss">
@import "../assets/scss/ws-locale-picker.scss";
</style>