<template>
  <div class="app-container group-container">
    <div class="header-container">
      <div class="flex-box part-header">
        <img class="header-logo" :src="require('@/assets/images/detail/company_logo.png')">
        {{name || '--'}}
      </div>
    </div>
    <div class="flex-box group-main">
      <div class="group-left">
        <side-bar ref="sidebar" @currentPath="showPartPage" :pathName="currentPath.pathName" :customerId="customerId"/>
      </div>
      <div class="group-right">
        <div id="groupBox" v-if="customerId">
          <Members v-if="currentPath.pathName=='members'" :company-id="companyId" :isSkeleton="isSkeleton" :companyInfo="companyInfo" />
          <Qualifications v-if="currentPath.pathName=='qualifications'" :company-id="companyId" :isSkeleton="isSkeleton" :companyInfo="companyInfo" />
          <Performance v-if="currentPath.pathName=='performance'" :company-id="companyId" :isSkeleton="isSkeleton" :companyInfo="companyInfo" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { idRemark } from '@/api/common'
  import SideBar from "./component/Sidebar"
  import Members from "./component/members"
  import Qualifications from "./component/qualifications"
  import Performance from "./component/performance"
  import { infoHeader } from '@/api/detail/party-a/index'
  import elementResizeDetectorMaker from "element-resize-detector"
  export default {
    name: 'GroupAccount',
    components:{
      SideBar,Members,Qualifications,Performance
    },
    data(){
      return{
        companyId: '3068',  //企业Id（测试默认3068）
        customerId: '',  //企业Id（测试默认'a00d582a6041f32c16aac804e4924736'）
        companyInfo: {},
        cooDetail: {},
        currentPath: {
          pathName: 'members'  //默认展示页
        },
        isCompany: false,
        isSkeleton: false,
        name:''
      }
    },
    created() {
      if (this.$route.params.id) { // customerId
        this.customerId = this.$route.params.id
      }
      // if (this.$route.query.path) { // 获取跳转对应板块
      //   this.currentPath.pathName = this.$route.query.path
      // }
      // this.$route.query.name=''
      this.name=this.$route.query.name ? this.$route.query.name : '中建集团'
    },
    mounted(){
    },
    methods: {
      showPartPage(e){
        this.currentPath = e
      },
    }
  }
</script>

<style lang="scss" scoped>
  .group-container{
    padding: 0;
  }
  .group-main{
    margin-top: 12px;
    align-items: initial;
  }
  .group-left{
    margin-right: 16px;
  }
  .group-right{
    min-width: 1088px;
    width: 100%;
    background: #FFFFFF;
    border-radius: 4px;
  }
  .part-header{
    font-size: 16px;
    font-weight: bold;
    color: #232323;
    background: #FFFFFF;
    padding: 14px 16px;
    margin-top: 12px;
    border-radius: 4px;
    .header-logo{
      width: 28px;
      height: 28px;
      margin-right: 16px;
    }
  }
</style>
