<template>
  <div class="changeLang-box" >
    <div class="changeLang-item" @click="changeLang">
      <el-button type="primary" v-if="showButton">{{lang==='ch'?'切换英文版':'切换中文版'}}</el-button>
      <template v-else>
        <img src="../../../assets/img/icons/changeLang.png" />
        <span v-show="lang=='en'">切换中文</span>
        <span v-show="lang=='ch'">切换英文</span>

      </template>
    </div>
  </div>
</template>
<script>
export default {
  name:'changeLang',
  computed: {
    showButton(){
      let showButtonpath = ['/database','/predictEdb','/chartsetting','mychart'];
      return showButtonpath.includes(this.$route.path)
    }
  },
  props:{
    lang:{
      type:String,
      required:true,
      default:'ch'
    }
  },
  data() {
    return {
      
    }
  },
  methods:{
    changeLang(){
      if(this.lang === 'en') {
        this.$emit('changeLang','ch')
      }else{
        this.$emit('changeLang','en')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .changeLang-box{
    text-align:right;
    .changeLang-item{
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      height: 100%;
      align-self: flex-start;
      cursor: pointer;
      img{
        margin-right: 2px;
      }
      span{
        color:#409EFF ;
        font-size: 16px;
        font-weight: 400;
      }
    }
  }
</style>