<template>
    <global-page
        title="应用中心"
        navLeftClick="emit"
        @handleLeftClick="handleLeftClick"
        @handleRightClick="handleRightClick"
        :padding="16"
        :navLeftType="navLeftType"
        :showNavRight="isEdit"
        navRightType="button"
        navRightText="保存"
    >
        <view class="card">
            <view class="card-title">
                <view class="card-title-txt">首页应用</view>
                <global-button type="primary" size="small" @tap="handleChange">编辑</global-button>
            </view>
            <view class="menu-list">
                <menu-item
                    class="menu-item"
                    v-for="item in homeMenuList"
                    :data="item"
                    :key="item.id"
                    :showCount="false"
                    :type="isEdit ? 'minus' : 'default'"
                    @tap="handleHomeMenu(item, 'minus')"
                ></menu-item>
            </view>
        </view>
        <view class="card">
            <view class="card-title">
                <view class="card-title-txt">全部应用</view>
            </view>
            <view class="menu-list">
                <menu-item
                    class="menu-item"
                    v-for="item in getMenuList"
                    :data="item"
                    :key="item.id"
                    :showCount="false"
                    :type="isEdit && !item.isHome ? 'plus' : 'default'"
                    @tap="handleHomeMenu(item, 'plus')"
                ></menu-item>
            </view>
        </view>
    </global-page>
</template>

<script setup>
import { computed, ref } from 'vue'
import MenuItem from '../components/menu-item.vue'
import useUserStore from 'mocp/store/user'
import { onLoad } from '@dcloudio/uni-app'
import { cloneDeep } from 'lodash'

const userStore = useUserStore()
const isEdit = ref(false)
const navLeftType = ref('icon')
//取消
const handleLeftClick = () => {
    if (isEdit.value) {
        isEdit.value = false
        navLeftType.value = 'icon'
        homeMenuList.value = cloneDeep(userStore.getHomeMenuList)
    } else {
        uni.$mocpJump.navigateBack()
    }
}
//保存
const handleRightClick = () => {
    if (homeMenuList.value.length > 0) {
        if (homeMenuList.value.length > 15) {
            uni.$mocpMessage.warning('最多设置15个首页菜单')
        } else {
            navLeftType.value = 'icon'
            isEdit.value = false
            userStore.changeHomeMenuList(cloneDeep(homeMenuList.value))
            uni.$mocpMessage.success('保存菜单成功')
        }
    } else {
        uni.$mocpMessage.warning('请设置首页菜单')
    }
}
//编辑
const handleChange = () => {
    isEdit.value = true
    navLeftType.value = 'text'
}
//操作菜单
const homeMenuList = ref([])
onLoad(() => {
    homeMenuList.value = cloneDeep(userStore.getHomeMenuList)
})
const handleHomeMenu = (menu, type) => {
    if (isEdit.value) {
        if (type == 'minus') {
            homeMenuList.value = homeMenuList.value.filter((item) => item.id !== menu.id)
        } else {
            !menu.isHome && homeMenuList.value.push(menu)
        }
    } else {
        if (menu.url) {
            uni.$mocpJump.navigateTo(menu.url)
        } else {
            uni.$mocpMessage.warning('暂未开放!')
        }
    }
}
//获取全部应用
const getMenuList = computed(() => {
    return userStore.getMenuList.map((item) => {
        return {
            ...item,
            isHome: homeMenuList.value.find((opt) => opt.id == item.id) ? true : false
        }
    })
})
</script>
<style lang="scss" scoped>
@import './constants/index.scss';
</style>
