<template>
  <div class="app-container part-container">
    <Header />
    <div class="flex-box part-main">
      <div class="part-left">
        <side-bar @currentPath="showPartPage" :partBoxHeight="partBoxHeight" />
      </div>
      <div class="part-right">
        <div id="partBox">
          <Financial v-if="currentPath.pathName=='financial'" />
          <Business v-if="currentPath.pathName=='business'" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import elementResizeDetectorMaker from "element-resize-detector"
import Header from "./component/Header"
import SideBar from "./component/Sidebar"
import Financial from "./financial"
import Business from "./business"
export default {
  name: 'PartyA',
  components: {
    Header,
    SideBar,
    Financial,
    Business
  },
  data() {
    return {
      currentPath: {
        pathName: 'financial'  //默认展示页
      },
      partBoxHeight: null
    }
  },
  created() {
  },
  mounted() {
    const _this = this, erd = elementResizeDetectorMaker(), partBox = document.getElementById("partBox")
    erd.listenTo(partBox, element => {
      _this.$nextTick(() => {
        _this.partBoxHeight = partBox.offsetHeight
      })
    })
  },
  methods: {
    showPartPage(e){
      this.currentPath = e
    }
  }
}
</script>

<style lang="scss" scoped>
  .part-container{
    padding: 0;
  }
  .part-main{
    margin-top: 12px;
    align-items: initial;
  }
  .part-left{
    margin-right: 16px;
  }
  .part-right{
    min-width: 1088px;
    width: 100%;
  }
</style>
