<template>
  <!-- 筛选弹窗 -->
  <view>
    <view
      class="filter-overlay"
      :class="{ show: visible }"
      @tap="onClose"
    ></view>
    <view class="filter-drawer" :class="{ show: visible }">
      <view class="filter-drawer-header">
        <text class="filter-drawer-title">筛选条件</text>
        <text class="filter-drawer-close" @tap="onClose">✕</text>
      </view>
      <scroll-view scroll-y class="filter-drawer-body">
        <!-- 动态标签筛选组 -->
        <view class="filter-group" v-for="(group, gIdx) in groups" :key="gIdx">
          <text class="filter-group-title">{{ group.title }}</text>
          <view class="filter-options">
            <view
              class="filter-option"
              :class="{ selected: isSelected(group, tag.id) }"
              v-for="(tag, tIdx) in group.tags"
              :key="tIdx"
              @tap="onToggle(gIdx, tag.id)"
            >
              {{ tag.name }}
            </view>
          </view>
        </view>
        <!-- 价格区间 -->
        <view class="filter-group">
          <text class="filter-group-title">价格区间</text>
          <view class="filter-price-range">
            <input class="price-input" placeholder="最低价" type="number" />
            <text class="price-divider">-</text>
            <input class="price-input" placeholder="最高价" type="number" />
          </view>
        </view>
      </scroll-view>
      <view class="filter-drawer-footer">
        <view class="filter-reset" @tap="onReset">重置</view>
        <view class="filter-confirm" @tap="onConfirm">确定</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FilterDrawer',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    groups: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    isSelected(group, tagId) {
      return (group.selected || []).indexOf(tagId) > -1
    },
    onToggle(gIdx, tagId) {
      this.$emit('toggle-tag', { groupIndex: gIdx, tagId })
    },
    onReset() {
      this.$emit('reset')
    },
    onConfirm() {
      this.$emit('confirm')
    },
    onClose() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.filter-overlay.show {
  opacity: 1;
  visibility: visible;
}
.filter-drawer {
  position: fixed;
  top: 0;
  right: -600rpx;
  width: 600rpx;
  height: 100%;
  background: #ffffff;
  z-index: 999;
  display: flex;
  flex-direction: column;
  transition: right 0.3s;
}
.filter-drawer.show {
  right: 0;
}
.filter-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 2rpx solid #f5f5f5;
}
.filter-drawer-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1a1a1a;
}
.filter-drawer-close {
  font-size: 32rpx;
  color: #999999;
}
.filter-drawer-body {
  flex: 1;
  padding: 0 32rpx;
}
.filter-group {
  padding: 32rpx 0;
  border-bottom: 2rpx solid #f5f5f5;
}
.filter-group-title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 20rpx;
}
.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.filter-option {
  padding: 14rpx 28rpx;
  font-size: 24rpx;
  color: #666666;
  background: #f5f5f5;
  border-radius: 30rpx;
  border: 2rpx solid transparent;
}
.filter-option.selected {
  background: #fff0e5;
  color: #ff6800;
  border-color: #ff6800;
}
.filter-price-range {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
.price-input {
  flex: 1;
  height: 72rpx;
  padding: 0 20rpx;
  background: #f5f5f5;
  border-radius: 12rpx;
  font-size: 26rpx;
  color: #333333;
  text-align: center;
}
.price-divider {
  font-size: 28rpx;
  color: #999999;
}
.filter-drawer-footer {
  display: flex;
  gap: 24rpx;
  padding: 24rpx 32rpx;
  border-top: 2rpx solid #f5f5f5;
}
.filter-reset {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 40rpx;
  font-size: 28rpx;
  color: #666666;
}
.filter-confirm {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff6800;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 600;
  color: #ffffff;
}
</style>
