<template>
    <div class="filters_group">
      <template v-for="(group,groupIndex) in data">
        <div class="group_item" v-if="(group.type != 'className' && group.list.length > 1) || (group.type == 'className' && group.list.length > 0)">
            <div class="group_title">
                {{group.label}}:
            </div>
            <div class="group_content">
              <div class="list_item" @click="HandleSelect(groupIndex,item.value)" v-for="item in group.list" :class="item.value == group.value ? 'list_item_cur' : ''">
                  {{item.label}}
              </div>
            </div>
        </div>
      </template>
    </div>
</template>

<script lang="ts">
export default {
  name: 'FiltersItem',//筛选基础组件
}
</script>
<script lang="ts" setup>
import { ref, reactive, onMounted, inject,defineProps, defineEmits } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'

export interface Props {
  data?: Array<{ label: string;list:any[], value: any }>
}

const props = withDefaults(defineProps<Props>(), {
  data: () => []
})
// 2. 定义 Emit 事件
const emit = defineEmits<{
  (e: 'select', index: any,value: any ): void
}>()

const HandleSelect =  (index: any, value: any) => 
{

  emit('select', index, value)
}

onMounted(() => {
  
})

</script>  
<style lang="scss" scoped>

.filters_group
{

}
.group_item
{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  line-height:28px;
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 10px;
  .group_title
  {
    width: 42px;
    font-weight: 600;
    font-size: 14px;
    color:#333333;
    flex-shrink: 0;
    // margin-right: 8px;
  }
  .group_content{
    display: flex;
    flex: 1;
    gap: 8px;
    flex-wrap: wrap;
  }
  .list_item
  {
    font-weight: 400;
    font-size: 14px;
    color: #999999;
    cursor: pointer;
    padding-left: 8px;
    padding-right: 8px;
  }

  .list_item:hover
  {
    color: #2E64FA;
  }

  .list_item_cur
  {
    color: #2E64FA;
    background: rgba(71,113,203,0.1);
    border-radius: 2px 2px 2px 2px;
    
  }

}
</style>