<script setup>
import HeaderWrap from './components/HeaderWrap.vue'
import LeftWrap from './components/LeftWrap.vue'
import { usePermission } from '@/hooks/permission'
import { useLayoutState } from './hooks/index'

const { getPermissionData } = usePermission()


const { menuClose } = useLayoutState()

getPermissionData()

</script>

<template>
  <div :class="['layout-wrap', menuClose ? 'layout-wrap__max' : '']">
    <HeaderWrap />
    <LeftWrap />
    <div class="layout-content">
      <router-view />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.layout-wrap {
  min-height: 100%;
  padding-top: 60px;
  padding-left: 200px;
  transition: all .3s;
  .layout-content {
    padding: 20px;
    min-height: calc(100% - 64px);
  }
}
.layout-wrap__max{
    padding-left: 80px;
}
</style>