<template>
  <el-popover trigger="hover" class="mx-generation-rank">
    <div v-for="(desc,idx) in rankDescriptors" :key="idx">
      <span>{{ desc.description }}</span> <span class="bold">{{ desc.value }}</span>
    </div>
    <el-tag slot="reference" size="mini" class="round-y ml3" effect="dark">
      {{ rankDescriptors.map(d => d.value).join('/') }}
    </el-tag>
  </el-popover>
</template>

<script>
export default {
  name: 'elective-flow-rank-descriptor',
  props: ['rankDescriptors']
}
</script>

<style scoped>

</style>
