<template>
    <div class="schoolArea">
        <div class="allView" :class="{ active: activeSchool === 'allView' }">
            <div class="allView_icon"></div>
            <div>总览</div>
        </div>

        <div v-if="fromL.admin.school">
            <div class="priSchBox" v-for="(i,index) in fromL.admin.school.list" :key="index+'a'">
                <div class="primarySch" :class="{ active: activeSchool === 'primarySch' }" >
                    <img :src="i.menuIcon" style="margin-right: 8px;" alt="">
                    <div>{{ i.menuName }}</div>
                </div>
                <div class="priSchArea">
                    <div class="schArea" v-for="(item, index) in i.children" :key="index"
                        :class="{ active: activeSchool === item }" >
                        {{ item.name }}
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import { mapGetters } from 'vuex';

export default {
    data() {
        return {
            activeSchool: '',
            priSchList: [
                "通新岭校区",
                "百花校区",
                "玮鹏校区",
                "园岭校区",
                "众孚校区",
                "八卦岭校区",
            ],
            midList: [
                "笔架山学校",
            ]
        }
    },
    computed: {
        ...mapGetters(['fromL']),
    },
    methods: {
        setActive(school) {
            this.activeSchool = school  // 切换高亮状态
        }

    }
}
</script>
<style scoped>
.schoolArea {
    /* max-width: 192px;
    min-width: 192px; */
    min-height: 600px;
    width: 267px;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 19px 13px;
    box-sizing: border-box;
    gap: 8px;
    background: #fff;
}
.allView{
    display: flex;
    width: 230px;
    height: 54px;
    font-size: 18px;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
}
.primarySch{
    display: flex;
    padding: 16px;
    padding-bottom: 4px;
}
.priSchArea{
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.schArea{
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding: 7px 16px;
    padding-left: 36px;
    box-sizing: border-box;
    font-size: 14px;
    cursor: pointer;
}
.allView_icon {
    background: url('../assets/img/zl.svg') no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
    margin-right: 8px;
}


</style>