<template>
    <el-container class="hc-layout-box">
        <el-aside :class="[isCollapse ? 'is-collapse' : '']" :width="isCollapse ? '90px' : '250px'" class="hc-aside-box">
            <div class="hc-aside-logo-box" @click="logoClick">
                <img id="logo-icon" :src="appLogoIcon" alt="">
                <img v-show="!isCollapse" id="logo-name" :src="appLogoName" alt="">
            </div>
            <div class="hc-aside-menu-box">
                <el-scrollbar>
                    <MenuBar :collapse="isCollapse" :cur="MenuBarKey" :datas="MenuBarData" @change="MenuBarChange" />
                </el-scrollbar>
            </div>
            <div class="hc-aside-bar-box">
                <div :class="isCollapse ? '' : 'active'" @click="collapseChange(false)">
                    <HcIcon name="menu-unfold" />
                </div>
                <div v-show="!isCollapse" :class="isCollapse ? 'active' : ''" @click="collapseChange(true)">
                    <HcIcon name="menu-fold" />
                </div>
            </div>
        </el-aside>
        <el-container class="hc-container-view">
            <el-header class="hc-header-view">
                <div class="hc-header-box">
                    <div class="hc-header-menu">
                        <HcTopMenuBar @change="TopMenuChange" />
                    </div>
                    <div class="hc-header-content">
                        <HcCascader @change="cascaderChange" />
                        <HelpInfoBar />
                        <ConfigBar />
                        <UserInfoBar />
                    </div>
                </div>
                <div class="hc-header-top-menu-bar">
                    <TopMenuBar />
                </div>
            </el-header>
            <el-main id="hc-main-box" class="hc-main-box">
                <router-view v-if="reloadRouter" v-slot="{ Component }">
                    <transition name="fade-transform">
                        <keep-alive :max="10">
                            <component :is="Component" />
                        </keep-alive>
                    </transition>
                </router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAppStore } from '~src/store'
import MenuBar from './modules/MenuBar.vue'
import HcCascader from './modules/cascader.vue'
import HelpInfoBar from './modules/HelpInfoBar.vue'
import UserInfoBar from './modules/UserInfoBar.vue'
import ConfigBar from './modules/ConfigBar.vue'
import TopMenuBar from './modules/TopMenuBar.vue'
import HcTopMenuBar from './modules/HcTopMenu.vue'
import { setImageColorStyle } from 'js-fast-way'
import { setAppName } from '~uti/tools'

//初始组合式
const router = useRouter()
const useRoutes = useRoute()
const store = useAppStore()

//路由参数
const reloadRouter = ref(true)
const BarMenuKey = useRoutes?.name ?? 'home-index'
const BarMenuTitle = useRoutes?.meta?.title ?? ''

//系统信息
const appTitle = ref(store.getTitle)
const appLogoIcon = ref(store.getLogoIcon)
const appLogoName = ref(store.getLogoName)
const AppColor = ref(store.getColor)

//顶部菜单数据和相关处理
const MenuBarKey = ref(BarMenuKey)
const RoutesTitle = ref(BarMenuTitle)
const isCollapse = ref(store.getCollapse)

//渲染完成
onMounted(() => {
    setLogoImageColor()
    store.barMenuName = BarMenuTitle
    setLogoNameColor(store.getTheme)
})

//监听
watch(() => [
    useRoutes?.name,
    useRoutes?.meta?.title,
    store.getCollapse,
], ([RouteName, RouteTitle, collapse]) => {
    MenuBarKey.value = RouteName ?? 'home-index'
    RoutesTitle.value = RouteTitle ?? ''
    isCollapse.value = collapse
    setIsCollapse(MenuBarKey.value)
    store.barMenuName = RouteTitle ?? ''
    setAppName(appTitle.value)
})

//监听
watch(() => [
    store.getTitle,
    store.getLogoIcon,
    store.getLogoName,
    store.getColor,
], ([Title, LogoIcon, LogoName, ColorVal]) => {
    appTitle.value = Title
    appLogoIcon.value = LogoIcon
    appLogoName.value = LogoName
    AppColor.value = ColorVal
    setLogoImageColor()
})

//设置Logo图片颜色
const setLogoImageColor = () => {
    setImageColorStyle('logo-icon', AppColor.value?.color)
}

const setLogoNameColor = (theme) => {
    try {
        let filter = 'invert(85%) sepia(91%) saturate(0%) hue-rotate(233deg) brightness(114%) contrast(101%)'
        if (theme === 'light') {
            filter = 'invert(0%) sepia(100%) saturate(0%) hue-rotate(235deg) brightness(107%) contrast(103%)'
        }
        document.getElementById('logo-name').style.filter = filter
    } catch { /* empty */ }
}

//设置折叠
const setIsCollapse = (key) => {
    if (key === 'data-fill-wbs') {
        isCollapse.value = true
        store.setCollapse(true)
    }
}

//是否折叠
const collapseChange = (bool) => {
    isCollapse.value = bool
    store.setCollapse(bool)
}

//菜单数据
const MenuBarData = ref([])
const TopMenuChange = (data) => {
    MenuBarData.value = data
}


//菜单被点击
const MenuBarChange = (item) => {
    MenuBarKey.value = item?.code
    setIsCollapse(item?.code)
    router.push({ name: item?.code })
}

//首页
const logoClick = () => {
    router.push({ name: store.homeUrl })
}

//项目被改变
const cascaderChange = () => {
    //刷新路由
    reloadRouter.value = false
    nextTick(() => {
        reloadRouter.value = true
    })
}
</script>

<style lang="scss" scoped>
@import "./layout.scoped.scss";
</style>

<style lang="scss">
@import "./layout.scss";
</style>
