<template>
    <a-layout class="homepage">
        <a-layout-header class="home-header">
            <div class="header-logo">
                <img :src="homeLogo" alt="" style="width:40px;height:40px;">&nbsp;
                <span>旅游业治安管理信息系统</span>
            </div>
            <div class="header-btn">
                <a-button type="primary" @click="()=>{router.push('/inland/inlandAdd')}">
                    <template #icon>
                        <IdcardOutlined />
                    </template>
                    内宾入住
                </a-button>
                <a-button type="primary" @click="()=>{router.push('/abroad/abroadAdd')}">
                    <template #icon>
                        <ScheduleOutlined />
                    </template>
                    外宾入住
                </a-button>
                <a-button type="primary">
                    <template #icon>
                        <UserDeleteOutlined />
                    </template>
                    离店
                </a-button>
                <a-dropdown>
                    <template #overlay>
                        <a-menu @click="handleMenuClick">
                            <!-- <a-menu-item key="1">
                                <EditOutlined />
                                修改密码
                            </a-menu-item>
                            <a-menu-item key="2">
                                <LoginOutlined />
                                退出
                            </a-menu-item> -->
                        </a-menu>
                    </template>
                    <a-button>
                        其他
                        <DownOutlined />
                    </a-button>
                </a-dropdown>
            </div>
            <div class="header-info">
                <a-dropdown>
                    <a class="ant-dropdown-link" @click.prevent style="color:white;">
                        {{loginUser}}
                        <DownOutlined />
                    </a>
                    <template #overlay>
                        <a-menu>
                            <a-menu-item key="1">
                                <a-button @click="editPassword">修改密码</a-button>
                            </a-menu-item>
                            <a-menu-item key="2">
                                <a-button @click="clearCache">刷新缓存</a-button>
                            </a-menu-item>
                            <a-menu-item key="2">
                                <a-button @click="loginOut">退出系统</a-button>
                            </a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown>
            </div>
        </a-layout-header>
        <a-layout class="home-bottom" style="background: white;">
            <a-layout-sider class="bottom-sider" :collapsed="collapsed" width="260">
                <div>
                    <a-button type="primary" class="collapsedButton" @click="toggleCollapsed">
                        <MenuUnfoldOutlined v-if="collapsed" />
                        <MenuFoldOutlined v-else />
                    </a-button>
                    <a-menu class="myMenu" mode="inline" theme="dark" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" @click="handleClick" @openChange="changeOpenClick">
                        <template v-for="item in menuList" :key="item.path">
                            <template v-if="item.children.length==0">
                                <a-menu-item :key="item.path" :text='item.label'>
                                    <template #icon>
                                        <PieChartOutlined />
                                    </template>
                                    {{ item.label }}
                                </a-menu-item>
                            </template>
                            <template v-else>
                                <a-sub-menu :key="item.path" :text='item.label'>
                                    <template #icon>
                                        <MailOutlined />
                                    </template>
                                    <template #title>{{ item.label }}</template>
                                    <template v-for="item1 in item.children" :key="item.path">
                                        <template v-if="item1.children.length==0">
                                            <a-menu-item :key="item1.path" :text='item1.label'>
                                                <template #icon>
                                                    <PieChartOutlined />
                                                </template>
                                                {{ item1.label }}
                                            </a-menu-item>
                                        </template>
                                        <template v-else>
                                            <a-sub-menu :key="item1.path" :text='item1.label'>
                                                <template #icon>
                                                    <MailOutlined />
                                                </template>
                                                <template #title>{{ item1.label }}</template>
                                                <template v-for="item11 in item1.children" :key="item.path">
                                                    <template v-if="item11.children.length==0">
                                                        <a-menu-item :key="item11.path" :text='item11.label'>
                                                            <template #icon>
                                                                <PieChartOutlined />
                                                            </template>
                                                            {{ item11.label }}
                                                        </a-menu-item>
                                                    </template>
                                                    <template v-else>
                                                        <!-- <sub-menu :menu-info="item" :key="item.id" /> -->
                                                    </template>
                                                </template>
                                            </a-sub-menu>
                                        </template>
                                    </template>
                                </a-sub-menu>
                            </template>
                        </template>
                    </a-menu>
                </div>
            </a-layout-sider>
            <a-layout-content class="bottom-content">
                <a-tabs class="myTabs" v-model:activeKey="activeKey" hide-add type="editable-card" @edit="onEdit" size="small">
                    <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
                    </a-tab-pane>
                </a-tabs>
                <router-view v-if="visible" class="router-content"></router-view>

            </a-layout-content>
        </a-layout>
    </a-layout>
    <EditPassword ref="editPasswordRef" />
</template>

<script setup>
import { onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { getTree } from '@/api/menu';
import { useStore } from '@/store/index.js'
import EditPassword from '@/views/homePage/components/editPasswordModal.vue';
import { addRoutes } from '@/router/dynamicRoutes';
import homeLogo from '@/assets/img/homepage/logo.png';
import { getAllCode } from '@/api/default';
import { getAllRoom } from '@/api/room.js';
import { message } from "ant-design-vue";
const userStore = useStore();
const editPasswordRef = ref();
//左侧菜单栏参数
const router = useRouter();
const menuList = ref([]);
const collapsed = ref(false);
const selectedKeys = ref([]);
const openKeys = ref([]);
const preOpenKeys = ref([]);
const loginUser = ref('');
watch(
    () => openKeys,
    (val, oldVal) => {
        preOpenKeys.value = oldVal;
        userStore.menuParams.preOpenKeys = preOpenKeys.value;
    },
);
//折叠菜单栏
const toggleCollapsed = () => {
    collapsed.value = !collapsed.value;
    openKeys.value = collapsed.value ? [] : preOpenKeys.value;
    userStore.menuParams.openKeys = openKeys.value;
};

//左侧菜单栏点击
const handleClick = (e) => {
    selectedKeys.value[0] = e.key;
    if (e.key.indexOf('/') > -1) {
        if (panes.value.some(item => item.key == e.key)) {
            activeKey.value = e.key;
            return
        }
        router.push(e.key);
        activeKey.value = e.key;
        panes.value.push({
            title: e.item.text,
            key: e.key,
        });
        userStore.menuParams.selectedKeys = selectedKeys.value;
        userStore.menuParams.panes = panes.value;
        userStore.menuParams.activeKey = activeKey.value;
    }
}

//设置左侧菜单栏只能打开一个
const changeOpenClick = e => {
    if (e.length > 0) {
        if (e.indexOf('cyrygl') <= -1) {
            openKeys.value = openKeys.value.slice(-1);
        } else {
            if (openKeys.value.slice(-1) != 'cyrygl') {
                openKeys.value = openKeys.value.filter(item => item != 'ldgl' && item != 'cyrygl');
            }
        }
        userStore.menuParams.openKeys = openKeys.value;
    }
}


//右侧tabs参数
const panes = ref([]);
const activeKey = ref('');
const newTabIndex = ref(0);
const visible = ref(true);
//移除tabs
const remove = targetKey => {
    let lastIndex = 0;
    panes.value.forEach((pane, i) => {
        if (pane.key === targetKey) {
            lastIndex = i - 1;
        }
    });
    panes.value = panes.value.filter(pane => pane.key !== targetKey);
    if (panes.value.length && activeKey.value === targetKey) {
        if (lastIndex >= 0) {
            activeKey.value = panes.value[lastIndex].key;
        } else {
            activeKey.value = panes.value[0].key;
        }
    }
    userStore.menuParams.panes = panes.value;
    userStore.menuParams.activeKey = activeKey.value;
};
const onEdit = targetKey => {
    remove(targetKey);
};


//监听被选中的tabs的key
watch(activeKey, (newValue, oldValue) => {
    router.push(activeKey.value);
    userStore.menuParams.activeKey = activeKey.value;
})
//监听tabs的数组
watch(panes, (newValue, oldValue) => {
    visible.value = newValue.length > 0 ? true : false;
    panes.value.forEach((item, index) => {
        if (panes.value.length - 1 != index) {
            delete item.closable
        } else {
            panes.value[panes.value.length - 1]['closable'] = false;
        }
    })
    userStore.menuParams.panes = panes.value;
}, { deep: true })

onMounted(() => {
    getTree({ type: 'USER', value: '1' }).then(res => {
        menuList.value = res.data;
        loginUser.value = userStore.userInfo.account;
        selectedKeys.value = userStore.menuParams.selectedKeys;
        openKeys.value = userStore.menuParams.openKeys;
        preOpenKeys.value = userStore.menuParams.preOpenKeys;
        activeKey.value = userStore.menuParams.activeKey;
        panes.value = userStore.menuParams.panes;
    });


});


//查询所有字典
const getAllCode_pro = () => {
    return new Promise((resolve) => {
        getAllCode().then((res) => {
            if (res.code == 9000) {
                resolve(res.data);
            } else {
                resolve("");
            }
        });
    });
}
//查询所有房间
const getAllRoom_pro = () => {
    return new Promise((resolve) => {
        getAllRoom({hotelid: userStore.hotelInfo.hotelId}).then((res) => {
            if (res.code == 9000) {
                resolve(res.data);
            } else {
                resolve("");
            }
        });
    });
}
const clearCache = ()=>{
    Promise.all([getAllCode_pro(),getAllRoom_pro()]).then(([res1, res2]) => {
        userStore.clearAll();
        userStore.setAll(res1, res2);
        message.success('刷新缓存完成！');
        router.go(0);
    }).catch(error=>{
        message.warning('刷新缓存失败');
    })
}

const loginOut = () => {
    localStorage.removeItem('user')
    userStore.token = null;
    router.push('/login');
    userStore.$patch(state => {
        userStore.menuParams.selectedKeys = ['/inland/inlandAdd'];
        userStore.menuParams.openKeys = ['lkgl', '/inland/inlandAdd'];
        userStore.menuParams.preOpenKeys = ['lkgl'];
        userStore.menuParams.activeKey = '/inland/inlandAdd';
        userStore.menuParams.panes = [{ title: '内宾入住', key: '/inland/inlandAdd', closable: false }]
    })
}

//修改密码
const editPassword = () => {
    editPasswordRef.value.showModal();
}
</script>


<style scoped lang="less">
.homepage {
    width: 100%;
    height: 100%;
    .home-header {
        width: 100%;
        height: 80px;
        // display: flex;
        color: white;
        background-color: #0e5de5;
        .header-logo {
            width: 350px;
            height: 100%;
            font-size: 22px;
            float: left;
            display: flex;
            /* align-content: center; */
            justify-content: center;
            align-items: center;
        }
        .header-btn {
            display: none;
            // width: 600px;
            float: left;
            padding-top: 15px;
            button {
                margin-right: 15px;
                color: white;
                background-color: rgb(41, 23, 91);
                border: 1px solid white;
                box-shadow: 0px 0px 1px 1px #ddddddb3;
            }
        }
        .header-info {
            width: 200px;
            float: right;
            margin-top: 11px;
            margin-right: -10px;
            text-align: right;
        }
    }
    .home-bottom {
        width: 100%;
        height: calc(100% - 80px);
        .bottom-sider {
            width: 260px !important;
            height: 100%;
            border-top: 2px solid #3c5f9d;
            // background-color: rgb(41, 23, 91);
            background-color: #0e5de5;
            .collapsedButton {
                margin-top: 20px;
                margin-left: 16px;
                margin-bottom: 16px;
                // background-color: rgb(41, 23, 91);
                background-color: #0e5de5;
                border: 1px solid white;
                box-shadow: 0px 0px 1px 1px #ddddddb3;
            }
            .myMenu {
                // background-color: rgb(41, 23, 91);
                background-color: #0e5de5;
                :deep(.ant-menu-inline.ant-menu-sub) {
                    // background-color: rgb(41, 23, 91);
                    background-color: #0e5de5;
                }
            }
            :deep(
                    .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal)
                        .ant-menu-item-selected
                ) {
                background-color: white !important;
                span {
                    // color: rgb(41, 23, 91);
                    color: #0e5de5;
                }
            }
        }
        .bottom-content {
            width: calc(100% - 260px);
            height: 100%;
            padding: 10px;
            .router-content {
                width: 100%;
                height: calc(100% - 60px);
                border-top: 1px solid #ddd;
            }
            :deep(
                    .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
                    .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active
                ) {
                color: white !important;
                background-color: #0e5de5 !important;
                // background-color: rgb(41, 23, 91) !important;
            }
            :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
                color: white !important;
            }
        }
    }
}
</style>

