<template>
  <div class="email-list-warp" v-show="show">
    <template v-if="mailboxSuffix.length<0">
      <div class="email-list-item" v-for="(item, index) in mailboxSuffix" :key="index" @click="chooseItem(item)">
      {{ item.emailName }}
    </div>
    </template>
    <template><div class="email-list-item">暂无数据</div></template>
  </div>
</template>

<script>
export default {
  name: 'EmailIndexBar',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    mailboxSuffix: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    chooseItem(val) {
      this.$emit('chooseItem', val);
      this.$emit('update:show', false);
    }
  }
};
</script>

<style lang="scss" scoped>
.email-list-warp {
  right: 0px;
  padding: 6px 0px;
  z-index: 9;
  max-height: 140px;
  min-width: 120px;
  border-radius: 6px;
  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.12); //   overflow: hidden;
  /* 中性色/基础白色 */
  background: #ffffff;
  .email-list-item {
    font-size: 14px;
    color: #62606e;
    line-height: 20px;
    padding: 6px 0px;
    text-align: center;
    &:hover {
      color: #3a86ff;
      background: linear-gradient(0deg, rgba(58, 134, 255, 0.1), rgba(58, 134, 255, 0.1)), rgba(255, 255, 255, 0.1);
    }
  }
}
</style>