<template>
    <ElContainer class="h-full">
        <ElAside class="bg-slate-100 dark:bg-zinc-800" v-if="!isMobile">
            <div class="h-16 px-4 flex items-center justify-center cursor-pointer">
                <span class="text-lg font-[sh]">RCS</span>
            </div>
            <SideMenu :default-active="activeMenu" :menus="menus" />
        </ElAside>
        <ElContainer>
            <ElHeader class="!h-16 border-b !box-border border-neutral-200 dark:border-neutral-800 flex items-center">
                <div class="p-4 mr-4 cursor-pointer" @click="toggleMenu" v-if="isMobile">
                    <Menu2 class="w-5 h-5" />
                </div>

                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
                    <el-breadcrumb-item v-if="route.name !== 'home'"
                    >{{ route.meta?.title || route.path }}
                    </el-breadcrumb-item>
                </el-breadcrumb>
                <div class="grow"></div>
                <div class="mr-8 text-sm text-neutral-600 dark:text-neutral-400 invisible md:visible"
                     v-if="user.roles.includes('user')">
                    已发送: {{ user.send }}, 余额: {{ user.balance }}
                </div>
                <DarkSwitch class="mr-4" />
                <el-dropdown @command="onCommand">
                    <UserAvatar />
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </ElHeader>
            <ElMain class="bg-neutral-50 dark:bg-neutral-900" id="main-container">
                <RouterView></RouterView>
            </ElMain>
        </ElContainer>

        <ElDrawer
            v-model="showDrawer"
            direction="ltr"
            size="80%"
            v-if="isMobile"
            class="!bg-slate-100 dark:!bg-zinc-800"
        >
            <SideMenu :default-active="activeMenu" :menus="menus" />
        </ElDrawer>

        <ChangePwd v-model="showChangePwdDialog"></ChangePwd>
    </ElContainer>
</template>
<script setup>
import { ElAside, ElContainer, ElHeader, ElMain, ElMessageBox } from 'element-plus'
import DarkSwitch from '@/components/DarkSwitch.vue'
import SideMenu from '@/components/SideMenu.vue'
import { useRoute } from 'vue-router'
import { ref, watch, shallowRef, inject } from 'vue'
import { User, Home, Menu2, Settings, MessageDots, DeviceMobileMessage } from '@vicons/tabler'
import UserAvatar from '@/components/UserAvatar.vue'
import ChangePwd from '@/components/ChangePwd.vue'
import { http } from '@/plugins/http'
import { useUserStore } from '@/stores/user'

const route = useRoute()
const activeMenu = ref(route.path || '/home')
const isMobile = inject('isMobile')
const showDrawer = ref(false)
const { user } = useUserStore()
const roles = user.roles
let menus = []
if (roles.includes('admin')) {
    menus = [
        {
            name: '/home',
            title: '主页',
            icon: Home
        },
        {
            name: 'rcs-parent',
            title: 'RCS管理',
            icon: DeviceMobileMessage,
            children: [
                {
                    name: '/phoneList',
                    title: '发送列表'
                },
                {
                    name: '/task',
                    title: '任务列表'
                },
                {
                    name: '/device',
                    title: '设备列表'
                },
                {
                    name: '/channel',
                    title: '渠道列表'
                },
                {
                    name: '/rcsNumber',
                    title: 'RCS号码'
                }
            ]
        },
        {
            name: 'user-parent',
            title: '用户管理',
            icon: User,
            children: [
                {
                    name: '/user',
                    title: '用户列表'
                },
                {
                    name: '/dealer',
                    title: '经销商列表'
                },
                {
                    name: '/balance',
                    title: '余额明细'
                }
            ]
        },
        {
            name: 'settings',
            title: '系统设置',
            icon: Settings,
            children: [
                {
                    name: '/sysConfig',
                    title: '参数设置'
                }
            ]
        }
    ]
} else if (roles.includes('api')) {
    menus = [
        {
            name: '/home',
            title: '主页',
            icon: Home
        },
        {
            name: 'rcs-parent',
            title: 'RCS管理',
            icon: DeviceMobileMessage,
            children: [
                {
                    name: '/task',
                    title: '任务列表'
                }
            ]
        },
        {
            name: 'user-parent',
            title: '用户管理',
            icon: User,
            children: [
                {
                    name: '/dealer',
                    title: '经销商列表'
                }
            ]
        }
    ]
} else if (roles.includes('user')) {
    menus = [
        {
            name: '/home',
            title: '主页',
            icon: Home
        },
        {
            name: 'rcs-parent',
            title: 'RCS管理',
            icon: DeviceMobileMessage,
            children: [
                {
                    name: '/phoneList',
                    title: '发送列表'
                },
                {
                    name: '/task',
                    title: '任务列表'
                },
                {
                    name: '/balance',
                    title: '余额明细'
                }
            ]
        }
    ]
}

function toggleMenu() {
    showDrawer.value = !showDrawer.value
}

watch(route, () => {
    activeMenu.value = route.name
})
const showChangePwdDialog = ref(false)

function onCommand(cmd) {
    if (cmd === 'logout') {
        logout()
    } else if (cmd === 'changePassword') {
        showChangePwdDialog.value = true
    }
}

function logout() {
    ElMessageBox.confirm('确定退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        http.setToken(null)
        location.reload()
    })
}
</script>
