<template>
    <view class="content" :style="{ height: `calc(100vh - 344rpx - ${safeAreaInsets?.top + 'px'} - ${safeAreaInsets?.bottom + 'px'} - 50px)` }">
        <view class="tab-nav">
            <global-tabs :list="tabNav" @handleClick="handleClick" :scrollable="false"></global-tabs>
        </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 './menu-item.vue'
import useUserStore from 'mocp/store/user'

const userStore = useUserStore()
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
//分类
const activeIndex = ref(0)
const tabNav = ref([{ name: '常用' }, { name: '分组' }])
const handleClick = (_, index) => {
    activeIndex.value = index
}
//跳转
const goTo = (url) => {
    if (url) {
        uni.$mocpJump.navigateTo(url)
    } else {
        uni.$mocpMessage.error('暂未开放!')
    }
}
//跳转应用中心
const goAppCenter = () => {
    uni.$mocpJump.navigateTo('/panel/app-center/index')
}
</script>
<style lang="scss" scoped>
@import '../constants/panel-menu.scss';
</style>
