<template>
    <!-- 导航栏 -->
    <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
        <image class="navbar-bg" src="/static/panel/navbar-bg.png" />
        <view class="navbar-box">
            <view class="navbar-weather">
                <view class="weather-place">武汉</view>
                <text class="weather-state">晴 22°</text>
            </view>
            <view class="navbar-input">
                <uni-easyinput type="text" disabled>
                    <template #right>
                        <view class="navbar-input-right">
                            <text class="line"></text>
                            <text>搜索</text>
                        </view>
                    </template>
                </uni-easyinput>
            </view>
            <view class="navbar-icon">
                <image src="/static/panel/vector.png" />
            </view>
        </view>
        <view class="navbar-bottom-list">
            <view class="list-item">
                <view class="list-item-title" style="text-align: left">我的任务</view>
                <view class="list-item-descs">
                    <view class="list-item-desc">
                        <view class="txt">24</view>
                        <view class="p">待办任务</view>
                    </view>
                    <view class="list-item-line"></view>
                    <view class="list-item-desc">
                        <view class="txt">1</view>
                        <view class="p">已接受任务</view>
                    </view>
                </view>
            </view>
            <view class="list-item">
                <view class="list-item-title">跟机任务</view>
                <view class="list-item-desc">
                    <view class="txt">24</view>
                    <view class="p">待办任务</view>
                </view>
            </view>
            <view class="list-item">
                <view class="list-item-title">AOG任务</view>
                <view class="list-item-desc">
                    <view class="txt">24</view>
                    <view class="p">待办任务</view>
                </view>
            </view>
        </view>
    </view>
    <!-- 图标list -->
    <view class="content" :style="{ height: `calc(100% - 345rpx - ${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 menuList" :data="item" :key="item.id" @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 menuListGroup" :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"></menu-item>
                        </view>
                        <view class="menu-line"></view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import MenuItem from './components/menu-item.vue'
import { menuList } from './constants/data.config'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
//分类
const tabNav = ref(['常用', '分组'])
const activeIndex = ref(0)
//获取分组数据
const menuListGroup = computed(() => {
    return menuList.value.reduce((groups, item) => {
        // 如果该组不存在，则创建一个新组
        if (!groups[item.group]) {
            groups[item.group] = []
        }
        // 将当前项添加到对应的组中
        groups[item.group].push(item)
        return groups
    }, {})
})
//跳转应用中心
const goAppCenter = () => {
    uni.navigateTo({ url: '/pages/panel/app-center/index' })
}
</script>

<style lang="scss" scoped>
.navbar {
    padding-bottom: 32rpx;
    position: relative;
    color: #fff;
    &-bg {
        position: absolute;
        width: 100%;
        z-index: -1;
    }
    &-box {
        display: flex;
        align-items: center;
        padding: 20rpx 32rpx 32rpx 32rpx;
    }
    &-weather {
        margin-right: 16rpx;
        .weather-state {
            font-size: 24rpx;
        }
    }
    &-input {
        width: 500rpx;
        :deep(.is-input-border) {
            border-radius: 12rpx !important;
        }
        &-right {
            color: #165dff;
            margin-right: 32rpx;
            display: flex;
            align-items: center;
            font-weight: 900;
            .line {
                background: rgba(104, 161, 254, 0.4);
                margin-right: 32rpx;
                width: 1rpx;
                height: 32rpx;
            }
        }
    }
    &-icon {
        width: 60rpx;
        height: 60rpx;
        margin-left: 26rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
    &-bottom-list {
        display: flex;
        justify-content: space-between;
        padding: 0 32rpx;
        .list-item {
            &-title {
                font-size: 32rpx;
                text-align: center;
                margin-bottom: 26rpx;
            }
            &-descs {
                display: flex;
                align-items: center;
            }
            &-desc {
                display: flex;
                flex-direction: column;
                align-items: center;
                .txt {
                    font-weight: 700;
                }
            }
            &-line {
                margin: 0 24rpx;
                height: 60rpx;
                width: 1rpx;
                background: rgba(255, 255, 255, 0.1);
            }
        }
    }
}
.content {
    border-radius: 38rpx;
    background: #fff;
    padding-top: 32rpx;
    display: flex;
    flex-direction: column;
    .tab-nav {
        display: flex;
        padding: 0 32rpx;
        &-item {
            color: rgba(0, 0, 0, 0.6);
            position: relative;
            margin-right: 56rpx;
            padding-bottom: 12rpx;
            border-bottom: 4rpx solid #fff;
            &.active {
                color: #165dff;
                border-bottom: 4rpx solid #165dff;
            }
        }
    }
    .tab-content {
        margin-top: 36rpx;
        flex: auto;
        overflow-y: auto;
        &-item {
            .menu-content-item {
                margin-bottom: 32rpx;
                .menu-line {
                    margin: 0 32rpx;
                    height: 1rpx;
                    background: rgba(0, 0, 0, 0.05);
                }
                .menu-item {
                    margin-bottom: 32rpx !important;
                }
                .menu-title {
                    color: #1d2129;
                    margin-bottom: 32rpx;
                    padding: 0 32rpx;
                    font-size: 34rpx;
                }
            }
            .menu-list {
                display: flex;
                flex-wrap: wrap;
                .menu-item {
                    width: 25%;
                    margin-bottom: 48rpx;
                    box-sizing: border-box;
                }
            }
        }
    }
}
</style>
