<template>
    <div class="tab-filter-contain">
        <div class="filter-tab"
             v-for="tab in filterData"
             @click="filterClick(tab)"
             :key="tab.key"
             :class="{'filter-tab-active': tab.active}">
            <p>
                <span class="symbol">{{ tab.unit }}</span>
                <span class="number">{{ tab.title }}</span>
                <span class="unit">分</span>
            </p>
            <p>({{ tab.count }})</p>
        </div>
        <div class="close" @click="closeFilter">
            <i class="el-icon-error" style="color: rgb(240, 48, 48); font-size: 20px"></i>
            <i class="el-icon-close"></i>
        </div>
    </div>
</template>
<script>
export default {
    name: 'TabFilter',
    props: {
        tabData: {
            type: Array,
            default: () => []
        },
        replyData: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        tabData: {
            handler() {
                this.filterData = [];
                this.resizeScoreMap();
                this.makeBaseData();
            },
            immediate: true
        },
        replyData: {
            handler() {
                this.resizeScoreMap();
                this.tabData.map((list) => {
                    const { id } = list;
                    if (this.replyData[id]) {
                        const { score } = this.replyData[id];
                        if (score >= this.keys[0]) {
                            this.scoreMap['>=90'].push(list);
                        }
                        if (score >= this.keys[1] && score < this.keys[0]) {
                            this.scoreMap['>=80'].push(list);
                        }
                        if (score >= this.keys[2] && score < this.keys[1]) {
                            this.scoreMap['>=70'].push(list);
                        }
                        if (score >= this.keys[3] && score < this.keys[2]) {
                            this.scoreMap['>=60'].push(list);
                        }
                        if (score < this.keys[3]) {
                            this.scoreMap['<60'].push(list);
                        }
                    }
                });

                this.filterData.map((item) => {
                    item.count = this.scoreMap[item.key].length;
                });
            },
            immediate: true,
            deep: true
        }
    },
    data() {
        return {
            scoreMap: {},
            filterData: [],
            keys: [],
        }
    },
    methods: {
        makeBaseData() {
            const maxScore = this.tabData[0].score;
            if (!maxScore) throw new Error('分数为空');
            // 默认默认生成5块 即90-100 80-90 70-80 60-70 60以下
            this.keys = [ maxScore * 0.9, maxScore * 0.8, maxScore * 0.7, maxScore * 0.6 ];

            this.filterData = [
                {
                    title: `${this.makeFloatRight(this.keys[0])}`,
                    key: '>=90',
                    unit: '>=',
                    count: 0
                },
                {
                    title: `${this.makeFloatRight(this.keys[1])}`,
                    key: '>=80',
                    unit: '>=',
                    count: 0
                },
                {
                    title: `${this.makeFloatRight(this.keys[2])}`,
                    key: '>=70',
                    unit: '>=',
                    count: 0
                },
                {
                    title: `${this.makeFloatRight(this.keys[3])}`,
                    key: '>=60',
                    unit: '>=',
                    count: 0
                },
                {
                    title: `${this.makeFloatRight(this.keys[3])}`,
                    key: '<60',
                    unit: '<',
                    count: 0
                }
            ]
        },
        makeFloatRight(score) {
            return Number.isInteger(score) ? score : score.toFixed(1);
        },
        filterClick(tab) {
            this.filterData.map((item) => item.active = false);
            tab.active = true;
            this.$forceUpdate();
            this.$emit('on-filter-change', this.scoreMap[tab.key]);
        },
        closeFilter() {
            this.$emit('on-close', this.tabData);
        },
        resizeScoreMap() {
            this.scoreMap = { '>=90':[], '>=80': [], '>=70': [], '>=60': [], '<60': [] };
        }
    },
}
</script>
<style lang="scss" scoped>
.tab-filter-contain {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    /* 滚动条轨道样式 */
    &::-webkit-scrollbar {
        width: 4px;
        /* 设置滚动条宽度 */
        border-radius: 10px;
    }

    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
        background: transparent; /* 设置轨道背景为透明 */
    }

    /* 滚动条滑块样式 */
    &::-webkit-scrollbar-thumb {
        background: rgba(96, 128, 240, 0.6); /* 设置拖动块颜色 */
        border-radius: 4px;
        -webkit-box-shadow: inset 0 0 2px transparent;
        -webkit-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }

    /* 滚动条滑块hover状态样式 */
    &::-webkit-scrollbar-thumb:hover {
        background: rgba(96, 128, 240, 0.5); /* 加深颜色 */
    }
}

.filter-tab {
    width: 96px;
    height: 96px;
    background: url("../static/filter-block.svg");
    background-size: 100%;
    cursor: pointer;
    text-align: center;
    padding-top: 24px;
    box-sizing: border-box;
    &:hover {
        background: url("../static/filter-block_hover.svg");
        background-size: 100%;
    }
    p {
        margin: 0;
        color: rgba(32, 40, 64, 0.64);
        font-size: 14px;
    }
    .unit {
        font-size: 12px;
    }
    .number {
        font-size: 24px;
        color: rgb(240, 48, 48);
    }
    .symbol {
        font-size: 12px;
        color: rgb(240, 48, 48);
    }
}
.filter-tab.filter-tab-active {
    background: url("../static/filter-block_selected.svg");
    background-size: 100%;
}
.close {
    cursor: pointer;
    height: 30px;
    width: 30px;
    margin: 0 auto;
    text-align: center;
    .el-icon-error {
        display: none;
    }
    &:hover {
        .el-icon-error {
            display: block;
        }
        .el-icon-close {
            display: none;
        }
    }
}
</style>