<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>
&lt;!&ndash;        <el-breadcrumb-item :to="{ path: '/enterpriseData?tag=1' }">查企业</el-breadcrumb-item>&ndash;&gt;
        <el-breadcrumb-item>{{companyInfo.simpleName || companyInfo.companyName || '&#45;&#45;'}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>-->
    <div class="flex-box part-header">
      <img class="header-logo" :src="companyInfo && companyInfo.logoUrl || require('@/assets/images/detail/company_logo.png')">
      {{companyInfo && companyInfo.companyName || '--'}}
      <div class="company-btn">
        <div class="btn btn_default h28" @click="addmonitor">加入监控</div>
        <div class="btn btn_default h28" @click="getscore">供应商评分</div>
      </div>
    </div>
    <!--供应商评分-->
    <el-dialog :visible.sync="dialogVisible3" class="enter-score" width="960px">
      <div class="poptitle">
        <span>供应商评分</span>
      </div>
      <div class="title_wrap i" style="margin-top: 8px">
        <div class="enterprise_title">
          评价雷达图
        </div>
      </div>
      <div class="scorechart">
        <img src="@/assets/images/enterprise/tp1.png" width="100%">
      </div>
      <div class="title_wrap i">
        <div class="enterprise_title">
          分供方评级汇总
        </div>
      </div>
      <div class="scorechart">
        <img src="@/assets/images/enterprise/tp2.png">
      </div>
      <div class="title_wrap i">
        <div class="enterprise_title">
          年度评价评级情况
        </div>
      </div>
      <div class="scorechart">
        <div class="table-item-jf table-item">
          <el-table :data="tableData" border :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}" ref="theOwnerListTable" row-key="id">
            <el-table-column type="index" label="序号" width="52">
              <template slot-scope="scope">
                <!--<span>{{(formdata.pageNum - 1) *formdata.pageSize + scope.$index + 1}}</span>-->
                <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>

            <el-table-column label="评价单位" prop="name1" width="336" :resizable="false"></el-table-column>
            <el-table-column label="品类" prop="name2" width="174" :resizable="false"></el-table-column>
            <el-table-column label="评价周期" prop="name3" width="148" :resizable="false"></el-table-column>
            <el-table-column label="综合得分" prop="name4" width="105" :resizable="false"></el-table-column>
            <el-table-column label="综合评级" prop="name5"  :resizable="false"></el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: ['companyId', 'companyInfo', 'cooDetail'],
  data() {
    return {
      dialogVisible3: false,
      tableData:[
        {name1:'中建一局集团第二建筑有限公司第三事业部',name2:'物资-水泥及水泥制品',name3:'2024年03月',name4:'126分',name5:'A'},
        {name1:'中建一局集团第二建筑有限公司第三事业部',name2:'物资-水泥及水泥制品',name3:'2024年03月',name4:'124分',name5:'A'},
        {name1:'中建一局集团第二建筑有限公司第三事业部',name2:'物资-水泥及水泥制品',name3:'2024年03月',name4:'124分',name5:'A'},
        {name1:'中建一局集团第二建筑有限公司第三事业部',name2:'物资-水泥及水泥制品',name3:'2024年03月',name4:'124分',name5:'A'},
      ],
    }
  },
  created() {
  },
  methods: {
    //加入监控
    addmonitor(){
      this.$message.success('操作成功！')
    },
    //供应商评分
    getscore(){
      this.dialogVisible3 = true
    },
    // 跳转到企业详情合作情况
    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;
    }
  }

  ::v-deep .enter-score {
    .el-dialog__body {
      padding: 24px 0 0;
    }

    .el-dialog__headerbtn {
      top: 20px;
      right: 20px;
      z-index: 3;
    }

    .poptitle {
      line-height: 56px;
      border-bottom: 1px solid #eee;
      height: 56px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      > span {
        padding-left: 20px;
        font-weight: bold;
        font-size: 16px;
        color: #232323;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        width: 385px;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .title_wrap{
      padding: 16px 20px;
    }
    .enterprise_title{
      font-size: 14px;
      line-height: 14px;
      height: 14px;
    }
    .scorechart{
      padding: 0 20px 16px;
    }
  }
  .company-btn{
    position: absolute;
    right: 40px;
    z-index: 10;
    top: 30px;
    text-align: right;
    font-weight: 400;
  }
</style>
