<template>
  <span
    class="kole-tag"
    :class="tagClass"
    :style="customStyle"
  >
    <slot />
    <i v-if="closable" class="kole-tag-close" title="移除" @click.stop="$emit('close')">×</i>
  </span>
</template>

<script>
export default {
  name: 'KoleTag',
  props: {
    color: { type: String, default: '' },     // '' | blue | green | red | orange | gray | 自定义 hex
    dot: { type: Boolean, default: false },    // 圆点模式
    closable: { type: Boolean, default: false }
  },
  computed: {
    PRESET() { return ['green', 'red', 'orange', 'gray']; },
    isCustom() { return !!this.color && !this.PRESET.includes(this.color) && this.color !== 'blue'; },
    tagClass() {
      const c = [];
      if (this.dot) c.push('kole-tag-dot');
      if (this.isCustom) c.push('kole-tag-custom');
      else if (this.color && this.color !== 'blue') c.push('kole-tag-' + this.color);
      return c;
    },
    customStyle() {
      if (!this.isCustom) return {};
      return { '--kole-tag-color': this.color, '--kole-tag-bg': this.hexToTint(this.color) };
    }
  },
  methods: {
    hexToTint(hex) {
      const h = hex.replace('#', '');
      const r = parseInt(h.slice(0, 2), 16), g = parseInt(h.slice(2, 4), 16), b = parseInt(h.slice(4, 6), 16);
      return `rgba(${r},${g},${b},0.1)`;
    }
  }
};
</script>

<!-- 样式对齐设计令牌 -->
<style>
.kole-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 1px 8px; box-sizing: border-box;
  font-size: 12px; line-height: 1; border-radius: 2px; background: #F0F5FF; color: #2F54EB; white-space: nowrap; border: 1px solid transparent; }
.kole-tag.kole-tag-green { background: #F6FFED; color: #2E7D0A; }
.kole-tag.kole-tag-red { background: #FFF1F0; color: #CF1322; }
.kole-tag.kole-tag-orange { background: #FFF7E6; color: #8C5A00; }
.kole-tag.kole-tag-gray { background: #F5F5F5; color: #6E6E6E; }
.kole-tag.kole-tag-custom { background: var(--kole-tag-bg); color: var(--kole-tag-color); }
.kole-tag.kole-tag-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.kole-tag-close { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
  margin-right: -2px; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1; color: inherit; opacity: .65; }
.kole-tag-close:hover { opacity: 1; background: rgba(0,0,0,0.08); }
</style>
