<template>
    <div>
        <div style="background-color: red">
            <div class="menu">
                <div class="mt-20" style="margin-top: 48px">
                    <div v-for="item in list" :key="item.id">
                        <div
                            class="row flex flex-center flex-justify-start pointer"
                            @click="goPath(item)"
                        >
                            <div class="flex flex-center">
                                <icon-home />
                                <div class="ml-10">
                                    {{ item.name }}
                                </div>
                            </div>
                        </div>
                        <div v-if="item.children">
                            <div
                                v-for="sub in item.children"
                                class="sub flex flex-center flex-justify-start pointer"
                                :key="sub.id"
                                @click="goPath(sub)"
                            >
                                <div
                                    class="flex flex-center flex-justify-between"
                                >
                                    <div class="flex-child-average">
                                        {{ sub.name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user: null,
            list: []
        }
    },
    mounted() {
        this.fetchMenu()
    },
    methods: {
        fetchMenu() {
            this.$api.sys.menus().then(res => {
                if (res.code === 200) {
                    this.list = res.data
                }
            })
        },
        goPath(res) {
            console.log(res)
            this.$router.push(res.value)
        }
    }
}
</script>

<style lang="scss" scoped>
.menu {
    position: fixed;
    top: 0;
    width: 200px;
    padding-top: 32px;
    bottom: 200px;

    .row {
        padding: 16rpx;
        font-weight: bold;
    }

    .row:hover {
        color: #ab7630;
        font-weight: bold;
        background-color: #f0f1f3;
    }

    .sub {
        padding: 16px 62px;
        border-bottom: 1px #f0f1f3 solid;
    }

    .sub:hover {
        color: #ab7630;
        padding: 16px 62px;
        background-color: #f0f1f3;
    }
}
</style>
