<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">
                    <template v-for="item in filterItem.list">
                        <div class="tag_item" @click="selectItem(index, item.value, filterItem)"
                            :class="item.value == filterItem.value ? 'active' : ''">
                            {{ item.label }}
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        filtersData: {
            type: Array,
            default: () => []
        },//筛选公共组件数据
    },
    data() {
        return {
        }
    },
    mounted() {
    },
    methods: {

        //筛选点击事件
        selectItem(index, val, item) {
            if (this.filtersData[index].value == val) return;
            let d = { index, value: val }
            this.$emit('selectItem', d, item)
        },

        // showTable(item) {
        //     const showTotalScore = this.$store.state.report.showTotalScore

        //     // isTotal：是否总分 0-不是 1-是
        //     // subjectGroupType：学科分组类型 0-不分组 1-分组
        //     const { isTotal, subjectGroupType } = item

        //     //  当 isTotal 为 1 或 subjectGroupType 为 1 且 showTotalScore 为 false 的时候隐藏总分
        //     if ((isTotal === 1 || subjectGroupType === 1) && !showTotalScore) {
        //         return false
        //     } else {
        //         return true
        //     }
        // }
    }
}
</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>
