<template>
  <div class="app-container part-container">
    <Header :company-id="companyId" v-if="companyId" />
    <div class="flex-box part-main">
      <div class="part-left">
        <side-bar @currentPath="showPartPage" :pathName="currentPath.pathName" :partBoxHeight="partBoxHeight" />
      </div>
      <div class="part-right">
        <div id="partBox" v-if="companyId">
          <Overview v-if="currentPath.pathName=='overview'" />
          <Businfo v-if="currentPath.pathName=='businfo'" />
          <Holderinfo v-if="currentPath.pathName=='holderinfo'" />
          <Execuinfo v-if="currentPath.pathName=='execuinfo'" />
          <Overseas v-if="currentPath.pathName=='overseas'" />
          <Branch v-if="currentPath.pathName=='branch'" />
          <Financial v-if="currentPath.pathName=='financial'" :company-id="companyId" />
          <Business v-if="currentPath.pathName=='business'" />
          <!-- 招标偏好 -->
          <Preference v-if="currentPath.pathName=='preference'" />
          <!-- 合作情况 -->
          <Cooperate v-if="currentPath.pathName=='cooperate'" />
          <!-- 决策链条 -->
          <DecisionMaking v-if="currentPath.pathName=='decisionMaking'" />
          <!-- 跟进记录 -->
          <Gjjl v-if="currentPath.pathName=='gjjl'" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { idRemark } from '@/api/common'
import elementResizeDetectorMaker from "element-resize-detector"
import Header from "./component/Header"
import SideBar from "./component/Sidebar"
import Overview from "./overview/overview"  //企业概览-企业速览
import Businfo from "./overview/businfo"   //企业概览-工商信息
import Holderinfo from "./overview/holderinfo"   //企业概览-股东信息
import Execuinfo from "./overview/execuinfo"   //企业概览-高管信息
import Overseas from "./overview/overseas"   //企业概览-对外投资
import Branch from "./overview/branch"   //企业概览-分支机构
import Financial from "./financial" //财务简析
import Business from "./business" //商务信息
import Preference from "./preference" //招标偏好
import Cooperate from "./cooperate" //合作情况
import DecisionMaking from "./decisionMaking" //决策链条
import Gjjl from "../../project/projectList/component/gjjl" //跟进记录
export default {
  name: 'PartyA',
  components: {
    Header,
    SideBar,
    Overview,
    Businfo,
    Holderinfo,
    Execuinfo,
    Overseas,
    Branch,
    Financial,
    Business,
    Preference,
    Cooperate,
    DecisionMaking,
    Gjjl
  },
  data() {
    return {
      companyId: 3068,  //企业Id（测试默认3068）
      currentPath: {
        pathName: 'overview'  //默认展示页
      },
      partBoxHeight: null
    }
  },
  created() {
    if (this.$route.query.companyId) { // 获取companyId
      let id = this.$route.query.companyId
      this.getCompanyId(id)
    }
    if (this.$route.query.path) { // 获取跳转对应板块
      this.currentPath.pathName = this.$route.query.path
    }
  },
  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
    },
    // 解密
    async getCompanyId(companyId){
      let { data } = await idRemark({companyId})
      if( data.code == 200){
        this.companyId = data.data
      }
    }
  }
}
</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>
