<template>
  <div class="app-container info-container">
    <div class="company-box">
      <div class="company-nav flex-box">
        <div class="company-left">
          <img :src="companyInfo.logoUrl" :alt="companyInfo.companyName" :title="companyInfo.companyName" v-if="companyInfo && companyInfo.logoUrl">
          <span
            :class="companyInfo.nameSimple&&companyInfo.nameSimple.length<3?'conenctLogo textOne bg'+companyInfo.nameSimple.length:'conenctLogo textTwo bg'+companyInfo.nameSimple.length"
            v-else-if="companyInfo && companyInfo.nameSimple"
            v-html="companyInfo.nameSimple"></span>
          <img :src="require('@/assets/images/detail/overview/logo@2x.png')" :alt="companyInfo.companyName" :title="companyInfo.companyName" v-else>
        </div>
        <div class="company-title">
          <div class="company-name">
            {{companyInfo && companyInfo.companyName || '--'}}
          </div>
          <div class="company-tag">
            <div style="float: left;margin-top: 8px;" class="company-history" v-if="companyInfo && companyInfo.historyNames && companyInfo.historyNames.length>0">
              <el-popover
                placement="bottom-start"
                popper-class="enterpriseLabel-item"
                trigger="hover">
                <el-button slot="reference">曾用名 <i class="el-icon-caret-bottom"></i></el-button>
                <ul class="history-item">
                  <li v-for="(item, index) in companyInfo.historyNames" :key="index">{{item.value}}</li>
                </ul>
              </el-popover>
            </div>
            <span style="float: left;" :class="!labelArr.includes(companyInfo.businessStatus)?'label-bg1':'label-bg3'" v-if="companyInfo && companyInfo.businessStatus">{{companyInfo.businessStatus}}</span>
          </div>
        </div>
      </div>
      <div class="company-info">
        <div class="info-item flex-box">
          <div class="flex-box item"><label>法定代表人：</label><span class="text-cl1">{{companyInfo && companyInfo.corporatePerson || '--'}}</span></div>
          <div class="flex-box item"><label>统一社会信用代码：</label><span class="text-cl1">{{companyInfo && companyInfo.creditCode || '--'}}</span></div>
        </div>
        <div class="info-item flex-box">
          <div class="flex-box item"><label>注册资本：</label><span class="text-cl1">{{companyInfo && companyInfo.regCapital || '--'}}</span></div>
          <div class="flex-box item"><label>注册地址：</label><span class="text-cl1">{{companyInfo && companyInfo.addressDetail || '--'}}</span></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
var Swiper = require('@/assets/lib/swiper/swiper-bundle.min.js')
export default {
  name: "info",
  props: ['companyId', 'companyInfo'],
  data() {
    return {
      labelArr:['失信联合惩戒企业','司法纠纷','注销'], //负向经营状态
    }
  },
  created() {
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.info-container{
  margin: 0;
  padding: 0px 16px 10px 16px;
  background: #FFFFFF;
  border-radius: 4px;
  .company-box{
    width: 100%;
    position: relative;
    .company-nav{
      align-items: normal;
      .company-left{
        width: 64px;
        height: 64px;
        margin-right: 12px;
        flex-shrink: 0;
        img{
          width: 100%;
          height: 100%;
          border-radius: 4px;
          overflow: hidden;
        }
        .conenctLogo{
          width: 100%;
          height: 100%;
          color: #FFFFFF;
          border-radius: 4px;
          overflow: hidden;
          text-align: center;
          display: block;
          &.textOne{
            font-size: 18px;
            line-height: 64px;
          }
          &.textTwo{
            font-size: 18px;
            padding: 9px 10px;
            line-height: 24px;
          }
          &.bg1{
            background: #99BE81;
          }
          &.bg2{
            background: #76B4D4;
          }
          &.bg3{
            background: #7A91D9;
          }
          &.bg4{
            background: #8F8DD2;
          }
          &.bg5{
            background: #C4A89F;
          }
        }
        p{
          font-size: 12px;
          color: #999999;
          text-align: center;
          margin-top: 7px;
        }
      }
      .company-title{
        .company-name{
          font-size: 20px;
          color: #000000;
          font-weight: bold;
          margin-right: 100px;
        }
        .company-tag{
          overflow: hidden;
          font-size: 12px;
          padding: 2px 0 10px 0;
          .company-history, .company-highTech{
            display: inline-block;
            height: 22px;
            background: #EFEFEF;
            border-radius: 2px;
            margin-right: 8px;
            margin-left: 0;
            button{
              height: 22px;
              line-height: 22px;
              font-size: 12px;
              padding: 0 8px;
              background: #EFEFEF;
              color: #838383;
              border: 1px solid #EFEFEF;
              border-radius: 2px;
            }
          }
          .company-highTech{
            button{
              background: #DFEAFE;
              color: #0065F9;
            }
          }
          .enterpriseLabel-highTech{
            background: #ffffff;
            margin-top: 8px;
            margin-right: 8px;
            float: left;
          }
          >span{
            display: inline-block;
            height: 22px;
            line-height: 22px;
            padding: 0 8px;
            border-radius: 2px;
            margin-right: 8px;
            margin-top: 8px;
            &:last-child{
              margin-right: 0;
            }
          }
          .enterpriseLabel-span{
            display: inline-block;
            height: 22px;
            line-height: 22px;
            padding: 0 8px;
            border-radius: 2px;
            margin-right: 8px;
            margin-top: 8px;
            float: left;
          }
          .label-bg1{
            background: #DEF6F0;
            color: #0BAE8D;
          }
          .label-bg2{
            background: #DFEAFE;
            color: #0065F9;
          }
          .label-bg3{
            background: #fbf2f1;
            color: #fa5640;
          }
        }
      }
    }
    .company-info{
      background: #F5F9FE;
      border-radius: 2px;
      padding: 12px 10px 12px 16px;
      .info-item{
        margin-bottom: 12px;
        &:last-child{
          margin-bottom: 0;
        }
        .item-link{
          color: #0081FF;
          cursor: pointer;
          font-size: 12px;
          line-height: 20px;
          &:hover{
            color: #0069D0;
            text-decoration: none;
          }
        }
        .item{
          font-size: 14px;
          color: #333333;
          &:first-child{
            width: 280px;
          }
          &:nth-child(2){
            //width: 350px;
          }
          &.item-line{
            width: 100%;
            align-items: flex-end;
            .item-all{
              width: calc(100% - 50px);
              text-overflow: initial;
              white-space: initial;
              overflow: initial;
            }
            .item-more{
              width: calc(100% - 50px);
            }
          }
          label{
            color: #666666;
            flex-shrink: 0;
            font-weight: 400;
          }
          span{
            display: inline-block;
          }
        }
      }
    }
  }
  .history-item{
    padding: 8px 8px;
    li{
      font-size: 12px;
      color: #333333;
      padding: 2px 0;
    }
  }
  .enterpriseLabel-item{
    padding: 0;
    //width: 100%;
    max-width: 276px;
    margin-top: 8px !important;
  }
  .ml-4{
    margin-left: 4px;
  }
}
</style>
