<template>
  <el-container class="h100">
    <el-header class="header" height="90">
      <other-header/>
    </el-header>
    <el-container class="main-c">
      <el-aside width="230px">
         <other-menu/>
      </el-aside>
      <el-main class="my-main mmm" :class="{'no-padding':$route.name === 'gis'}">
        <transition mode="out-in" name="fade">
          <router-view :key="$route.fullPath"/>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import OtherHeader from "@/view/other/OtherHeader.vue";
import OtherMenu from "@/view/other/OtherMenu.vue";
import {onBeforeMount} from "vue";
import {useRootStore} from "@/stores/useStore";
import {otherReflectArr} from "@/data/all-reflect";
import {useRoute} from "vue-router";

export default {
  name: "Other",
  components: {OtherMenu, OtherHeader},
  setup() {

    const store = useRootStore()
    const route = useRoute()
    onBeforeMount(() => {
      store.pageType = otherReflectArr.find(i => route.path.includes(i.name))?.name
    })
  }
}
</script>

<style scoped lang="scss">
.main-c{
  overflow: auto;
}
.el-aside{
  box-sizing: border-box;
  margin-top: 4px;
}
.my-main{
  position: relative;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  //border: 12px solid #D4E6FF;
  &.no-padding{
    padding: 0;
    overflow-y: hidden !important;
  }
  padding: 12px;
  background: #D4E6FF;;
  :deep{
    >div{
      min-height: 100%;
      background-color: #fff;
    }
  }
}
.header{
  height: 90px;
  background: #37639c;
}
</style>
