<!--
 * @Author: Devin
 * @Date: 2023-01-11 16:29:53
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-23 16:39:57
 * @Description: demo入口文件
-->
<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"
  ></common-layer>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import logoImg from './assets/images/logo.svg';

const menuList = ref<any>([
  {
    label: '流程编排',
    name: 'flow-system',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/flow-system'
  },
  {
    label: '子流程管理',
    name: 'sub-flow',
    icon: 'common-jihuoshebei',
    level: 1,
    path: '/sub-flow'
  }
]);

const headerInfo = ref<any>({
  title: '快键 服务逻辑编排',
  logo: logoImg
});
const route = useRoute();

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

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

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