<template>
    <div class="schoolArea">
        <div class="allView" :class="{ active: activeSchool === 'allView' }" @click="setActive('allView')">
            <div class="allView_icon"></div>
            <div>总览</div>
        </div>
        <div class="priSchBox">
            <div class="primarySch" :class="{ active: activeSchool === 'primarySch' }" @click="setActive('primarySch')">
                <div class="priSch_icon"></div>
                <div>小学部</div>
            </div>
            <div class="priSchArea">
                <div class="schArea" v-for="(item, index) in priSchList" :key="index"
                    :class="{ active: activeSchool === item }" @click="setActive(item)">{{ item }}</div>
            </div>
        </div>
        <div class="midSchBox">
            <div class="midSch" :class="{ active: activeSchool === 'midSch' }" @click="setActive('midSch')">
                <div class="midSch_icon"></div>
                <div>初中部</div>
            </div>
            <div class="midiSchArea">
                <div class="midArea" v-for="(item, index) in midList" :key="index"
                    :class="{ active: activeSchool === item }" @click="setActive(item)">{{ item }}</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'schoolArea',
    data() {
        return {
            activeSchool: '',
            priSchList: [
                "通新岭校区",
                "百花校区",
                "玮鹏校区",
                "众孚校区",
                "园岭校区",
            ],
            midList: [
                "笔架山学校"
            ]
        }
    },
    methods: {
        setActive(school) {
            this.activeSchool = school  // 切换高亮状态
        }

    }
}
</script>
<style scoped>
.schoolArea {
    max-width: 192px;
    min-width: 192px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding-bottom: 10px;
    padding-top: 5px;
}

.allView,
.primarySch,
.midSch {
    display: flex;
    cursor: pointer;
    justify-content: flex-start;
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}

.allView:hover,
.primarySch:hover,
.schArea:hover,
.midSch:hover,
.midArea:hover {
    background-color: #e6f0ff;
    color: #0354d7;

}
.allView.active,
.primarySch.active,
.schArea.active,
.midSch.active,
.midArea.active {
    background-color: #e6f0ff;
    color: #0354d7;

}
.allView_icon {
    background: url('../assets/allView.png') no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
    margin-right: 8px;
}

/* Hover 时替换图片 */
.allView:hover .allView_icon {
    background-image: url('../assets/allView.active.png');
    /* 替换为激活状态的图片 */
}
.allView.active .allView_icon {
    background-image: url('../assets/allView.active.png');
    /* 替换为激活状态的图片 */
}
.priSch_icon {
    background: url('../assets/primarySch.png') no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
    margin-right: 8px;
}

/* Hover 时替换图片 */
.primarySch:hover .priSch_icon {
    background-image: url('../assets/primarySch.active.png');
    /* 替换为激活状态的图片 */
}
.primarySch.active .priSch_icon {
    background-image: url('../assets/primarySch.active.png');
    /* 替换为激活状态的图片 */
}
.schArea,
.midArea {
    display: flex;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    justify-content: center;
    margin: 0px 10px;
}

.midSch_icon {
    background: url('../assets/midSch.png') no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
    margin-right: 8px;
}

/* Hover 时替换图片 */
.midSch:hover .midSch_icon {
    background-image: url('../assets/midSch.active.png');
    /* 替换为激活状态的图片 */
}
.midSch.active .midSch_icon {
    background-image: url('../assets/midSch.active.png');
    /* 替换为激活状态的图片 */
}
</style>