<template>
  <div class="title-box">
    <div class="text" @click="click">语言选择 <i v-if="visible" class="el-icon-sort" /><i v-else class="el-icon-arrow-down" />
    </div>
    <div class="select-box">
      <ul v-show="visible">
        <li v-for="(item,index) in languages" :key="index" :class="currentObj===item?'active':''" @click="choose(item,index)">
          {{ item.label }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      languages: [{
        value: 'CH',
        label: '中文'
      }],
      currentObj: {},
      visible: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.currentObj = this.languages[0]
    })
  },
  methods: {
    click() {
      this.visible = !this.visible
    },
    choose(item, index) {
      this.visible = false
      this.currentObj = item
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.title-box {
  padding: 1px 15px 1px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 48px;
  cursor: pointer;
  user-select: none;
}
.select-box {
  position: relative;
  font-size: 16px;
  line-height: 32px;
  ul {
    list-style: none;
    margin: 0;
    position: absolute;
    padding-inline-start: 0;
    background-color: #1482f0;
    width: 100%;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    li {
      padding: 0 10px;
      text-align: center;
      font-weight: 200;
      color: #eee;
    }
    li:hover {
      padding: 0 10px;
      color: wheat;
      background: rgba(255, 255, 255, 0.2);
    }
    .active {
      font-weight: 600;
      color: white;
    }
  }
}
</style>
