<!--
 * @Author: zuolingling zuolingling@jsnangao.com
 * @Date: 2023-08-16 09:00:42
 * @LastEditors: zuolingling zuolingling@jsnangao.com
 * @LastEditTime: 2023-08-16 18:30:31
 * @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">
        <div @click="handleclick(item)" :class="['itembox',item.catalogue==1 ? 'menufa' : 'menuch']" :style="{cursor:item.url ? 'pointer':'default'}">{{ 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>
.itembox {
    height: 34px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 20px;
    border-radius: 6px;
    &.menufa {
        // background-color: #015b85;
        margin-bottom: 15px;
        margin-top: 5px;
        font-size: 16px;
        position: relative;
       padding-left: 18px;

        &::before{
            content: '';
            position: absolute;
            left: 0;
            top: 9px;
            height: 18px;
            width: 4px;
            background-color: rgb(0, 89, 255);
            border-radius: 4px;
        }
    }
    &.menuch{
        // background: #01aefe;
        margin-bottom: 10px;
        color: rgba(255,255,255,0.7);
    }
}

.flexbox {
    flex-wrap: wrap;
}
</style>