<template>
	<view class="filter-panel filter-panel-sticky">
		<view class="filter-head">
			<view class="filter-head-left" @click="toggle">
				<text class="filter-title">{{ title }}</text>
				<text class="filter-toggle">{{ expanded ? '收起' : '展开' }}</text>
			</view>
			<text v-if="showClear" class="filter-clear-btn" @click.stop="onClear">清空</text>
		</view>
		<view v-show="expanded" class="filter-body">
			<slot />
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CollapsibleFilterPanel',
		props: {
			title: { type: String, default: '筛选条件' },
			defaultExpanded: { type: Boolean, default: false },
			showClear: { type: Boolean, default: true },
		},
		data() {
			return {
				expanded: this.defaultExpanded,
			}
		},
		methods: {
			toggle() {
				this.expanded = !this.expanded
			},
			onClear() {
				this.$emit('clear')
			},
		},
	}
</script>

<style lang="scss" scoped>
.filter-panel {
	background: #fff;
	border-radius: 16rpx;
	margin-bottom: 24rpx;
	overflow: hidden;
}
.filter-panel-sticky {
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}
.filter-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx;
}
.filter-head-left {
	display: flex;
	align-items: center;
	flex: 1;
	gap: 16rpx;
}
.filter-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}
.filter-toggle {
	font-size: 26rpx;
	color: #6acdbb;
}
.filter-clear-btn {
	font-size: 26rpx;
	color: #999;
	padding: 8rpx 0 8rpx 24rpx;
	flex-shrink: 0;
}
.filter-body {
	padding: 0 24rpx 24rpx;
}
</style>
