<template>
	<div class="administrator_page">
		<div class="administrator_page_left">
			<div class="modal_title_text">Administrator</div>
            <a-menu
                id="dddddd"
                class="menu_list_content"
                theme="dark"
                v-model:openKeys="openKeys"
                v-model:selectedKeys="selectedKeys"
                mode="inline"
				@click="handleClick"
            >

                <div v-for="(menu) in rootSubmenuKeys" :key="menu.key" >
                    <a-menu-item :key="menu.key" :name="menu.name" :route="menu.route" v-if="!menu.children">
                        <template #icon><span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span></template>
                        <span class="menu_title">{{menu.name}}</span>
                    </a-menu-item>
                    <a-sub-menu :key="menu.key" v-else> 
                        <template #icon>
                            <span :class="['icon','iconfont', 'menu_icon', menu.icon]"></span>
                        </template>
                        <template #expandIcon><span :class="['icon','iconfont', 'menu_icon', menu.expandIcon]"></span></template>
                        <template #title><span class="menu_title">{{menu.name}}</span></template>
                        <div >
                            <a-menu-item v-for="child in menu.children" :key="child.key" :name="child.name" :route="child.route"><span class="menu_title">{{child.name}}</span></a-menu-item>
                        </div>
                    </a-sub-menu>
                </div>
            </a-menu>
        </div>
		<div class="administrator_page_right">
			<div class="administrator_page_right_header">
                <div class="page_name">
                    <div v-show="!routers.length" class="page_name_title">{{nowPageName}}</div>
                    <a-breadcrumb v-show="routers.length" :routes="routers">
                        <template #itemRender="{ route, routes, paths }">
                            <span v-if="routes.indexOf(route) === routes.length - 1">
                            {{ route.breadcrumbName }}
                            </span>
                            <router-link v-else :to="`${paths.join('/')}`">
                            {{ route.breadcrumbName }}
                            </router-link>
                        </template>
                    </a-breadcrumb>
                </div>
            </div>
			<div class="administrator_page_right_content">
				<router-view/>
			</div>
		</div>
	</div>	
	
</template>
<script lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { message, Upload } from "ant-design-vue";
import { defineComponent, onMounted, h, ref, nextTick, inject,reactive, toRefs } from "vue";
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useRouter,useRoute } from 'vue-router'
import GO from "@/tool/GO";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
// import { forEach } from "jszip";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
import { useI18n } from "vue-i18n";
export default defineComponent({
	components: {
		MailOutlined,
		AppstoreOutlined,
		SettingOutlined,
	},
    props: ["msg",'sketchCatecoryList'],
    setup() {
		const router = useRouter()
        const route:any = useRoute()
		const state = reactive({
		rootSubmenuKeys: [{
			name:'Trial User',
			route:'/administrator/allUser',
			icon:'yonghu',
			expandIcon:'icon-xiala',
			key:'/administrator/allUser',
			isShow:true,
			// children: [
			//         {
			//             name:'User Management',
			//             route:'/home/excil1',
			//             icon:'',
			//             key:'/home/excil22',
			//             isShow:true,
			//         },
			//         {
			//             code:'ROLE_MANAGER',
			//             name:'Access Permission',
			//             route:'/home/excil2',
			//             icon:'',
			//             key:'/home/excil33',
			//             isShow:true,
			//         },
			//     ],
		},{
			name:'Design Frequency',
			route:'/administrator/testClickData',
			icon:'shenpi',
			expandIcon:'icon-xiala',
			key:'/administrator/testClickData',
			isShow:true,
		},{
			name:'Trial User Approval',
			route:'/administrator/trialApproval',
			icon:'usetime',
			key:'/administrator/trialApproval',
			expandIcon:'icon-xiala',
			isShow:true,
		}],
		openKeys: ['sub1'],
		selectedKeys: [],
		nowPageName:'Trial User',//当前页面名称
		});
		let routers:any = ref([])


		const onOpenChange = (openKeys: string[]) => {
		const latestOpenKey:any = openKeys.find(key => state.openKeys.indexOf(key) === -1);
		if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
			state.openKeys = openKeys;
		} else {
			state.openKeys = latestOpenKey ? [latestOpenKey] : [];
		}
		};
		let handleClick = (event:any) => {

            // state.selectedKeys = [Number(event.key)]
            state.nowPageName = event.item.name
            router.push({path:event.item.route})
        }
		onMounted(() => {
            let cookieInfo = getCookie('userInfo') || ''
            if(cookieInfo){
                // menuList.value = JSON.parse(menuListSession)
                // userInfo.value = JSON.parse(cookieInfo)
                // state.selectedKeys = [route.path]
                // getBreadData(route.name)
                // getTitle(menuList.value, route.path)
            }else{
            }
			state.nowPageName = state.rootSubmenuKeys[0].name
			router.push(state.rootSubmenuKeys[0].route)
            
        })
		return {
			...toRefs(state),
			onOpenChange,
			routers,
			handleClick,
		};
    },
    data(prop) {
        return {
		}
    },
	
    mounted() {
    },
	watch:{
		// newWindowState:{
		// 	handler(newVal,oldVal){
		// 		console.log(newVal);
		// 		if(newVal){
		// 			this.newWindow?.close();
		// 		}
		// 	}
		// },
		
	},
    methods: {
        
		
    },
});
</script>
<style lang="less">
.administrator_page {
	width: 100%;
    height: 100%;
    display: flex;
    background: rgba(243,244,248,0.4);
	
	.administrator_page_left{
		padding-top: 20px;
		.modal_title_text{
			// font-size: var(--aida-fsize1-8);
			line-height: 10rem;
			text-align: center;
		}
		.ant-menu-dark.menu_list_content{
            padding-left: 1.8rem;
            width: 30rem;
            height: calc(100% - 59px);
            background: #FFFFFF;
            flex-shrink: 0;

            .menu_icon{
                font-size: 2.4rem;
                color: #808185;
            }

            .ant-menu-item{
                padding-left: 3.1rem !important;
                display: flex;
                align-items: center;
                height: 6.6rem;
                border-radius: 3.3rem 0px 0px 3.3rem;
                box-sizing: border-box;

                &.ant-menu-item-only-child{
                    padding-left: 5.6rem !important;
                }

            }

            .ant-menu-submenu-title{
                padding-left: 3.1rem !important;
                height: 6.6rem;

            }
            .ant-menu-inline.ant-menu-sub{
                background: #FFFFFF;
            }
            
            .menu_title{
                font-size: 1.8rem;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: #808185;
            }
            .ant-menu-item-selected{
                background: #F3F4F8;

                .menu_title{
                    color: #343579;
                }

                .menu_icon{
                    color: #808185;
                }
            }
        }
	}
	.administrator_page_right{
		flex: 1;
		.administrator_page_right_header{
			display: flex;
            justify-content: space-between;
            align-items: center;
            height: 6.6rem;
            padding: 0 2.8rem 0 3.0rem;

            .page_name{
                border-left: solid .4rem #161F29;
                .page_name_title,.ant-breadcrumb-link{
                    font-size: 1.8rem;
                    font-weight: normal;
                    color: #333333;
                    padding-left: 1.2rem;
                    line-height: 1.8rem;
                }
            }
		}
		.administrator_page_right_content{
			height: 100%;
			padding-left: 3rem;
		}
	}
}
	

</style>
