<!--
 * @Author: zuolingling zuolingling@jsnangao.com
 * @Date: 2023-08-16 09:00:42
 * @LastEditors: zuolingling zuolingling@jsnangao.com
 * @LastEditTime: 2023-08-18 14:02:50
 * @FilePath: \vue3portal\src\pages\layouts\components\Systems.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div v-for="item in datas" :key="item.key"
        :class="[(item.catalogue == 1 || item.title.indexOf('首页') > -1) ? 'rowflex sysitem' : '',]">
        <div @click="handleclick(item)"
            :class="['itembox', (item.catalogue == 1 || item.title.indexOf('首页') > -1) ? 'menufa' : 'menuch']"
            :style="{ cursor: item.url ? 'pointer' : 'default' }">
            <component v-if="item.icon" :is="item.icon+'-outlined'" style="font-size: 19px;margin-right: 10px;"></component>
            {{ item.title }}

        </div>
        <div v-if="item?.children?.length" class="rowflex flexbox">
            <Systems :datas="item?.children"></Systems>
        </div>
    </div>
</template>

<script setup>
// 接收父组件传递的数据，递归时传递 children
const props = defineProps({
    datas: {
        type: Object,
        required: true,
    }
});

const handleclick = (it) => {
    if (it.url) {
        window.open(it.url, "_self");
    }
}
</script>

<style lang="less" scoped>
.sysitem {
    border-bottom: 1px solid rgba(151, 151, 151, 0.2);
    padding: 6px 0;
}

.itembox {
    height: 34px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 6px;

    &.menufa {
        margin-top: 5px;
        font-size: 16px;
        position: relative;
        margin-right: 20px;
    }

    &.menuch {
        color: #ADB4C7;
        margin-right: 15px;
    }
}

.flexbox {
    flex: 1;
    flex-wrap: wrap;
    padding: 4px 0;
}</style>