<template>
  <view class="tags">
    <scroll-view class="tags-scroll" scroll-x="true" show-scrollbar="false">
      <view class="tags-row">
        <view
          v-for="t in tabs"
          :key="t.id"
          class="tag"
          :class="{ active: activeTabId === t.id }"
          @click="$emit('tab-click', t)"
        >
          <text class="tag-text">{{ t.title }}</text>
          <view class="tag-close" @click.stop="$emit('tab-close', t.id)">
            <text class="tag-close-text">×</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="uts">
import type { TabItem } from '../types.uts'

defineProps<{
  tabs: TabItem[]
  activeTabId: string
}>()

defineEmits<{
  (e:'tab-click', tab: TabItem): void
  (e:'tab-close', tabId: string): void
}>()
</script>

<style>
.tags{
  height: 44px;
  background:#fff;
  border-bottom: 1px solid #eef2f7;
  display:flex;
  align-items:center;
}
.tags-scroll{ width: 100%; height: 44px; }
.tags-row{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 0 12px;
  height: 44px;
}
.tag{
  height: 30px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  background:#fff;
  border-radius: 6px;
  display:flex;
  align-items:center;
  gap: 8px;
}
.tag.active{
  border-color:#1677ff;
  background:#eaf2ff;
}
.tag-text{ font-size:12px; color:#374151; }
.tag-close{
  width: 16px;
  height: 16px;
  border-radius: 8px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tag-close-text{ font-size:14px; color:#6b7280; line-height:14px; }
</style>
