<template>
    <global-page ref="pageRef" title="应用中心" @handleCancel="handleCancel" @handleSave="handleSave">
        <view class="content">
            <view class="card">
                <view class="card-title">
                    <view class="card-title-txt">首页应用</view>
                    <global-button type="primary" size="small" @tap="handleEdit">编辑</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>
        </view>
    </global-page>
</template>

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

const userStore = useUserStore()
const isEdit = ref(false)
const pageRef = ref()
//取消
const handleCancel = () => {
    isEdit.value = false
    pageRef.value?.handleChangeEdit(false)
    homeMenuList.value = cloneDeep(userStore.getHomeMenuList)
}
//保存
const handleSave = () => {
    isEdit.value = false
    pageRef.value?.handleChangeEdit(false)
    userStore.changeHomeMenuList(cloneDeep(homeMenuList.value))
    uni.$message.showToast('保存菜单成功')
}
//编辑
const handleEdit = () => {
    isEdit.value = true
    pageRef.value?.handleChangeEdit(true)
}
//操作菜单
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)
        }
    }
}
//获取全部应用
const getMenuList = computed(() => {
    return userStore.menuList.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>
