<template>
  <view class="popup-container">
    <view class="popup-header">
      <text class="title">筛选条件</text>
      <text class="close" @click="closePopup">关闭</text>
    </view>
    <view class="popup-content">
      <view class="row">
        <picker mode="selector" :range="brands" @change="onBrandChange">
          <view class="item">{{ selectedBrand || '选择品牌' }}</view>
        </picker>
        <picker mode="selector" :range="styles" @change="onStyleChange">
          <view class="item">{{ selectedStyle || '选择风格' }}</view>
        </picker>
      </view>
      <view class="column">
        <checkbox-group @change="onAreaChange">
          <label class="checkbox-item" v-for="(area, index) in areas" :key="index">
            <checkbox :value="area">{{ area }}</checkbox>
          </label>
        </checkbox-group>
      </view>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      brands: ['品牌A', '品牌B', '品牌C'], // 品牌列表
      styles: ['风格1', '风格2', '风格3'], // 风格列表
      areas: ['区域1', '区域2', '区域3'], // 区域列表
      selectedBrand: '', // 选中的品牌
      selectedStyle: '', // 选中的风格
      selectedAreas: [] // 选中的区域列表
    };
  },
  methods: {
    onBrandChange(e) {
      this.selectedBrand = this.brands[e.detail.value];
    },
    onStyleChange(e) {
      this.selectedStyle = this.styles[e.detail.value];
    },
    onAreaChange(e) {
      this.selectedAreas = e.detail.value;
    },
    closePopup() {
      this.$emit('close'); // 关闭弹出层，并触发父组件的方法处理筛选结果
    }
  }
};
</script>
 
<style scoped>
.popup-container {
  /* 样式 */
}
.popup-header {
  display: flex;
  justify-content: space-between;
}
.row, .column {
  display: flex;
}
.row {
  flex-direction: row; /* 横向排列 */
}
.column {
  flex-direction: column; /* 竖向排列 */
}
.item {
  margin: 10px; /* 间距 */
}
</style>