<template>
  <!-- 已选筛选标签 - Figma 1519:250 圆角 60px -->
  <view class="active-filters" v-if="list.length > 0">
    <view class="active-filter-tag" v-for="(item, index) in list" :key="index">
      <text class="filter-text">{{ item.label }}</text>
      <text class="filter-remove" @tap="onRemove(item.key)">×</text>
    </view>
    <view class="clear-all" @tap="onClearAll">清除全部</view>
  </view>
</template>

<script>
export default {
  name: 'ActiveFilters',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    onRemove(key) {
      this.$emit('remove', key)
    },
    onClearAll() {
      this.$emit('clear-all')
    }
  }
}
</script>

<style scoped>
/* 顶部筛选条 - 白底,不占高度时隐藏 */
.active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16rpx;
  padding: 20rpx 20rpx;
  background: #ffffff;
  border-bottom: 1rpx solid #eeeeee;
}
/* 单个标签 - padding 6px 10px 圆角 60px */
.active-filter-tag {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 20rpx;
  background: #ffffff;
  border: 1rpx solid #ff6800;
  border-radius: 60rpx;
  line-height: 1.2;
}
/* 文字 12px Medium 橙色 */
.filter-text {
  font-size: 24rpx;
  font-weight: 500;
  color: #ff6800;
}
.filter-remove {
  font-size: 24rpx;
  color: #ff6800;
}
.clear-all {
  margin-left: auto;
  font-size: 24rpx;
  color: #999999;
}
</style>
