<template>
  <div class="header-container">
    <div class="bread-crumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/enterpriseData' }">企业数据</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/enterpriseData?tag=1' }">查企业</el-breadcrumb-item>
        <el-breadcrumb-item>中铁一建</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="flex-box part-header">
      <img class="header-logo" src="@/assets/images/avatar.png">
      中交第二航务工程局有限公司
    </div>
  </div>
</template>

<script>
import { infoHeader } from '@/api/detail/party-a/index'
export default {
  name: 'Header',
  props: ['companyId'],
  data() {
    return {
      enterprise: {}
    }
  },
  created() {
    this.getInfoHeader()
  },
  methods: {
    async getInfoHeader(){
      let { data } = await infoHeader({companyId:this.companyId})
      if( data.code == 200){
        this.enterprise = data.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .bread-crumb{
    .el-breadcrumb{
      font-size: 12px;
      ::v-deep .el-breadcrumb__separator{
        margin: 0 5px;
      }
      ::v-deep .el-breadcrumb__inner.is-link, .el-breadcrumb__inner a{
        color: rgba(35,35,35,0.4);
        &:hover{
          color: #1890ff;
        }
      }
      ::v-deep .el-breadcrumb__item{
        &:last-child .el-breadcrumb__inner{
          color: #232323;
        }
        &:nth-last-child(2){
          .el-breadcrumb__separator{
            color: #232323;
          }
        }
      }
    }
  }
  .part-header{
    font-size: 16px;
    font-weight: bold;
    color: #232323;
    background: #FFFFFF;
    padding: 14px 16px;
    margin-top: 12px;
    .header-logo{
      width: 28px;
      height: 28px;
      margin-right: 16px;
    }
  }
</style>
