<template>
	<div class="administrator_page">
		<div class="administrator_page_left">
			<div class="administrator_title ">
				<div class="modal_title_text" @click="setBack">
					<i class="fi fi-sr-left"></i>
					<div class="modal_title_intro administrator_title_text">Back</div>
				</div>
			</div>
			<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" :title="menu.name">{{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" :title="menu.name">{{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" :title="child.name">{{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 v-slot="{ Component }">
					<keep-alive>
						<component :is="Component" />
					</keep-alive>
				</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 { country } from "@/tool/country";
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";
import store from "@/store";
export default defineComponent({
	components: {
		MailOutlined,
		AppstoreOutlined,
		SettingOutlined,
	},
    props: ["msg",'sketchCatecoryList'],
    setup() {
		const router = useRouter()
        // const route:any = useRoute()
        const store:any = useStore()
		const state:any = reactive({
		rootSubmenuKeys: [{
			name:'All User',
			route:'/administrator/allUser',
			icon:'yonghu',
			expandIcon:'icon-xiala',
			key:'sub1',
			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:'sub2',
			isShow:true,
		},{
			name:'Trial User',
			icon:'usetime',
			expandIcon:'icon-xiala',
			key:'sub3',
			isShow:true,
			children:[
				{
					name:'All Trial User',
					route:'/administrator/trialAllUser',
					icon:'usetime',
					key:'sub3-1',
					isShow:true,
				},{
					name:'Trial User Approval',
					route:'/administrator/trialApproval',
					icon:'usetime',
					key:'sub3-2',
					isShow:true,
				},{
					name:'Trial User CHART',
					route:'/administrator/trialUserCountry',
					icon:'',
					key:'sub3-3',
					isShow:true,
				},{
					name:'Conversion Rate',
					route:'/administrator/trialUserConversionRateChart',
					icon:'',
					key:'sub3-4',
					isShow:true,
				},
			]
		},{
			name:'Function Use CHART',
			route:'/administrator/recentActiveChart',
			icon:'usetime',
			key:'sub4',
			isShow:true,
		},{
			name:'Active User',
			icon:'usetime',
			route:'/administrator/recentActiveUser',
			key:'sub5',
			isShow:true,
		},{
			name:'New User',
			icon:'usetime',
			expandIcon:'icon-xiala',
			key:'sub6',
			isShow:true,
			children:[
				{
					name:'New User List',
					route:'/administrator/recentNewUser',
					icon:'',
					key:'sub6-1',
					isShow:true,
				},{
					name:'New User CHART',
					route:'/administrator/recentNewUserChart',
					icon:'',
					key:'sub6-2',
					isShow:true,
				},
			]
		},{
			name:'Events',
			icon:'usetime',
			key:'sub9',
			expandIcon:'icon-xiala',
			isShow:true,
			children: [
				{
					name:'Questionnaire Survey',
					route:'/administrator/questionnaire',
					icon:'',
					key:'sub9-1',
					isShow:true,
				},
				// {
				// 	code:'ROLE_MANAGER',
				// 	name:'Access Permission',
				// 	route:'/home/excil2',
				// 	icon:'',
				// 	key:'/home/excil33',
				// 	isShow:true,
				// },
			],
		},{
			name:'Approval Affiliate',
			icon:'usetime',
			route:'/administrator/affiliateAudit',
			key:'sub10',
			isShow:true,
		},{
			name:'Transaction',
			icon:'usetime',
			expandIcon:'icon-xiala',
			key:'sub11',
			isShow:true,
			children: [
				{
					name:'Transaction Record',
					route:'/administrator/TransactionTable',
					icon:'',
					key:'sub11-1',
					isShow:true,
				},
				// {
				// 	code:'ROLE_MANAGER',
				// 	name:'Access Permission',
				// 	route:'/home/excil2',
				// 	icon:'',
				// 	key:'/home/excil33',
				// 	isShow:true,
				// },
			],
		}],
		openKeys: [],
		selectedKeys: ['sub1'],
		nowPageName:'All 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})
        }
		let setBack = ()=>{
			router.push('/home');
		} 
		onMounted(() => {
			state.rootSubmenuKeys.forEach((item:any) => {
				if(item.children){
					item.children.forEach((item:any) => {
						if(item.route == router.currentRoute.value.path){
							state.selectedKeys[0] = item.key
						}
					});
				}else{
					if(item.route == router.currentRoute.value.path){
						state.selectedKeys[0] = item.key
					}
				}
			});
			//储存所有用户id和name
			Https.axiosGet(Https.httpUrls.getAllUserId,).then((rv: any) => {
				if (rv) {
					store.commit('setAllUserList',rv);
				}
			})
			Https.axiosGet(Https.httpUrls.getCities,).then((rv: any) => {
				if (rv) {
					store.commit('setAllCitiesList',rv);
				}
			})
			let allCountry = country
			sessionStorage.setItem('allCountry',JSON.stringify(allCountry));
			// state.nowPageName = state.rootSubmenuKeys[0].name
			// router.push(state.rootSubmenuKeys[0].route)
            
        })
		return {
			...toRefs(state),
			onOpenChange,
			routers,
			handleClick,
			setBack,
		};
    },
    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_title{
		display: flex;
		align-items: center;
		position: sticky;
		top: 0;
		z-index: 222;
		.modal_title_text{
			cursor: pointer;
			display: flex;
			margin-bottom: 0;
			font-size: 1.8rem;
		}
		.administrator_title_text{
			line-height: 1;
		}
		.modal_title_text:hover .administrator_title_text{
			text-decoration: underline;
		}
		i{
			font-size: 1.2rem;
			display: flex;
			align-items: center;
			margin-right: 1rem;
		}
	}
	.administrator_page_left{
		width: 20%;
		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;
			width: 100%;
            height: calc(100% - 16rem);
            background: #FFFFFF;
            flex-shrink: 0;
			overflow-y: auto;
			&::-webkit-scrollbar{
				width: 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;
				padding-left: 4rem;
            }
            
            .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;
		width: 80%;
		.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>
