<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.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.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.companyName || ''}}
          </div>
          <div class="company-tag">
            <div style="float: left;margin-top: 8px;" class="company-history" v-if="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.businessStatus">{{companyInfo.businessStatus}}</span>
            <span style="float: left;" :class="item.state===0?'label-bg2':'label-bg3'" v-for="(item, index) in labelList" :key="index">{{item.labelName}}</span>
            <template v-if="enterpriseLabel.length > 0">
              <template v-for="(item,index) in enterpriseLabel">
                <template v-if="item.children.length > 0">
                  <div class="enterpriseLabel-highTech company-highTech">
                    <el-popover
                      width="280"
                      placement="bottom-start"
                      popper-class="enterpriseLabel-item"
                      trigger="hover">
                      <el-button slot="reference" :style="'background:'+item.bgColor+';color:'+item.fontColor+';border:1px solid '+item.bgColor+';margin: 0;'">{{item.labelName}} <span>{{ item.children.length }}</span><i class="el-icon-arrow-right"></i></el-button>
                      <p class="highTech-item">
                        <span v-for="(v,i) in item.children" class="enterpriseLabel-children-span" :style="v.linkUri ? 'cursor:pointer;' : ''">{{ v.labelName }}</span>
                      </p>
                    </el-popover>
                  </div>
                </template>
                <template v-else>
                  <template v-if="item.remark">
                    <div class="enterpriseLabel-highTech company-highTech">
                      <el-popover
                        width="280"
                        placement="bottom-start"
                        popper-class="enterpriseLabel-item"
                        trigger="hover">
                        <el-button slot="reference" :style="'background:'+item.bgColor+';color:'+item.fontColor+';border:1px solid '+item.bgColor+';margin: 0;'">{{item.labelName}} <i class="el-icon-arrow-down"></i></el-button>
                        <p class="highTech-item" style="margin-bottom: 8px">{{item.remark}}</p>
                      </el-popover>
                    </div>
                  </template>
                  <span v-else class="enterpriseLabel-span" :style="{'background':item.bgColor,'color':item.fontColor,'cursor':item.linkUri ? 'pointer' : ''}">{{item.labelName}}</span>
                </template>
              </template>
            </template>
          </div>
        </div>
      </div>
      <div class="company-menu">
        <el-button @click="handleClaim" v-if="ifClaim" class="hasClaim" v-loading="claimLoading"><i class="el-ico-claim" alt="已认领" title="已认领"></i> 已认领</el-button>
        <el-button @click="handleClaim" v-else class="claim" v-loading="claimLoading"><i class="el-ico-claim" alt="认领客户" title="认领客户"></i> 认领客户</el-button>
      </div>

      <div class="company-info">
        <div class="info-item flex-box">
          <div class="item"><label>法定代表人：</label><span>{{companyInfo.corporatePerson || ''}}</span></div>
          <div class="item"><label>注册资本：</label><span>{{companyInfo.regCapital || '--'}}</span></div>
          <div class="item"><label>统一社会信用代码：</label><span>{{companyInfo.creditCode || ''}}</span></div>
        </div>
        <div class="info-item flex-box">
          <div class="item"><label>成立日期：</label><span>{{companyInfo.regCapital || '--'}}</span></div>
          <div class="item"><label>类型：</label><span>{{companyInfo.regCapital || '--'}}</span></div>
          <div class="item"><label>企业邮箱：</label><span>{{companyInfo.regCapital || '--'}}</span></div>
        </div>
        <div class="info-item flex-box">
          <div class="item"><label>官网：</label><span>{{companyInfo.regCapital || '--'}}</span></div>
          <div class="item"><label>注册地址：</label><span>{{companyInfo.regCapital || '--'}}</span></div>
          <div class="item"><label>通信地址：</label><span>{{companyInfo.regCapital || '--'}}</span></div>
        </div>
        <div class="info-item flex-box" >
          <div class="item flex-box item-line" >
              <span ref="companyQybj" class="text-cl1" :class="showMore&&showState?'item-all':'item-more'">
                <label>企业背景：</label>{{companyInfo.introduction || ''}}
              </span>
              <span class="item-link ml-4" v-if="companyInfo.introduction&&showMore" @click="handleDetail">{{showState?'收起':'展开'}}</span>
          </div>
        </div>
      </div>
      <div class="company-swiper">
        <div class="swiper-containers swiper-info" :style="graphList.length<=6?'margin-left:0px; width: 100%;':''">
          <ul class="swiper-wrapper">
            <template  v-for="(item, index) in graphList" >
              <li class="swiper-slide" :key="index">
                <div class="flex-box" @click="handleGraph(item)">
                  <img :src="`${item.ico}`" :alt="item.name" :title="item.name" class="swiper-img">
                  <div class="swiper-item">
                    <span class="swiper-name">
                      {{item.name}}
                    </span>
                    <template v-for="(it, idx) in item.intro">
                      <div :key="idx" @click.stop="handleGraphChild(item, it)">
                        <span v-html="it.name"></span> <i :class="[idx!=item.intro.length-1?'num':'']"  :style="it.val>0?'':{color: '#999999',cursor: 'not-allowed'}">{{it.val}}</i>
                      </div>
                    </template>
                  </div>
                </div>
              </li>
            </template>
          </ul>
        </div>
        <div class="swiper-button-prev swiper-info-prev" slot="button-prev" style="left: 0;"><i class="el-icon-arrow-left"></i></div>
        <div class="swiper-button-next swiper-info-next" slot="button-next" style="right: 0"><i class="el-icon-arrow-right"></i></div>
      </div>
      <!-- 分条件：滚动与不滚动 -->
    </div>
  </div>
</template>

<script>
var Swiper = require('@/assets/lib/swiper/swiper-bundle.min.js')
import "@/assets/lib/swiper/swiper-bundle.css"
import { encodeStr } from '@/assets/js/common.js'
export default {
  name: 'Infoheader',
  data() {
    return {
      companyInfo: {
        "historyNames": [
          {
            "name": "",
            "value": "中国建筑第八工程局"
          }
        ],
        "eid": "a4465fc3-ef1d-470b-834e-3af1975a5692",
        "regCapital": "1521800万元人民币",
        "registeredDate": "1998-09-29",
        "companyName": "中国建筑第八工程局有限公司",
        "provinceIdsArea": "310000,360000,500000,450000,420000,320000,370000,330000,510000,150000,610000,230000,460000,210000,440000,130000,120000,630000,430000,410000,350000,340000,650000,640000,140000,540000,520000,530000,620000,110000,220000",
        "econKind": "有限责任公司（非自然人投资或控股的法人独资）",
        "cityId": 310100,
        "addressDetail": "中国（上海）自由贸易试验区世纪大道1568号27层",
        "creditCode": "9131000063126503X1",
        "metaTime": "2023-05-13",
        "contact": {
          "cellphone": 266,
          "telephone": 158,
          "phoneNumber": "0310-8083960"
        },
        "corporatePerson": "李永明",
        "views": 32303,
        "introduction": "中国建筑第八工程局有限公司成立于1998-09-29，法定代表人为李永明，注册资本为1521800万元，统一社会信用代码为9131000063126503X1，企业地址位于中国（上海）自由贸易试验区世纪大道1568号27层，经营范围包含房屋建筑、公路、铁路、市政公用、港口与航道、水利水电各类别工程的咨询、设计、施工、总承包和项目管理，化工石油工程，电力工程，基础工程，装饰工程，工业筑炉，城市轨道交通工程，园林绿化工程，线路、管道、设备的安装，混凝土预制构件及制品，非标制作，建筑材料生产、销售，建筑设备销售，建筑机械租赁，房地产开发，自有房屋租赁，物业管理，从事建筑领域内的技术转让、技术咨询、技术服务，企业管理咨询，商务信息咨询，经营各类商品和技术的进出口，但国家限定公司经营或禁止进出口的商品及技术除外。【依法须经批准的项目，经相关部门批准后方可开展经营活动】。该公司目前的经营状态为存续（在营、开业、在册）。企业联系方式为：0310-8083960。",
        "businessDateFrom": "1998-09-29",
        "isHighTech": 1,
        "businessScope": "房屋建筑、公路、铁路、市政公用、港口与航道、水利水电各类别工程的咨询、设计、施工、总承包和项目管理，化工石油工程，电力工程，基础工程，装饰工程，工业筑炉，城市轨道交通工程，园林绿化工程，线路、管道、设备的安装，混凝土预制构件及制品，非标制作，建筑材料生产、销售，建筑设备销售，建筑机械租赁，房地产开发，自有房屋租赁，物业管理，从事建筑领域内的技术转让、技术咨询、技术服务，企业管理咨询，商务信息咨询，经营各类商品和技术的进出口，但国家限定公司经营或禁止进出口的商品及技术除外。【依法须经批准的项目，经相关部门批准后方可开展经营活动】",
        "businessStatus": "存续（在营、开业、在册）",
        "isFy": false,
        "provinceId": 310000,
        "logoUrl": "https://qxb-logo-url.oss-cn-hangzhou.aliyuncs.com/OriginalUrl/2cae9ba958e78d719c43fd0f7e4fa514.jpg",
        "companyId": 6034,
        "simpleName": "中建八局",
        "provinceName": "上海"
      },
      labelList: [], //企业标签
      claimLoading: false,
      ifClaim: false, //是否认领
      showMore: false,
      showState: false,
      graphList: [
        {id: 1, name:'业务往来', intro:[{id: 101, name:'客户', val:44},{id: 102, name:'供应商', val:55}], ico:require('@/assets/images/detail/overview/company_ywwl.png')},
        {id: 2, name:'商机线索', intro:[{id: 201, name:'专项债项目', val:66},{id: 202, name:'招标计划', val:66}], ico:require('@/assets/images/detail/overview/company_sjxs.png')},
        {id: 3, name:'城投拿地', intro:[{id: 301, name:'土地交易', val:2},{id: 302, name:'行政许可', val:0}], ico:require('@/assets/images/detail/overview/company_ctnd.png')},
        {id: 4, name:'对外投资', intro:[{id: 401, name:'企业经营实力展现'}], ico:require('@/assets/images/detail/overview/company_dwtz.png')},
        {id: 5, name:'股权穿透', intro:[{id: 501, name:'瞬息掌握企业关系'}], ico:require('@/assets/images/detail/overview/company_gqct.png')},
        {id: 6, name:'企业架构', intro:[{id: 601, name:'企业架构关联图'}], ico:require('@/assets/images/detail/overview/company_qyjg.png')},
        {id: 7, name:'工商信息', intro:[{id: 701, name:'企业基础工商登记信息'}], ico:require('@/assets/images/detail/overview/company_gsxx.png')}
      ],  //企业链图
      //风险扫描
      labelArr:['失信联合惩戒企业','司法纠纷','注销'], //负向经营状态
      enterpriseLabel:[
        {
          "labelCode": "4_1_",
          "labelName": "严重行政处罚",
          "companyId": 6034,
          "num": 1,
          "pcode": "4_",
          "level": 2,
          "isLeaf": 1,
          "orderNum": 1,
          "bgColor": "#FFF3F3",
          "fontColor": "#FD5757",
          "remark": "严重行政处罚，是指有关行政部门处以企业暂停投标资格、暂停承揽新业务的行政处罚。原因包括但不限于企业存在围标串标、克扣或拖欠劳动者报酬、出现重大安全事故等异常行为导致企业无法承揽工程项目，产生重大经营风险",
          "children": [],
          "linkUri": "/credit?type=0"
        },
        {
          "labelCode": "2_2_1_",
          "labelName": "施工特级资质",
          "num": 3,
          "pcode": "2_2_",
          "level": 3,
          "isLeaf": 0,
          "orderNum": 6,
          "bgColor": "#E4F3FD",
          "fontColor": "#41A1FD",
          "linkBizId": 209,
          "children": [
            {
              "labelCode": "2_2_1_1_",
              "labelName": "建筑工程特级",
              "companyId": 6034,
              "num": 1,
              "pcode": "2_2_1_",
              "level": 4,
              "isLeaf": 1,
              "orderNum": 6,
              "bgColor": "#E4F3FD",
              "fontColor": "#41A1FD",
              "linkBizId": 209,
              "children": [],
              "linkUri": "?type=0"
            },
            {
              "labelCode": "2_2_1_2_",
              "labelName": "公路工程特级",
              "companyId": 6034,
              "num": 1,
              "pcode": "2_2_1_",
              "level": 4,
              "isLeaf": 1,
              "orderNum": 7,
              "bgColor": "#E4F3FD",
              "fontColor": "#41A1FD",
              "linkBizId": 209,
              "children": [],
              "linkUri": "?type=0"
            },
            {
              "labelCode": "2_2_1_10_",
              "labelName": "市政公用工程特级",
              "companyId": 6034,
              "num": 1,
              "pcode": "2_2_1_",
              "level": 4,
              "isLeaf": 1,
              "orderNum": 15,
              "bgColor": "#E4F3FD",
              "fontColor": "#41A1FD",
              "linkBizId": 209,
              "children": [],
              "linkUri": "?type=0"
            }
          ],
          "linkUri": "?type=0"
        },
        {
          "labelCode": "3_2_1_",
          "labelName": "高新技术企业",
          "companyId": 6034,
          "num": 1,
          "pcode": "3_2_",
          "level": 3,
          "isLeaf": 1,
          "orderNum": 67,
          "bgColor": "#FFF7EC",
          "fontColor": "#BFA061",
          "remark": "高新技术企业指在国家颁布的《国家重点支持的高新技术领域》范围内，持续进行研究开发与技术成果转化，形成企业核心自主知识产权，并以此为基础开展经营活动的居民企业，是知识密集、技术密集的经济实体。",
          "children": []
        },
        {
          "labelCode": "3_2_4_",
          "labelName": "省级企业技术中心",
          "companyId": 6034,
          "num": 1,
          "pcode": "3_2_",
          "level": 3,
          "isLeaf": 1,
          "orderNum": 70,
          "bgColor": "#FFF7EC",
          "fontColor": "#BFA061",
          "remark": "企业技术中心是指企业根据市场竞争需要设立的技术研发与创新机构，负责制定企业技术创新规划、开展产业技术研发、创造运用知识产权、建立技术标准体系、凝聚培养创新人才、构建协同创新网络、推进技术创新全过程实施。",
          "children": []
        },
        {
          "labelCode": "3_1_1_1_",
          "labelName": "国家级荣誉奖项",
          "num": 8,
          "pcode": "3_1_1_",
          "level": 4,
          "isLeaf": 0,
          "orderNum": 76,
          "bgColor": "#FFF7EC",
          "fontColor": "#BFA061",
          "children": [
            {
              "labelCode": "3_1_1_1_1_",
              "labelName": "鲁班奖",
              "companyId": 6034,
              "num": 1,
              "pcode": "3_1_1_1_",
              "level": 5,
              "isLeaf": 1,
              "orderNum": 76,
              "bgColor": "#FFF7EC",
              "fontColor": "#BFA061",
              "children": [],
              "linkUri": "/behavior?type=0"
            },
            {
              "labelCode": "3_1_1_1_2_",
              "labelName": "国家优质工程奖",
              "companyId": 6034,
              "num": 1,
              "pcode": "3_1_1_1_",
              "level": 5,
              "isLeaf": 1,
              "orderNum": 77,
              "bgColor": "#FFF7EC",
              "fontColor": "#BFA061",
              "children": [],
              "linkUri": "/behavior?type=0"
            },
            {
              "labelCode": "3_1_1_1_3_",
              "labelName": "詹天佑奖",
              "companyId": 6034,
              "num": 1,
              "pcode": "3_1_1_1_",
              "level": 5,
              "isLeaf": 1,
              "orderNum": 78,
              "bgColor": "#FFF7EC",
              "fontColor": "#BFA061",
              "children": [],
              "linkUri": "/behavior?type=0"
            },
            {
              "labelCode": "3_1_1_1_4_",
              "labelName": "建筑装饰优质工程奖",
              "companyId": 6034,
              "num": 1,
              "pcode": "3_1_1_1_",
              "level": 5,
              "isLeaf": 1,
              "orderNum": 79,
              "bgColor": "#FFF7EC",
              "fontColor": "#BFA061",
              "children": [],
              "linkUri": "/behavior?type=0"
            },
            {
              "labelCode": "3_1_1_1_5_",
              "labelName": "绿色建筑创新奖",
              "companyId": 6034,
              "num": 1,
              "pcode": "3_1_1_1_",
              "level": 5,
              "isLeaf": 1,
              "orderNum": 80,
              "bgColor": "#FFF7EC",
              "fontColor": "#BFA061",
              "children": [],
              "linkUri": "/behavior?type=0"
            },
            {
              "labelCode": "3_1_1_1_6_",
              "labelName": "钢结构金奖",
              "companyId": 6034,
              "num": 1,
              "pcode": "3_1_1_1_",
              "level": 5,
              "isLeaf": 1,
              "orderNum": 81,
              "bgColor": "#FFF7EC",
              "fontColor": "#BFA061",
              "children": [],
              "linkUri": "/behavior?type=0"
            },
            {
              "labelCode": "3_1_1_1_8_",
              "labelName": "市政金杯示范工程",
              "companyId": 6034,
              "num": 1,
              "pcode": "3_1_1_1_",
              "level": 5,
              "isLeaf": 1,
              "orderNum": 83,
              "bgColor": "#FFF7EC",
              "fontColor": "#BFA061",
              "children": [],
              "linkUri": "/behavior?type=0"
            },
            {
              "labelCode": "3_1_2_1_1_",
              "labelName": "华夏建设科学技术奖",
              "companyId": 6034,
              "num": 1,
              "pcode": "3_1_1_1_",
              "level": 5,
              "isLeaf": 0,
              "orderNum": 112,
              "bgColor": "#FFF7EC",
              "fontColor": "#BFA061",
              "children": [],
              "linkUri": "/behavior?type=0"
            }
          ],
          "linkUri": "/behavior?type=0"
        },
        {
          "labelCode": "1_1_1_",
          "labelName": "长三角",
          "companyId": 6034,
          "num": 1,
          "pcode": "1_1_",
          "level": 3,
          "isLeaf": 1,
          "orderNum": 113,
          "bgColor": "#F3F3FF",
          "fontColor": "#8491E8",
          "children": []
        },
        {
          "labelCode": "1_1_5_",
          "labelName": "华东",
          "companyId": 6034,
          "num": 1,
          "pcode": "1_1_",
          "level": 3,
          "isLeaf": 1,
          "orderNum": 113,
          "bgColor": "#F3F3FF",
          "fontColor": "#8491E8",
          "children": []
        }
      ],//企业标签
    }
  },
  created() {
    this.getCompanyInfo()
  },
  mounted() {
    this.handleWidth()
    this.getClaimStatus() //获取企业认领状态
    this.companySwiper()
  },
  methods: {
    //认领
    async handleClaim(){
      let _this = this
      _this.claimLoading = true
      setTimeout(function (){
        _this.claimLoading = false
        _this.$confirm(`认领成功，是否完善客户信息`, '提示', {
          type: 'warning'
        }).then(async () => {
          console.log('操作跳转！')
        })
      }, 1000)
    },
    companySwiper(){
      new Swiper('.swiper-info', {
        slidesPerView: 6,
        // 设置点击箭头
        navigation: {
          nextEl: '.swiper-info-next',
          prevEl: '.swiper-info-prev',
        }
      })
    },
    getCompanyInfo(){
      if(this.companyInfo.historyNames && typeof this.companyInfo.historyNames=='string'){  //曾用名
        this.companyInfo.historyNames = JSON.parse(this.companyInfo.historyNames)
      }
    },
    //获取认领状态
    async getClaimStatus(){
      this.ifClaim = false
    },
    handleWidth(){
      this.showMore = this.$refs.companyQybj.scrollWidth - this.$refs.companyQybj.clientWidth
    },
    handleDetail(){
      this.showState = !this.showState
    },
    jumpToLt(item){
      this.$router.push({ path: '/party/structure', query: {eid:this.companyInfo.eid, typeId:item.id} })
    },
    //swiper项点击
    handleGraph(item,it){
      switch (item.id) {
        case 4:
          console.log('jump')
          break
        case 5:
          this.jumpToLt(item)
          break
        case 6:
          this.jumpToLt(item)
          break
        case 7:
          console.log('jump')
          break
      }
    },
    //swiper子项点击
    handleGraphChild(item, it){
      if(it.id==101 && it.val){
        console.log('jump')
      }
      if(it.id==102 && it.val){
        console.log('jump')
      }
      if(it.id==201 && it.val){
        console.log('jump')
      }
      if(it.id==202 && it.val){
        console.log('jump')
      }
      if(it.id==301 && it.val){
        console.log('jump')
      }
      if(it.id==302 && it.val){
        console.log('jump')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .info-container{
    margin: 0;
    padding: 24px 16px;
    background: #FFFFFF;
    border-radius: 4px;
    .company-swiper{
      position: relative;
      .swiper-info{
        width: calc(100% - 38px);
        height: 56px;
        margin-top: 13px;
        margin-left: 25px;
        overflow: hidden;
        .swiper-slide{
          &.swiper-disn{
            display: none;
          }
          >div{
            min-width: 242px;
            height: 100%;
            padding: 7px 4px 9px 0;
            cursor: pointer;
            align-items: normal;
            .swiper-item{
              .swiper-name{
                display: block;
                font-size: 14px;
                color: #232323;
              }
              div{
                display: inline-block;
                font-size: 12px;
                padding-top: 3px;
                span{
                  color: #232323;
                }
                i{
                  font-style: normal;
                  color: #0081FF;
                  &.num{
                    margin-right: 8px;
                  }
                }
              }
            }
            .swiper-img{
              width: 40px;
              height: 40px;
              margin-right: 6px;
            }
          }
        }
      }
      .swiper-info-prev, .swiper-info-next{
        width: 16px;
        height: 40px;
        background: #F0F5FC;
        top: 8px;
        margin-top: 0;
        &.swiper-button-disabled{
          opacity: 1;
          color:#AAAAAA;
          background: #F5F5F5;
        }
        i{
          color: #AAAAAA;
        }
        &:hover i{
          color:#667199;
        }
        &:after{
          content: "";
        }
      }
    }
    .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: #ECF6E7;
              color: #54BC7E;
            }
            .label-bg2{
              background: #DFEAFE;
              color: #0065F9;
            }
            .label-bg3{
              background: #fbf2f1;
              color: #fa5640;
            }
          }
        }
      }
      .company-menu{
        position: absolute;
        right: 0;
        top: 0;
        font-size: 14px;
        .claim{
          border: 1px solid #0081FF;
          border-radius: 2px;
          color:#0081FF;
          background: #FFFFFF;
          .el-ico-claim{
            background: url("~@/assets/images/detail/overview/company_rl.png") no-repeat;
            background-size: 16px 16px;
          }
        }
        .claim:hover{
          border: 1px solid #006AD1;
          border-radius: 2px;
          color:#006AD1;
          background: #FFFFFF;
          .el-ico-claim{
            background: url("~@/assets/images/detail/overview/company_hrl.png") no-repeat;
            background-size: 16px 16px;
          }
        }
        .hasClaim{
          border: 1px solid rgba(0,129,255,0.5);
          border-radius: 2px;
          color:rgba(0,129,255,0.5);
          background: #FFFFFF;
          .el-ico-claim{
            background: url("~@/assets/images/detail/overview/company_yrl.png") no-repeat;
            background-size: 16px 16px;
          }
        }
        button {
          padding: 6px 11px;
          position: relative;
          i{
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-bottom: -2px;
          }
        }
      }
      .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: 210px;
            }
            &:nth-child(2){
              width: 250px;
            }
            &.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;
            }
            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;
    }
    .highTech-item{
      padding: 10px 12px 0;
      font-size: 12px;
      color: #333333;
      .enterpriseLabel-children-span{
        display: inline-block;
        padding-right: 8px;
        margin-right: 8px;
        margin-bottom: 8px;
        border-right: 1px solid #E1E1E1;
        //cursor:pointer;
      }
      .enterpriseLabel-children-span:last-child{
        padding-right: 0;
        margin-right: 0;
        border-right: 0;
      }
    }
    .ml-4{
      margin-left: 4px;
    }
  }
</style>
