<template>
  <div class="header-container">
    <div class="bread-crumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: fromPath }" v-if="fromName">{{fromName}}</el-breadcrumb-item>
        <el-breadcrumb-item v-if="cooDetail"><el-link :underline="false" @click="cooperateList">合作情况</el-link></el-breadcrumb-item>
<!--        <el-breadcrumb-item :to="{ path: '/enterpriseData?tag=1' }">查企业</el-breadcrumb-item>-->
        <el-breadcrumb-item>{{companyInfo.simpleName || companyInfo.companyName || '--'}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="flex-box part-header">
      <img class="header-logo" :src="companyInfo.logoUrl || require('@/assets/images/detail/company_logo.png')">
      {{companyInfo.companyName || '--'}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: ['companyId', 'companyInfo', 'fromPath', 'fromName', 'cooDetail'],
  data() {
    return {
    }
  },
  created() {
  },
  methods: {
    // 跳转到企业详情合作情况
    cooperateList(){
      this.$emit('close-detail')
    },
  }
}
</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;
    border-radius: 4px;
    .header-logo{
      width: 28px;
      height: 28px;
      margin-right: 16px;
    }
  }
</style>
