<template>
    <view class="content" :style="{ height: `calc(100vh - 386rpx - ${safeAreaInsets?.top + 'px'})` }">
        <view class="tab-nav">
            <template v-for="(item, index) in tabNav" :key="index">
                <view class="tab-nav-item" :class="{ active: activeIndex == index ? true : false }" @tap="activeIndex = index">{{ item }}</view>
            </template>
        </view>
        <scroll-view class="tab-content" scroll-y="true">
            <view class="tab-content-item" v-if="activeIndex == 0">
                <view class="menu-list">
                    <menu-item class="menu-item" v-for="item in userStore.getHomeMenuList" :data="item" :key="item.id" @tap="goTo(item.url)"></menu-item>
                    <menu-item class="menu-item" :data="userStore.allMenuItem" @tap="goAppCenter"></menu-item>
                </view>
            </view>
            <view class="tab-content-item" v-if="activeIndex == 1">
                <view class="menu-content">
                    <view class="menu-content-item" v-for="(value, key) in userStore.getGroupMenuList" :key="key">
                        <view class="menu-title">{{ key }}</view>
                        <view class="menu-list">
                            <menu-item class="menu-item" v-for="item in value" :data="item" :key="item.id" @tap="goTo(item.url)"></menu-item>
                        </view>
                        <view class="menu-line"></view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import MenuItem from './components/menu-item.vue'
import useUserStore from '@/store/user'

const userStore = useUserStore()
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
//分类
const tabNav = ref(['常用', '分组'])
const activeIndex = ref(0)
//跳转
const goTo = (url) => {
    url && uni.navigateTo({ url })
}
//跳转应用中心
const goAppCenter = () => {
    uni.navigateTo({ url: '/pages/panel/app-center/index' })
}
</script>
<style lang="scss" scoped>
@import './constants/panel-menu.scss';
</style>
