<template>
  <view class="filter-bar" :class="{ 'filter-bar-sticky': sticky }" :style="{ top: stickyTop }">
    <scroll-view class="filter-scroll" scroll-x :show-scrollbar="false">
      <view class="filter-list">
        <!-- 筛选项 -->
        <view
          v-for="(filter, index) in filters"
          :key="index"
          class="filter-item"
          :class="{ 'filter-active': isActive(filter) }"
          @tap="handleFilterClick(filter, index)"
        >
          <text class="filter-text">{{ filter.label }}</text>
          <u-icon
            v-if="filter.type === 'dropdown'"
            name="arrow-down"
            :size="16"
            :class="{ 'icon-rotate': activeFilter === filter.key }"
          ></u-icon>
        </view>

        <!-- 更多筛选按钮 -->
        <view v-if="showMore" class="filter-item filter-more" @tap="handleMoreClick">
          <u-icon name="filter" :size="28"></u-icon>
          <text class="filter-text">筛选</text>
          <view v-if="filterCount > 0" class="filter-badge">{{ filterCount }}</view>
        </view>
      </view>
    </scroll-view>

    <!-- 下拉面板 -->
    <view v-if="showDropdown" class="filter-dropdown" @tap="handleMaskClick">
      <view class="dropdown-content" @tap.stop>
        <scroll-view class="dropdown-scroll" scroll-y>
          <view class="dropdown-body">
            <slot name="dropdown" :filter="currentFilter"></slot>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

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

interface Filter {
  key: string
  label: string
  type?: 'single' | 'dropdown'
  value?: any
  options?: any[]
}

interface Props {
  filters: Filter[]           // 筛选项列表
  activeKey?: string          // 当前激活的筛选项
  sticky?: boolean            // 是否吸顶
  stickyTop?: string          // 吸顶位置
  showMore?: boolean          // 是否显示更多筛选
  filterCount?: number        // 已选筛选数量
}

const props = withDefaults(defineProps<Props>(), {
  sticky: false,
  stickyTop: '0',
  showMore: true,
  filterCount: 0
})

const emit = defineEmits<{
  'filter-click': [filter: Filter, index: number]
  'more-click': []
  'dropdown-close': []
}>()

const activeFilter = ref<string>('')
const showDropdown = ref(false)
const currentFilter = ref<Filter | null>(null)

// 是否激活
const isActive = (filter: Filter) => {
  if (filter.type === 'dropdown') {
    return activeFilter.value === filter.key
  }
  return filter.value !== undefined && filter.value !== null && filter.value !== ''
}

// 筛选项点击
const handleFilterClick = (filter: Filter, index: number) => {
  if (filter.type === 'dropdown') {
    // 下拉类型
    if (activeFilter.value === filter.key) {
      // 关闭下拉
      activeFilter.value = ''
      showDropdown.value = false
      currentFilter.value = null
    } else {
      // 打开下拉
      activeFilter.value = filter.key
      showDropdown.value = true
      currentFilter.value = filter
    }
  } else {
    // 单选类型
    emit('filter-click', filter, index)
  }
}

// 更多筛选点击
const handleMoreClick = () => {
  emit('more-click')
}

// 遮罩点击
const handleMaskClick = () => {
  activeFilter.value = ''
  showDropdown.value = false
  currentFilter.value = null
  emit('dropdown-close')
}

// 暴露方法：关闭下拉
defineExpose({
  closeDropdown: () => {
    activeFilter.value = ''
    showDropdown.value = false
    currentFilter.value = null
  }
})
</script>

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

.filter-bar {
  position: relative;
  background: $bg-card;
  border-bottom: 1rpx solid $border-light;
  z-index: $z-sticky;
}

.filter-bar-sticky {
  position: sticky;
  top: 0;
}

/* ========== 筛选滚动容器 ========== */
.filter-scroll {
  width: 100%;
  white-space: nowrap;
}

.filter-list {
  display: inline-flex;
  align-items: center;
  padding: 0 $spacing-md;
  gap: $spacing-lg;
}

/* ========== 筛选项 ========== */
.filter-item {
  display: inline-flex;
  align-items: center;
  gap: 4rpx;
  padding: $spacing-md $spacing-sm;
  white-space: nowrap;
  transition: $transition-all;
  position: relative;

  &:active {
    opacity: 0.7;
  }
}

.filter-active {
  .filter-text {
    color: $primary-color;
    font-weight: $font-semibold;
  }

  .u-icon {
    color: $primary-color;
  }
}

.filter-text {
  font-size: $font-base;
  color: $text-primary;
  transition: $transition-color;
}

/* 图标旋转 */
.icon-rotate {
  transform: rotate(180deg);
  transition: $transition-transform;
}

/* ========== 更多筛选 ========== */
.filter-more {
  position: relative;
}

.filter-badge {
  position: absolute;
  top: 8rpx;
  right: 0;
  min-width: 28rpx;
  height: 28rpx;
  padding: 0 6rpx;
  background: $error-color;
  color: $text-inverse;
  font-size: $font-xs;
  font-weight: $font-medium;
  border-radius: $radius-round;
  @include flex-center;
}

/* ========== 下拉面板 ========== */
.filter-dropdown {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: $bg-mask;
  z-index: $z-dropdown;
  animation: fadeIn $transition-base $ease-out;
}

.dropdown-content {
  background: $bg-card;
  max-height: 60vh;
  animation: slideDown $transition-base $ease-out;
}

.dropdown-scroll {
  max-height: 60vh;
}

.dropdown-body {
  padding: $spacing-xl;
}

/* ========== 动画 ========== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
</style>
