<template>
  <view class="filter-popup__content__right__items" :id="`filter_${info.id}`">
    <view class="filter-popup__content__right__items__title">{{
      info.title
    }}</view>
    <view
      v-for="(detailItem, index) in info.details"
      :key="detailItem.id"
      class="filter-popup__content__right__items__item"
      :class="{ active: detailLists.includes(detailItem.value) }"
      @click="selectDetail(detailItem)"
    >
      {{ detailItem.name }}
    </view>
    <slot></slot>
  </view>
</template>

<script>
/**
 * selectDetail 块被点击
 * isSingle 是否单选
 */
export default {
  name: "filterCard",
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
    //是否单选
    isSingle: {
      type: Boolean,
      default: false,
    },
    // 选中的详情列表
    infoDetailList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      detailLists: [], // 选中的详情列表
    };
  },
  created() {
   
  },
   computed: {
    
  },
  watch: {
     infoDetailList: {
      handler(newVal, oldVal) {
        // 当父组件传入的 infoDetailList 变化时，执行此处逻辑
        if(newVal.value=[]){
          this.detailLists = newVal;
        }
        
      },
      deep: true, // 若 infoDetailList 是复杂数组/对象（含嵌套），需要深度监听
      immediate: true // 初始化时立即执行一次（获取初始值）
    }
  },
  methods: {
    selectDetail(detail) {
      if (this.detailLists.includes(detail.value)) {
        //如果已经存在删除存在的字段
        this.detailLists = this.detailLists.filter(
          (item) => item !== detail.value
        );
      } else {
        if (this.isSingle) {
          //如果是单选，清空之前的选择
          this.detailLists = [];
        }
        this.detailLists = [...this.detailLists, detail.value];
      }
      this.$emit("selectDetail", this.detailLists);
    },
    reset() {
      this.detailLists = [];
    },
  },
};
</script>

<style scoped lang="less">
.filter-popup__content__right__items {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-bottom: 40rpx;
  &__title {
    width: 100%;
    font-weight: 500;
    font-size: 26rpx;
    color: #333333;
    line-height: 37rpx;
    text-align: left;
    font-style: normal;
    margin-bottom: 14rpx;
  }
  &__item {
    width: 178rpx;
    height: 78rpx;
    background: #f3f6f8;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
     border: 1rpx solid #f3f6f8;
  }
  .active {
    background: rgba(252, 67, 124, 0.1);
    color: #FF4767;
    border: 1rpx solid #FF4767;
  }
}
</style>
