<template>
  <div class="app-wrapper">
    <header class="app-header">
      <Appheader></Appheader>
    </header>
    <section class="app-main">
      <aside class="aside" :class="{ isCollapse: SidebarStore.isCollapse }">
        <Sidebar></Sidebar>
      </aside>
      <main class="main">
        <Navbar></Navbar>
        <div class="main-wrapper">
          <div class="main-content divide-y">
            <div class="py-3" v-if="isShowHeader">
              <el-page-header @back="goBack" :content="headerContent" />
            </div>
            <router-view></router-view>
          </div>
        </div>
      </main>
    </section>
  </div>
</template>
<script>
import { defineComponent } from "@vue/composition-api";
import { useSidebarStore } from "@/stores/sidebar";

import { Appheader, Sidebar, Navbar } from "./components/index";

export default defineComponent({
  components: {
    Appheader,
    Sidebar,
    Navbar,
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  },
  computed: {
    isShowHeader() {
      return (!this.$route.hidden) && (this.$route?.meta?.back)
    },
    headerContent() {
      return this.$route?.query?.header ?? '详情页面'
    },
  },
  setup() {
    const SidebarStore = useSidebarStore();
    const toggle = () => SidebarStore.toggleIsCollapse();
    return {
      SidebarStore,
      toggle,
    };
  },
});
</script>
<style lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/variables.scss";

.el-page-header {
 margin: 10px 0;
  // border-bottom: 1px solid #f2f2f2;
  // padding-bottom: 13px;
  .el-page-header__title {
    font-size: 16px;
  }
}

.app-wrapper {
  display: flex;
  flex-direction: column;

  justify-content: flex-start;
  align-items: center;

  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  .app-header {
    flex: none;
    height: 54px;
    width: 100%;
  }

  .app-main {
    flex: auto;
    width: 100%;
    display: flex;

    justify-content: flex-start;
    align-items: flex-start;
    height: calc(100vh - 54px);

    .aside {
      flex: none;
      height: 100%;
      width: $sideBarWidth;

      // overflow: hidden;
      &.isCollapse {
        width: 54px;
      }
    }

    .main {
      flex: auto;
      height: 100%;
      background-color: $mainBg;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      align-items: stretch;
      flex-direction: column;
      overflow: auto;

      // padding: 10px;
      .main-wrapper {
        flex: auto;
        display: flex;
        justify-content: stretch;
        align-items: stretch;
        padding: 10px;
        box-sizing: border-box;

        .main-content {
          background-color: #fff;
          border-radius: 4px;
          height: 100%;
          width: 100%;
          box-sizing: border-box;
          padding: 10px;
          // position: relative;
          // left: 0;
          // top: 0;
          max-height: calc(100vh - 54px - 50px - 12px);
          overflow-y: auto;
          // overflow: hidden;
        }
      }
    }
  }
}

.content {
  background: #f2f6fc;
  height: 100%;
  width: 100%;
  margin: -10px;
  padding-right: 20px;
  padding-bottom: 20px;
}

.top-box {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 6px;
}

.info-box {
  border: 1px solid #e0e0e0;
  background: #fff;
  border-radius: 6px;
}

.icon-more {
  transform: rotate(90deg);
}</style>