<template>
  <div >
    <el-container>
      <el-aside style="width: unset;"><navbar></navbar>
				<div style="width: 100%; text-align: center;">
					<el-tooltip :content="theme" placement="bottom">
						<el-button  size="small" circle  @click="toggleDark()" >
							<el-icon >
								<Moon v-if="isDark" />
								<Sunny v-else/>
							</el-icon>
						</el-button>
					</el-tooltip>
					<el-tooltip :content="isCollapse?'展开':'折叠'" placement="bottom">
						<el-button size="small" circle  @click="isCollapse=!isCollapse" >
							<el-icon><Notebook /></el-icon>
						</el-button>
					</el-tooltip>
				</div>

				<!-- <div class="cursor-pointer m-6" @click="toggleDark()">{{ theme }}</div> -->
				<el-menu
					class="el-menu-vertical-demo"
					:collapse="isCollapse"
					router
				>
					<el-menu-item v-for="v in menuList" :index="v.path" :key="v.path" :router-link="v.path">
					  <el-icon> <component :is="v.icon?v.icon:'List'" /> </el-icon>
						<template #title>{{v.title}}</template>
					</el-menu-item>
				</el-menu>
			</el-aside>
      <!-- <el-container> -->
       <!-- <el-header> </el-header> -->
        <el-main>
					<router-view></router-view>
				</el-main>
      <!-- </el-container> -->
    </el-container>
  </div>
</template>


<script setup lang="ts">
const router = useRouter()
const { isDark, toggleDark } = useDarks()
const theme = computed(() => (isDark.value ? '暗黑' : '明亮'))
const isCollapse = ref(true)

const menuList=reactive([
	{title:'检测记录查询',path:'/reportRecordSN',icon:'Grid'},
	{title:'合格率统计报表',path:'/reportQualifiedRate' },
	{title:'合格率统计图表',path:'/chartQualifiedRate',icon:'Histogram' },
	{title:'缺陷统计图表',path:'/chartDefectRate' ,icon:'PieChart' },
	{title:'PT趋势图表',path:'/chartPT' ,icon:'TrendCharts' },
])
onMounted(async () => {
		console.log("layout onMounted",router.currentRoute.value.query,router.query,router.params);
})
</script>

<style>

</style>
