<template>
    <custom-page title="应用中心" showNavbar>
        <template #left>
            <view v-if="isEdit" @tap="isEdit = false" class="cancel">取消</view>
            <uni-icons type="left" size="16" @tap="goBack" v-else></uni-icons>
        </template>
        <template #right>
            <custom-button type="primary" size="small" v-if="isEdit" style="padding: 0 32rpx">保存</custom-button>
        </template>
        <template #content>
            <view class="content">
                <view class="card">
                    <view class="card-title">
                        <view class="card-title-txt">首页应用</view>
                        <custom-button type="primary" size="small" @tap="isEdit = true">编辑</custom-button>
                    </view>
                    <view class="menu-list">
                        <menu-item
                            class="menu-item"
                            v-for="item in menuListHome"
                            :data="item"
                            :key="item.id"
                            :showCount="false"
                            :type="isEdit ? 'minus' : 'default'"
                            @tap="goTo"
                        ></menu-item>
                    </view>
                </view>
                <view class="card">
                    <view class="card-title">
                        <view class="card-title-txt">全部应用</view>
                    </view>
                    <view class="menu-list" v-if="menuListNoHome.length > 0">
                        <menu-item
                            class="menu-item"
                            v-for="item in menuListNoHome"
                            :data="item"
                            :key="item.id"
                            :showCount="false"
                            :type="isEdit ? 'plus' : 'default'"
                            @tap="goTo"
                        ></menu-item>
                    </view>
                    <global-empty class="menu-empty" v-else></global-empty>
                </view>
            </view>
        </template>
    </custom-page>
</template>

<script setup>
import { ref } from 'vue'
import MenuItem from '../components/menu-item.vue'
import { menuListHome, menuListNoHome } from '../constants/index.compositions'

const isEdit = ref(false)

//返回
const goBack = () => {
    uni.navigateBack()
}
//跳转
const goTo = () => {
    uni.navigateTo({ url: '/pages/panel/assessment-records/index' })
}
</script>
<style lang="scss" scoped>
@import './constants/index.scss';
</style>
