<template>
   <v-picker class="d-inline-block" :value="lang" :list="langList" @change="selectLang" range-key="label">
     <image :src="url" mode="aspectFill" class="flag-img"></image>
		 <text>{{label}}</text>
   </v-picker>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "v-lang",
  props: {
    tag: {
      default: "span",
      type: String,
      required: false,
    },
  },
  computed: {
    ...mapState({
      langList: "langList",
      lang: "lang",
    }),
    label() {
      return this.langList.find((item) => item.value == this.lang).label;
    },
		url(){
			return this.langList.find((item) => item.value == this.lang).url;
		}
  },
  methods: {
    ...mapActions({
      setLang: "setLang",
    }),
    getCurrent(){
        let pages = getCurrentPages();
        let curPage = pages[pages.length - 1];
        return curPage
    },
    selectLang(value) {
      this.setLang(value)
      this.$emit('change')
      let path = '/'+this.getCurrent().route
    },
  },
};
</script>
<style lang="scss" scoped>
	.flag-img{
		width: 44upx;
		height: 44upx;
		border-radius: 50%;
		overflow: hidden;
		vertical-align: middle;
		margin-right: 12upx;
	}
</style>