<template>
  <view class="filter-bar">
    <scroll-view scroll-x class="filter-scroll">
      <view
        v-for="item in filterItems"
        :key="item.key"
        :class="['filter-btn', { active: activeFilter === item.key }]"
        @tap="toggleFilter(item.key)"
      >
        <text>{{ item.label }}</text>
        <text class="filter-arrow" v-if="item.key !== 'more'">▾</text>
      </view>
    </scroll-view>

    <!-- 价格筛选面板 -->
    <view class="filter-panel" v-if="activeFilter === 'price'">
      <view class="price-options">
        <view
          v-for="opt in priceOptions"
          :key="opt.label"
          :class="['option-item', { active: selectedPrice === opt.label }]"
          @tap="selectPrice(opt)"
        >
          {{ opt.label }}
        </view>
      </view>
    </view>

    <!-- 排序面板 -->
    <view class="filter-panel" v-if="activeFilter === 'sort'">
      <view class="sort-options">
        <view
          v-for="opt in sortOptions"
          :key="opt.value"
          :class="['option-item', { active: currentSort === opt.value }]"
          @tap="selectSort(opt.value)"
        >
          {{ opt.label }}
        </view>
      </view>
    </view>
  </view>

  <!-- 遮罩层 -->
  <view class="filter-mask" v-if="activeFilter" @tap="activeFilter = ''"></view>
</template>

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

const props = defineProps<{
  priceRange?: { min?: number; max?: number };
  sortBy?: string;
}>();

const emit = defineEmits<{
  (e: 'filter', data: { minPrice?: number; maxPrice?: number; sortBy?: string }): void;
}>();

const activeFilter = ref('');
const selectedPrice = ref('');
const currentSort = ref(props.sortBy || '');

const filterItems = [
  { key: 'price', label: '价格' },
  { key: 'sort', label: '排序' },
];

const priceOptions = [
  { label: '不限', min: undefined, max: undefined },
  { label: '0-200', min: 0, max: 200 },
  { label: '200-500', min: 200, max: 500 },
  { label: '500-1000', min: 500, max: 1000 },
  { label: '1000以上', min: 1000, max: undefined },
];

const sortOptions = [
  { label: '默认排序', value: '' },
  { label: '价格从低到高', value: 'price_asc' },
  { label: '价格从高到低', value: 'price_desc' },
  { label: '评分最高', value: 'rating_desc' },
];

function toggleFilter(key: string) {
  activeFilter.value = activeFilter.value === key ? '' : key;
}

function selectPrice(opt: { label: string; min?: number; max?: number }) {
  selectedPrice.value = opt.label;
  activeFilter.value = '';
  emit('filter', { minPrice: opt.min, maxPrice: opt.max, sortBy: currentSort.value || undefined });
}

function selectSort(value: string) {
  currentSort.value = value;
  activeFilter.value = '';
  emit('filter', { minPrice: undefined, maxPrice: undefined, sortBy: value || undefined });
}
</script>

<style lang="scss" scoped>
.filter-bar {
  position: relative;
  z-index: 10;
  background: #fff;
}

.filter-scroll {
  white-space: nowrap;
  padding: 16rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 12rpx 24rpx;
  margin-right: 16rpx;
  border-radius: 32rpx;
  font-size: 26rpx;
  color: #666;
  background: #f5f5f5;

  &.active {
    color: #FF6B35;
    background: #fff1eb;
  }
}

.filter-arrow {
  font-size: 20rpx;
  margin-left: 4rpx;
}

.filter-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  padding: 16rpx 24rpx;
  z-index: 11;
  border-bottom: 1rpx solid #eee;
}

.price-options,
.sort-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.option-item {
  padding: 14rpx 28rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  font-size: 26rpx;
  color: #333;

  &.active {
    color: #FF6B35;
    background: #fff1eb;
    font-weight: 600;
  }
}

.filter-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9;
}
</style>
