<template>
  <div class="filters_group">
      <div v-for="(filterItem,index) in filtersData" :key="index">
        <div class="tag_group" v-if="filterItem.list.length>0">
          <div class="tag_group_title">{{ filterItem.name }}：</div>
          <div class="tag_group_content">
            <div class="tag_item" v-for="item in filterItem.list" :key="item.value" @click="selectItem(index, item.value, filterItem)" :class="item.value == filterItem.value?'active':''">
              {{ item.label }}
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
  export default {
    props:{
      filtersData:{
        type:Array,
        default:()=>[]
      },//筛选公共组件数据
    },
    data() {
      return {
      }
    },
    methods:{

      //筛选点击事件
      selectItem(index, val, item){
        if(this.filtersData[index].value == val) return;
        let d = {index, value: val}
        this.$emit('selectItem', d, item)
      }
    }
  }
</script>
<style lang="scss" scoped>
.filters_group {
  background: #fff;
  .tag_group{
    padding:8px 0;
    display: flex;
    justify-content: flex-start;
    .tag_group_title{
      // width: 70px;
      width: auto;
      height: auto;
      margin-right: 8px;
      color:#333333;
      font-size:14px;
      text-align: left;
      line-height: 30px;
      font-weight: 600;
      letter-spacing: 0em;
    }
    .tag_group_content
    {
      width: calc(100% - 80px);
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      .tag_item {
        
        padding:0 8px;
        line-height:30px;
        border-radius:2px;
        font-size: 14px;
        background: #fff;
        color:#999999;
        
        cursor: pointer;
        &.active {
          // background: #2E64FA;
          // color:white;
          background: rgba(71,113,203,0.1);
          color:#2E64FA;
        }
        &:hover
        {
          color:#2E64FA;
        }
      }
    }
    
    
  } 
}
</style>
