<template>
  <view class="tag-list" :class="{ 'tag-list-scrollable': scrollable }">
    <scroll-view
      v-if="scrollable"
      class="tag-scroll"
      scroll-x
      :show-scrollbar="false"
    >
      <view class="tag-list-inner">
        <view
          v-for="(tag, index) in displayTags"
          :key="index"
          class="tag-item"
          :class="[
            `tag-${type}`,
            `tag-${size}`,
            { 'tag-active': isActive(tag) }
          ]"
          @tap="handleClick(tag, index)"
        >
          <u-icon v-if="tag.icon" :name="tag.icon" :size="iconSize" class="tag-icon"></u-icon>
          <text class="tag-text">{{ getTagLabel(tag) }}</text>
          <u-icon v-if="closable" name="close" :size="closeIconSize" class="tag-close" @tap.stop="handleClose(tag, index)"></u-icon>
        </view>

        <!-- 更多按钮 -->
        <view v-if="showMore && tags.length > limit" class="tag-item tag-more" @tap="handleToggle">
          <text class="tag-text">{{ expanded ? '收起' : `+${tags.length - limit}` }}</text>
        </view>
      </view>
    </scroll-view>

    <view v-else class="tag-list-inner">
      <view
        v-for="(tag, index) in displayTags"
        :key="index"
        class="tag-item"
        :class="[
          `tag-${type}`,
          `tag-${size}`,
          { 'tag-active': isActive(tag) }
        ]"
        @tap="handleClick(tag, index)"
      >
        <u-icon v-if="tag.icon" :name="tag.icon" :size="iconSize" class="tag-icon"></u-icon>
        <text class="tag-text">{{ getTagLabel(tag) }}</text>
        <u-icon v-if="closable" name="close" :size="closeIconSize" class="tag-close" @tap.stop="handleClose(tag, index)"></u-icon>
      </view>

      <!-- 更多按钮 -->
      <view v-if="showMore && tags.length > limit" class="tag-item tag-more" @tap="handleToggle">
        <text class="tag-text">{{ expanded ? '收起' : `+${tags.length - limit}` }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

type TagType = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'
type TagSize = 'small' | 'medium' | 'large'

interface Tag {
  label?: string
  value?: string | number
  icon?: string
  type?: TagType
  [key: string]: any
}

interface Props {
  tags: (string | Tag)[]      // 标签数据
  type?: TagType               // 标签类型
  size?: TagSize               // 标签尺寸
  activeValue?: any            // 当前激活值
  closable?: boolean           // 是否可关闭
  scrollable?: boolean         // 是否横向滚动
  limit?: number               // 显示数量限制
  showMore?: boolean           // 是否显示更多按钮
}

const props = withDefaults(defineProps<Props>(), {
  type: 'default',
  size: 'medium',
  closable: false,
  scrollable: false,
  limit: 999,
  showMore: false
})

const emit = defineEmits<{
  (e: 'click', tag: string | Tag, index: number): void
  (e: 'close', tag: string | Tag, index: number): void
}>()

const expanded = ref(false)

// 显示的标签
const displayTags = computed(() => {
  if (props.showMore && !expanded.value) {
    return props.tags.slice(0, props.limit)
  }
  return props.tags
})

// 图标尺寸
const iconSize = computed(() => {
  const sizeMap = {
    small: 20,
    medium: 24,
    large: 28
  }
  return sizeMap[props.size]
})

// 关闭图标尺寸
const closeIconSize = computed(() => {
  const sizeMap = {
    small: 18,
    medium: 20,
    large: 24
  }
  return sizeMap[props.size]
})

// 获取标签文本
const getTagLabel = (tag: string | Tag): string => {
  if (typeof tag === 'string') return tag
  return tag.label || String(tag.value || '')
}

// 获取标签值
const getTagValue = (tag: string | Tag): any => {
  if (typeof tag === 'string') return tag
  return tag.value !== undefined ? tag.value : tag.label
}

// 是否激活
const isActive = (tag: string | Tag): boolean => {
  if (props.activeValue === undefined) return false
  return getTagValue(tag) === props.activeValue
}

// 点击标签
const handleClick = (tag: string | Tag, index: number) => {
  emit('click', tag, index)
}

// 关闭标签
const handleClose = (tag: string | Tag, index: number) => {
  emit('close', tag, index)
}

// 切换展开/收起
const handleToggle = () => {
  expanded.value = !expanded.value
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';

.tag-list {
  width: 100%;
}

.tag-list-scrollable {
  overflow: hidden;
}

.tag-scroll {
  width: 100%;
  white-space: nowrap;
}

.tag-list-inner {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.tag-list-scrollable .tag-list-inner {
  display: inline-flex;
  flex-wrap: nowrap;
  padding-right: 24rpx;
}

/* ========== 标签项 ========== */
.tag-item {
  display: inline-flex;
  align-items: center;
  gap: 6rpx;
  border-radius: $radius-xs;
  transition: $transition-all;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ========== 尺寸 ========== */
.tag-small {
  padding: 4rpx 12rpx;
  font-size: $font-xs;
  height: 40rpx;
}

.tag-medium {
  padding: 6rpx 16rpx;
  font-size: $font-sm;
  height: 48rpx;
}

.tag-large {
  padding: 8rpx 20rpx;
  font-size: $font-base;
  height: 56rpx;
}

/* ========== 类型 ========== */
.tag-default {
  background: $gray-100;
  color: $text-secondary;

  &.tag-active {
    background: $primary-color;
    color: $text-inverse;
  }
}

.tag-primary {
  background: $primary-50;
  color: $primary-color;

  &.tag-active {
    background: $primary-color;
    color: $text-inverse;
  }
}

.tag-success {
  background: $success-bg;
  color: $success-color;

  &.tag-active {
    background: $success-color;
    color: $text-inverse;
  }
}

.tag-warning {
  background: $warning-bg;
  color: $warning-color;

  &.tag-active {
    background: $warning-color;
    color: $text-inverse;
  }
}

.tag-error {
  background: $error-bg;
  color: $error-color;

  &.tag-active {
    background: $error-color;
    color: $text-inverse;
  }
}

.tag-info {
  background: $info-bg;
  color: $info-color;

  &.tag-active {
    background: $info-color;
    color: $text-inverse;
  }
}

/* ========== 更多按钮 ========== */
.tag-more {
  background: transparent;
  border: 1rpx dashed $border-base;
  color: $text-tertiary;

  &:active {
    background: $bg-hover;
  }
}

/* ========== 图标 ========== */
.tag-icon {
  flex-shrink: 0;
}

.tag-close {
  flex-shrink: 0;
  margin-left: 4rpx;
  opacity: 0.6;

  &:active {
    opacity: 1;
  }
}

/* ========== 文字 ========== */
.tag-text {
  line-height: 1;
}
</style>
