<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';

const menuList = ref<any>([
  {
    label: '表格示例',
    name: 'table',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/table'
  },
  {
    label: '栅格示例',
    name: 'grid',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/grid'
  },
  {
    label: '卡片示例',
    name: 'card',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/card'
  },
  {
    label: '标签页示例',
    name: 'tabs',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/tabs'
  },
  {
    label: '描述页示例',
    name: 'info',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/info'
  },
  {
    label: '复杂表格',
    name: 'complex-form',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/complex-form'
  },
  {
    label: '弹窗demo',
    name: 'dialog',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/dialog'
  },
  {
    label: '上传组件demo',
    name: 'upload',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/upload'
  },
  {
    label: '图标集合',
    name: 'icons',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/icons'
  },
  {
    label: '表格',
    name: 'table-demo',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/table-demo'
  },
  {
    label: '表单',
    name: 'form-demo',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/form-demo'
  },
  {
    label: '树组件',
    name: 'tree-demo',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/tree-demo'
  },
  {
    label: 'flow组件',
    name: 'flow-demo',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/flow-demo'
  }
]);

const headerInfo = ref<any>({
  // title: 'AIoT Edge管理平台',
  // logo
});
const route = useRoute();

const userInfo = ref<any>({
  userAccount: 'deployer'
});
const commonds = ref<any>([
  { label: '个人中心', commond: 'user' },
  { label: '退出登录', commond: 'logout' }
]);
const asideWidth = ref<any>('240px');
const isCollapse = ref<any>(false);

function handleChangeCollapse(collapse: any) {
  isCollapse.value = collapse;
  if (isCollapse.value) {
    asideWidth.value = '70px';
  } else {
    asideWidth.value = '240px';
  }
}
</script>

<template>
  <common-layer
    :menu-list="menuList"
    :user-info="userInfo"
    :header-info="headerInfo"
    :commonds="commonds"
    :is-collapse="isCollapse"
    :aside-width="asideWidth"
    :breads="route.meta.breadcrumb"
    @handle-change-collapse="handleChangeCollapse"
  >
    <template #breadLeft>
      <div>左侧说明文件</div>
    </template>
    <template #breadRight>
      <el-button size="small" type="primary">右侧插槽位置</el-button>
    </template>
  </common-layer>
</template>

<style>
html,
body {
  height: 100%;
}
#app {
  height: 100%;
  background-color: #f9f9f9;
  font-size: 12px;
  font-family: 'PingFang SC';
}
</style>