<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 setup>
import { computed } from 'vue';

const props = defineProps({
  color: { type: String, default: '' },     // '' | blue | green | red | orange | gray | 自定义 hex
  dot: { type: Boolean, default: false },    // 圆点模式
  closable: { type: Boolean, default: false }
});
defineEmits(['close']);

const PRESET = ['green', 'red', 'orange', 'gray'];
const isCustom = computed(() => !!props.color && !PRESET.includes(props.color) && props.color !== 'blue');
const tagClass = computed(() => {
  const c = [];
  if (props.dot) c.push('kole-tag-dot');
  if (isCustom.value) c.push('kole-tag-custom');
  else if (props.color && props.color !== 'blue') c.push('kole-tag-' + props.color);
  return c;
});
const customStyle = computed(() => {
  if (!isCustom.value) return {};
  return { '--kole-tag-color': props.color, '--kole-tag-bg': hexToTint(props.color) };
});
function 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 scoped>
.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>
