<template>
  <div :style="menuPageCss" class="pages page-layout">
    <LayoutHeader v-if="menuPage !== 'left'" @changePath="changePath"></LayoutHeader>
    <LayoutHeaderLeft @toggle="toggle" :isOpen="isOpen" v-if="menuPage === 'left'" />
    <div class="layout">
      <router-view :class="{ active: !isOpen }" />
    </div>
  </div>
</template>
<script>
import LayoutHeader from "../components/Header";
import LayoutHeaderLeft from "../components/HeaderLeft";
import TabPane from "../components/tabPane.vue";
const isPC = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
//菜单位置：取值： left :菜单在左面， top :菜单在上面
const MenuPage = "top";

export default {
  components: {
    LayoutHeader,
    LayoutHeaderLeft,
    TabPane,
  },
  data() {
    return {
      isOpen: isPC,
      menuPage: MenuPage,
      isfresh: true,
      path: "",
    };
  },
  computed: {
    menuPageCss() {
      //左面和顶面菜单切换时，动态计划相关css参数
      return {
        "--padding-top": this.menuPage === "left" ? "60px" : "0px",
        "--margin-left": this.menuPage === "left" ? "200px" : "0px",
      };
    },
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    },
    changePath(e) {
      this.path = e;
    },
  },
};
</script>

<style lang="less">
.layout {
  padding: 15px 15px 0 15px;
  box-sizing: border-box;

}

.page {
  min-height: calc(100vh - 100px);
  width: 100%;
  position: relative;
  background: #fff;
  // var(--padding-top) 5px 5px 5px;
  // margin-left: 60px;
  padding: 10px;

  &.active {
    margin-left: var(--margin-left);
  }
}

.page-layout {
  background: #eee;
  height: 100vh;
  overflow: auto;
}

/* 侧边滚动条 */
.page-layout::-webkit-scrollbar {
  width: 3px;
}

/* 滚动条上的滚动滑块 */
.page-layout::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 4px;
}

/* 滚动条轨道 */
.page-layout::-webkit-scrollbar-track {
  background: #EEEEEE;
  border-radius: 4px;
}
</style>
