<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 :src="logoIcon" alt="" id="logo-icon">
                <img :src="logoName" alt="" id="logo-name" v-if="!isCollapse">
            </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 id="hc-header-page-name" class="hc-header-page-name">{{ RoutesTitle }}</div>
                <div class="hc-header-top-menu-bar">
                    <TopMenuBar/>
                </div>
                <div class="hc-header-content">
                    <div class="hc-header-cascader-box">
                        <div class="project-name-box">{{ projectInfo.projectAlias }} / {{ contractInfo.name }}</div>
                        <el-cascader ref="ElCascaderRef" v-model="projectValue"
                                     :clearable="userInfo?.role_id === '1123598816738675201'"
                                     :filterable="userInfo?.role_id === '1123598816738675201'"
                                     :options="projectContract"
                                     :props="projectProps" placeholder="请选择项目"
                                     @change="projectContractChange"/>
                    </div>
                    <HelpInfoBar></HelpInfoBar>
                    <ConfigBar></ConfigBar>
                    <UserInfoBar></UserInfoBar>
                </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" exclude="home">
                            <component :is="Component"/>
                        </keep-alive>
                    </transition>
                </router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import {onMounted, ref, nextTick, watch} from "vue";
import {useRouter, useRoute} from 'vue-router'
import {useAppStore} from "~src/store";
import MenuBar from "./modules/MenuBar.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 logoIcon from "~src/assets/logo/icon.png";
import logoName from "~src/assets/logo/name.png";
import {initButtons, initProjectContract} from "~sto/app";
import website from '~src/config/index'
import {setImageColorStyle} from "js-fast-way";
import {setAppName} from "~uti/tools";

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

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

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

//主题和色调变量
const AppColor = ref(useAppState.getColor);

//顶部菜单数据和相关处理
const MenuBarKey = ref(BarMenuKey);
const RoutesTitle = ref(BarMenuTitle);
const MenuBarData = ref(useAppState.getMenus)
const isCollapse = ref(useAppState.getCollapse)
const userInfo = ref(useAppState.getUserInfo);

//项目合同段
const projectInfo = ref({});
const contractInfo = ref({});
const projectContract = ref([])
const projectValue = ref(null);
const projectProps = ref({
    value: 'id',
    label: 'projectAlias',
    children: 'contractInfoList',
})

//渲染完成
onMounted(() => {
    initButtons()
    initProjectContract()
    const info = useAppState.getProjectContract || []
    projectContractData(info);
    useAppState.barMenuName = BarMenuTitle
    setLogoImageColor()
})

//监听
watch(() => [
    useAppState.getProjectContract,
    useAppState.getMenus,
    useRoutes?.name,
    useRoutes?.meta?.title,
    useAppState.getCollapse,
], ([projectContractArr, userMenus, RouteName, RouteTitle, collapse]) => {
    MenuBarData.value = userMenus
    MenuBarKey.value = RouteName ?? 'home-index'
    RoutesTitle.value = RouteTitle ?? ''
    isCollapse.value = collapse
    projectContractData(projectContractArr || []);
    useAppState.barMenuName = RouteTitle ?? ''
    setAppName(appTitle.value)
})

//监听
watch(() => [
    useAppState.getTitle,
    useAppState.getLogoIcon,
    useAppState.getLogoName,
    useAppState.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 collapseChange = (bool) => {
    isCollapse.value = bool
    useAppState.setCollapse(bool)
}

//处理项目合同段数据
const projectContractData = (projectContractData) => {
    if (projectContractData.length > 0) {
        //处理别名
        projectContractData.forEach(item => {
            let contractArr = item['contractInfoList'] || []
            contractArr.forEach(items => {
                items['projectAlias'] = items['name']
            })
        })
        //处理其他数据
        projectContract.value = projectContractData
        const projectId = useAppState.getProjectId     //项目ID
        const contractId = useAppState.getContractId   //合同段ID
        const UserProjectInfo = useAppState.getProjectInfo
        const UserContractInfo = useAppState.getContractInfo
        //查询缓存的选中ID是否存在
        const pid = projectContractData.findIndex(item => Number(item.id) === Number(projectId))
        const contractList = projectContractData[pid]?.contractInfoList || []
        const cid = contractList.findIndex(item => Number(item.id) === Number(contractId))
        //如果缓存的选中ID不存在
        if (cid === -1) {
            //取项目数组中的第一个数据
            let letProjectInfo = projectContractData[0];
            let contractInfoList = letProjectInfo?.contractInfoList || []
            let letContractInfo = contractInfoList[0] || {};
            projectValue.value = letContractInfo?.id
            projectInfo.value = letProjectInfo
            contractInfo.value = letContractInfo
            //设置缓存
            useAppState.setProjectInfo(letProjectInfo)
            useAppState.setContractInfo(letContractInfo)
            useAppState.setProjectId(letProjectInfo?.id)
            useAppState.setContractId(letContractInfo?.id)
        } else {
            projectValue.value = String(contractId)
            projectInfo.value = UserProjectInfo
            contractInfo.value = UserContractInfo
        }
    } else {
        projectContract.value = []
        projectValue.value = null
        projectInfo.value = {}
        contractInfo.value = {}
    }
}

//项目被选择
const ElCascaderRef = ref(null)
const projectContractChange = (val) => {
    if (val) {
        const Nodes = ElCascaderRef.value.getCheckedNodes();
        const UserProjectInfo = Nodes[0].parent.data;
        const UserContractInfo = Nodes[0].data;
        //缓存项目数据
        useAppState.setProjectId(val[0])
        useAppState.setContractId(val[1])
        useAppState.setProjectInfo(UserProjectInfo)
        useAppState.setContractInfo(UserContractInfo)
        //更改界面更新
        projectInfo.value = UserProjectInfo
        contractInfo.value = UserContractInfo
        window.$message?.info('切换了项目，数据更新中');
        //刷新路由
        reloadRouter.value = false
        nextTick(() => {
            reloadRouter.value = true
        })
    }
}

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

//首页
const logoClick = () => {
    router.push({
        name: useAppState.homeUrl
    });
}
</script>

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

<style lang="scss">
.hc-layout-box .hc-container-view {
    .hc-header-view .hc-header-content .hc-header-cascader-box {
        .el-cascader {
            width: 100%;
            top: -10px;
        }
        .el-cascader .el-input .el-input__wrapper {
            padding: 4px 15px;
            border: 1px solid #00000000;
            border-radius: 100px;
            background: #f1f5f8;
            color: #202532;
            box-shadow: var(--hc-shadow);
            .el-input__inner, .el-input__suffix {
                color: #202532;
            }
        }
        .el-cascader .el-input.is-focus .el-input__wrapper {
            box-shadow: 4px 4px 8px 0 rgba(54, 92, 167, 0.15), -4px -4px 8px 0px #ffffff;
        }
        .el-cascader .el-input .icon-arrow-down {
            font-size: 18px;
            font-weight: bold;
        }
    }
}

</style>
