<template>
    <div class="left_menu_wrap">
        <div class="item online">
            <el-icon class="icon">
                <Monitor />
            </el-icon>
            <el-text type="success">在线</el-text>
        </div>
        <router-link class="item" :class="{ active: route.path == item.path }" v-for="item in menus" :key="item.path"
            :to="item.path">
            <el-icon class="icon">
                <component :is="item.icon" />
            </el-icon>
            <el-text class="text">{{ item.label }}</el-text>
        </router-link>
        <div class="item more">
            <el-icon class="icon">
                <Operation />
            </el-icon>
            <el-text class="text">更多</el-text>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.path)
const menus = ref([
    {
        label: '收银',
        path: '/',
        icon: 'ShoppingCartFull'
    },
    {
        label: '台桌',
        path: '/table',
        icon: 'Reading'
    },
    {
        label: '订单',
        path: '/order',
        icon: 'Tickets'
    },
    {
        label: '网络',
        path: '/internat',
        icon: 'Paperclip'
    },
    {
        label: '会员',
        path: '/member',
        icon: 'User'
    },
    {
        label: '交班',
        path: '/work',
        icon: 'SwitchButton'
    }
])
</script>

<style scoped lang="scss">
.left_menu_wrap {
    height: 100vh;
    width: 120px;
    background-color: #555;
    display: flex;
    flex-direction: column;

    .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-decoration: none;

        &:first-child {
            border-bottom: 1px solid #666;
        }

        &.online {

            .icon,
            .text {
                color: var(--el-color-success);
            }
        }

        &.active {
            background-color: #333;

            .icon,
            .text {
                color: #fff;
            }
        }

        &.more {
            margin-top: 30px;
        }

        .icon {
            color: #999;
            font-size: 32px;
            margin-bottom: 4px;
        }

        .text {
            color: #999;
            font-size: 22px;
        }
    }
}
</style>