<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 v-if="ifClaim==1" class="hasClaim"><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="flex-box item"><label>法定代表人：</label><span class="text-cl1">{{companyInfo.corporatePerson || ''}}</span></div>
          <div class="flex-box item"><label>注册资本：</label><span class="text-cl1">{{companyInfo.regCapital || '--'}}</span></div>
          <div class="flex-box item"><label>统一社会信用代码：</label><span class="text-cl1">{{companyInfo.creditCode || ''}}</span></div>
        </div>
        <div class="info-item flex-box">
          <div class="flex-box item"><label>成立日期：</label><span class="text-cl1">{{companyInfo.registeredDate || '--'}}</span></div>
          <div class="flex-box item"><label>类型：</label><span class="text-cl1">{{companyInfo.econKind || '--'}}</span></div>
          <div class="flex-box item"><label>注册地址：</label><span class="text-cl1">{{companyInfo.addressDetail || '--'}}</span></div>
<!--          <div class="item"><label>企业邮箱：</label><span>{{companyInfo.regCapital || '&#45;&#45;'}}</span></div>-->
        </div>
        <div class="info-item flex-box">
<!--          <div class="item"><label>官网：</label><span>{{companyInfo.regCapital || '&#45;&#45;'}}</span></div>-->
          <div class="flex-box item item-line"><label>通信地址：</label><span class="text-cl1">{{companyInfo.addressDetail || '--'}}</span></div>
        </div>
        <div class="info-item flex-box" >
          <div class="flex-box item 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>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      :modal="false"
      custom-class='dialog-renlin'
      :show-close="false"
      width="244px">
      <span>认领成功，是否完善客户信息？</span>
      <div slot="footer" class="dialog-footer">
        <span class="dialog-footer-btn1" type="primary" @click="renlin()">立即完善</span>
        <span class="dialog-footer-btn2" @click="renHide()">稍后</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { changePath } from '@/assets/js/common'
var Swiper = require('@/assets/lib/swiper/swiper-bundle.min.js')
import "@/assets/lib/swiper/swiper-bundle.css"
import { claim } from "@/api/common"
export default {
  name: 'Infoheader',
  props: ['companyId', 'companyInfo', 'statistic'],
  data() {
    return {
      newStatic: null,
      labelList: [], //企业标签
      claimLoading: false,
      ifClaim: 0, //是否认领
      showMore: false,
      showState: false,
      graphList: [
        {id: 1, name:'业务往来', isShow:true, intro:[{id: 101, name:'客户', val:0, category:'global', field:'customer'},{id: 102, name:'供应商', val:0, category:'global', field:'supplier'}], ico:require('@/assets/images/detail/overview/company_ywwl.png')},
        {id: 2, name:'商机线索', isShow:true, intro:[{id: 201, name:'专项债项目', val:0, category:'xxx', field:'yy'},{id: 202, name:'招标计划', val:0, category:'xxx', field:'zz'}], ico:require('@/assets/images/detail/overview/company_sjxs.png')},
        {id: 3, name:'城投拿地', isShow:true, intro:[{id: 301, name:'土地交易', val:0, category:'global', field:'landInfo'},{id: 302, name:'行政许可', val:0, category:'business', field:'adminLicensing'}], ico:require('@/assets/images/detail/overview/company_ctnd.png')},
        {id: 4, name:'对外投资', isShow:true, intro:[{id: 401, name:'企业经营实力展现'}], ico:require('@/assets/images/detail/overview/company_dwtz.png')},
        {id: 5, name:'股权穿透', isShow:true, intro:[{id: 501, name:'瞬息掌握企业关系'}], ico:require('@/assets/images/detail/overview/company_gqct.png')},
        {id: 6, name:'企业架构', isShow:true, intro:[{id: 601, name:'企业架构关联图'}], ico:require('@/assets/images/detail/overview/company_qyjg.png')},
        {id: 7, name:'工商信息', isShow:true, intro:[{id: 701, name:'企业基础工商登记信息'}], ico:require('@/assets/images/detail/overview/company_gsxx.png')}
      ],  //企业链图
      //风险扫描
      labelArr:['失信联合惩戒企业','司法纠纷','注销'], //负向经营状态
      enterpriseLabel:[],//企业标签
      dialogVisible: false
    }
  },
  created() {
  },
  mounted() {
    this.getClaimStatus() //获取企业认领状态
    this.handleWidth()  //企业背景是否收起
    this.companySwiper()  //swiper滚动板块
  },
  methods: {
    //认领
    async handleClaim(){
      if(this.companyInfo.uipId){
        this.claimLoading = true
        let param = {companyId:this.companyId, uipId:this.companyInfo.uipId, companyName:this.companyInfo.companyName}
        let res = await claim(param)
        this.claimLoading = false
        if(res.code==200){
          this.dialogVisible=true
          this.ifClaim = 1
        }
      }else{
        this.$message.warning('对不起，当前不能认领')
      }
    },
    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)
      }
    },
    handleStatistic() {
      this.graphList.forEach((item, index) => {
        let number = null
        if(item.intro){
          item.intro.forEach((it, idx) => {
            if(it.category || it.field){
              it.val = this.statistic[it.category]?this.statistic[it.category][it.field]:0
              number +=it.val
            }
          })
        }
        if(number===0){
          item.isShow = false
        }
      })
      this.graphList = this.graphList.filter(item => item.isShow)
      this.companySwiper()  //swiper滚动板块
    },
    //获取认领状态
    getClaimStatus(){
      this.ifClaim = this.companyInfo.claimStatus
    },
    handleWidth(){
      if(this.companyInfo.introduction){
        this.$nextTick(() => {
          this.showMore = this.$refs.companyQybj.scrollWidth - this.$refs.companyQybj.clientWidth
        })
      }
    },
    handleDetail(){
      this.showState = !this.showState
    },
    jumpToLt(item){
      this.$router.push({ path: '/structure/graph', query: {eid:this.companyInfo.eid, typeId:item.id} })
    },
    //swiper项点击
    handleGraph(item,it){
      switch (item.id) {
        case 4:
          changePath(this, 'overseas')
          break
        case 5:
          this.jumpToLt(item)
          break
        case 6:
          this.jumpToLt(item)
          break
        case 7:
          changePath(this, 'businfo')
          break
      }
    },
    //swiper子项点击
    handleGraphChild(item, it){
      if(it.id==101 && it.val){
        changePath(this, 'custom')
      }
      if(it.id==102 && it.val){
        changePath(this, 'supplier')
      }
      if(it.id==201 && it.val){
        changePath(this, 'bond')
      }
      if(it.id==202 && it.val){
        changePath(this, 'biddingplan')
      }
      if(it.id==301 && it.val){
        changePath(this, 'landtransaction')
      }
      if(it.id==302 && it.val){
        changePath(this, 'administrative')
      }
    },
    renlin(){
      this.dialogVisible=false;
      // this.$router.push({path:'/home',query: {id:'1'}})
      // 跳转地址
    },
    renHide(){
      this.dialogVisible=false;
    }
  },
  watch: {
    companyInfo(newVal, oldVal) {
      this.getCompanyInfo() //处理曾用名
      this.handleWidth()
    },
    statistic(newVal, oldVal) {
      this.handleStatistic()
    }
  }
}
</script>

<style lang="scss" scoped>
  .info-container{
    margin: 0;
    padding: 24px 16px 10px 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: 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;
            }
            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;
    }
  }
  ::v-deep  .dialog-renlin{
    margin-top:40vh !important;
    .el-dialog__body{
      padding: 0;
      text-align: center;
      padding-bottom: 24px;
    }
    .el-dialog__footer{
      padding: 0px;
      padding-bottom: 24px;
      .dialog-footer{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        .dialog-footer-btn1{
          cursor: pointer;
          width: 72px;
          height: 28px;
          background: #0081FF;
          border-radius: 2px 2px 2px 2px;
          font-size: 12px;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 28px;
          text-align: center;
          margin-right: 8px;
        }
        .dialog-footer-btn2{
          cursor: pointer;
          width: 72px;
          height: 28px;
          border-radius: 2px 2px 2px 2px;
          border: 1px solid #CCCCCC;
          line-height: 28px;
          text-align: center;
          font-size: 12px;
          font-weight: 400;
          color: rgba(35,35,35,0.8);
        }
      }
    }
  }
</style>
