<!-- 筛选区域 -->
<template>
  <div class="filter-panel">
    <div v-if="enableCollapse" class="filter-header" @click="toggleCollapse">
      <div class="filter-title">
        <i class="fas fa-filter mr-2" />
        <span>筛选条件</span>
        <van-tag v-if="collapsed" type="primary" class="ml-2">{{ activeFilterCount }} 个条件</van-tag>
      </div>
      <div class="filter-toggle">
        <span class="text-sm text-gray-500 mr-2">{{ collapsed ? '展开' : '收起' }}</span>
        <i :class="collapsed ? 'fas fa-chevron-down' : 'fas fa-chevron-up'" class="text-gray-500" />
      </div>
    </div>
    
    <div v-show="!collapsed" class="filter-content" :class="{ 'no-border': !enableCollapse }">
      <slot />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineProps } from 'vue';

const props = defineProps({
    defaultCollapsed: {
        type: Boolean,
        default: false,
    },
    activeCount: {
        type: Number,
        default: 0,
    },
    enableCollapse: {
        type: Boolean,
        default: true,
    },
});

const collapsed = ref(props.defaultCollapsed);

const activeFilterCount = computed(() => props.activeCount);

const toggleCollapse = () => {
    collapsed.value = !collapsed.value;
};
</script>

<style scoped>
.filter-panel {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
  overflow: visible;
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
  border-bottom: 1px solid #f3f4f6;
}

.filter-header:hover {
  background-color: #f9fafb;
}

.filter-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: #374151;
  font-size: 0.95rem;
}

.filter-toggle {
  display: flex;
  align-items: center;
  color: #6b7280;
  font-size: 0.875rem;
}

.filter-content {
  padding: 1.5rem;
  animation: slideDown 0.3s ease-out;
}

.filter-content.no-border {
  border-top: none;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
