<template>
  <el-tooltip
    placement="right"
    effect="dark">
    <div
      class="tagWrap"
      slot="content">
      <el-tag
        v-for="(item,index) in value"
        :key="index"
        size="mini"
        :color="colorPalette[index%8]"
      >
        {{ item }}
      </el-tag>
    </div>
    <slot></slot>
  </el-tooltip>
</template>

<script>
const colorPalette = [
  '#c12e34', '#0098d9', '#e6b600', '#2b821d',
  '#005eaa', '#339ca8', '#cda819', '#32a487'
]

export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      colorPalette
    }
  }
}
</script>

<style lang="scss" scoped>
.tagWrap{
    display: inline-block;
    ::v-deep .el-tag{
        color: #fff; border: 0; border-radius: 0; vertical-align: bottom; text-decoration: none !important;
    }
}
</style>
