<template>
  <div class="label-tag">
    <template v-if="state.mergedConfig">
      <div v-for="(label, i) in state.mergedConfig.data" :key="label" class="label-item">
        {{ label }}
        <div :style="`background-color: ${state.mergedConfig.colors[i % state.mergedConfig.colors.length]};`"></div>
      </div>
    </template>
  </div>
</template>
  
<script lang="ts" setup name="LabelTag">
import { reactive, watch, onMounted } from 'vue'
import { deepClone, deepMerge } from '../utils'

const props = defineProps({
  labelData: {
    type: Object,
    default: () => ({}),
  },
})

const state = reactive({
  defaultConfig: {
    /**
         * @description Label data
         * @type {Array<String>}
         * @default data = []
         * @example data = ['label1', 'label2']
         */
    data: [],
    /**
         * @description Label color (Hex|Rgb|Rgba|color keywords)
         * @type {Array<String>}
         * @default colors = ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
         * @example colors = ['#666', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
         */
    colors: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
  },

  mergedConfig: {
    data: {},
    colors: [],
  },
})

watch(() => props.labelData, () => {
  mergeConfig()
})

function mergeConfig() {
  state.mergedConfig = deepMerge(deepClone(state.defaultConfig, true), props.labelData || {})
}

onMounted (() => {
  mergeConfig()
})
</script>
  
<style lang="scss" scoped>
.label-tag {
  display: flex;
  justify-content: center;
  align-items: center;

  .label-item {
    margin: 5px;
    font-size: 15px;
    display: flex;
    align-items: center;

    div {
      width: 12px;
      height: 12px;
      margin-left: 5px;
    }
  }
}
</style>