<!--
 * @Author: Devin
 * @Date: 2023-01-13 11:03:22
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-22 14:50:58
 * @Description: 页面整体layer布局
-->
<template>
  <!-- app组合 -->
  <common-container :aside-width="asideWidth" :is-collapse="isCollapse">
    <!-- header -->
    <template #header>
      <common-header
        :user-info="userInfo"
        :header-info="headerInfo"
        :commonds="commonds"
      >
        <slot></slot>
      </common-header>
      <div class="slider-bar"></div>
    </template>
    <!-- menu -->
    <template #menu>
      <common-menu
        :menu-list="menuList"
        :is-collapse="isCollapse"
      ></common-menu>
    </template>
    <template #content>
      <div class="__common-layer-content">
        <!-- icon -->
        <div class="__common-layer-collapes">
          <div
            class="__common-layer-collapes-icon"
            @click.stop="changeCollapse"
          >
            <common-icon
              name="common-caidanshouqi"
              :class="isCollapse ? 'rotate-180' : 'rotate-0'"
            ></common-icon>
          </div>
        </div>
        <slot></slot>
        <div class="__common-layer-bread">
          <div class="left">
            <common-bread class="m-r-10" :breads="breads"></common-bread>
            <slot name="breadLeft"></slot>
          </div>
          <slot name="breadRight"></slot>
        </div>
        <keep-alive>
          <router-view />
        </keep-alive>
      </div>
    </template>
  </common-container>
</template>

<script setup lang="ts">
import CommonContainer from '../container/CommonContainer.vue';
import CommonHeader from './Header.vue';
import CommonMenu from './Menu.vue';

// 接收参数
const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  },
  menuList: {
    type: Array,
    default: () => []
  },
  headerInfo: {
    type: Object,
    default: () => {}
  },
  userInfo: {
    type: Object,
    default: () => {}
  },
  commonds: {
    type: Array,
    default: () => []
  },
  breads: {
    type: Array,
    default: () => []
  },
  asideWidth: {
    type: String,
    default: () => '240px'
  }
});
const emits = defineEmits(['handleChangeCollapse']);
// 切换collapse
function changeCollapse() {
  emits('handleChangeCollapse', !props.isCollapse);
}
</script>

<script lang="ts">
export default {
  name: 'CommonLayer'
};
</script>

<style scoped lang="scss">
.__common-layer-bread {
  height: 50px;
  padding: 0 26px;
  display: flex;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
}
.__common-layer-content {
  position: relative;
  height: 100%;
  .__common-layer-collapes {
    width: 16px;
    position: absolute;
    left: 0px;
    top: 50%;
    .__common-layer-collapes-icon {
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 0px 4px 4px 0px;
      position: absolute;
      top: 50%;
      margin-top: -15px;
    }
  }
}
.rotate-0 {
  transform: rotate(0deg);
}
.rotate-180 {
  transform: rotate(180deg);
}
</style>