<template>
  <div class="companyinformation" ref="companyinformation">
    <div
      class="companyinformationLoading"
      v-if="loading"
      v-loading="true"
    ></div>
    <div class="companyinformation-header">
      <div class="companyinformation-header-main">
        <img
          src="@/assets/imgs/logo2.png"
          alt=""
          @click="$router.push('/home')"
        />
        <div class="autocomplete">
          <el-autocomplete
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入公司名称"
            @select="handleSelect"
            clearable
            :debounce="500"
            prefix-icon="el-icon-search"
          ></el-autocomplete>
          <el-button @click="search">分析</el-button>
        </div>
      </div>
    </div>
    <div class="companyinformation-container">
      <div class="companyinformation-container-main">
        <div class="companyinformation-container-main-top">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ stateName }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="companyinformation-container-main-info">
          <div class="company-img-po">
            <img src="@/assets/imgs/company/companyinfo.png" alt="" />
          </div>
          <div class="companyinfo-left">
            <div class="companyImg">
              <img src="@/assets/imgs/company/companyicon.png" alt="" />
            </div>
            <div class="zhexian">
              <img src="@/assets/imgs/company/zhexiantu.png" alt="" />
              <span>浏览量：{{ browseVolume }}</span>
            </div>
          </div>
          <!--  -->
          <div class="companyinfo-right">
            <div class="companyinfo-right-top">
              <h1>{{ stateName }}</h1>
              <div class="companyinfo-right-top-type">
                <span v-for="(item, index) in companynamequery" :key="index">{{
                  item.name
                }}</span>
              </div>
            </div>
            <div class="companyinfo-right-info">
              <div class="companyinfo-right-info-item">
                法人代表：{{
                  companyInfo.legalRepresentative
                    ? companyInfo.legalRepresentative
                    : "---"
                }}
              </div>
              <div class="companyinfo-right-info-item">
                注册资本：{{
                  companyInfo.registeredCapital
                    ? companyInfo.registeredCapital
                    : "---"
                }}
              </div>
              <div class="companyinfo-right-info-item">
                营业期限：{{
                  companyInfo.businessTerm ? companyInfo.businessTerm : "---"
                }}
              </div>
              <div class="companyinfo-right-info-item">
                统一社会信用代码：{{
                  companyInfo.creditCode ? companyInfo.creditCode : "---"
                }}
              </div>
              <div class="companyinfo-right-info-item">
                企业地址：{{
                  companyInfo.businessAddress
                    ? companyInfo.businessAddress
                    : "---"
                }}
              </div>
              <div class="companyinfo-right-info-item">
                公司类型：{{
                  companyInfo.company_org_type
                    ? companyInfo.company_org_type
                    : "---"
                }}
              </div>
              <div class="moreinfo" @click="showDialog">
                更多信息
              </div>
            </div>
          </div>
          <!-- <div class="download">
            <img src="@/assets/imgs/company/download.png" alt="" />下载报告
          </div> -->
        </div>
        <div class="companyinformation-container-main-certificateinfo">
          <div class="main-certificateinfo-left">
            <div class="companycertificateinfo">
              <transition name="el-zoom-in-center">
                <div v-show="show == 0">
                  <h3><b></b> 企业证照信息</h3>
                  <table>
                    <thead>
                      <tr>
                        <td>特种资质</td>
                        <td>知产证照</td>
                        <td>网络文化许可证</td>
                        <td>食品许可证</td>
                        <td>互联网经营许可证</td>
                      </tr>
                    </thead>
                    <tbody class="companycertificateinfo-tbody">
                      <tr>
                        <!-- 特种资质 -->
                        <td>
                          <el-button :disabled="!gxCount" @click="showTable(6)"
                            >高新企业认证{{
                              gxCount ? `（${gxCount}）` : "（0）"
                            }}</el-button
                          >
                          <el-button disabled>人力资源许可证（0）</el-button>
                          <el-button disabled>400电话认证（0）</el-button>
                          <el-button disabled>ISO质量体系认证（0）</el-button>
                        </td>
                        <!-- 知产证照 -->
                        <td>
                          <el-button :disabled="!paCount" @click="showTable(2)">
                            专利证书 {{ paCount ? `（${paCount}）` : "（0）" }}
                          </el-button>
                          <el-button
                            :disabled="!worksCount"
                            @click="showTable(3)"
                          >
                            著作权 {{ worksCount ? `（${worksCount}）` : "（0）" }}
                          </el-button>
                          <el-button
                            :disabled="!softwareCount"
                            @click="showTable(4)"
                          >
                            软件著作权
                            {{ softwareCount ? `（${softwareCount}）` : "（0）" }}
                          </el-button>
                          <el-button :disabled="!ipCount" @click="showTable(5)">
                            域名信息
                            {{ ipCount ? `（${ipCount}）` : "（0）" }}</el-button
                          >
                          <el-button
                            :disabled="!shangbiaoCount"
                            @click="showTable(1)"
                            >商标注册证
                            {{
                              shangbiaoCount ? `（${shangbiaoCount}）` : "（0）"
                            }}</el-button
                          >
                        </td>
                        <!-- 网络文化 -->
                        <td>
                          <el-button disabled
                            >网络文化经营许可证（0）</el-button
                          >
                          <el-button disabled>网络游戏出版备案（0）</el-button>
                          <el-button disabled>网络游戏运营备案（0）</el-button>
                          <el-button disabled
                            >广播电视节目制作经营许可证（0）</el-button
                          >
                        </td>
                        <!-- 食品 -->
                        <td>
                          <el-button disabled
                            >食品生产许可证(QS)（0）</el-button
                          >
                          <el-button disabled
                            >食品生产许可证(SC)（0）</el-button
                          >
                          <el-button disabled
                            >食品添加剂生产许可证（0）</el-button
                          >
                          <el-button disabled>食品经营许可证（0）</el-button>
                          <el-button disabled>食品流通许可证（0）</el-button>
                          <el-button disabled>条码证（0）</el-button>
                        </td>
                        <!-- 互联网经营 -->
                        <td>
                          <el-button disabled>EDI（0）</el-button>
                          <el-button disabled>ICP（0）</el-button>
                          <el-button disabled>IDC（0）</el-button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </transition>
              <!-- 需要翻转的表格组件 -->
              <transition name="el-zoom-in-center">
                <Trademark
                  v-show="show == 1"
                  @unshowOne="unshow"
                  @getCount="countGong"
                  :name="$route.query.name"
                />
              </transition>
              <transition name="el-zoom-in-center">
                <PatentCertificate
                  v-show="show == 2"
                  @unshowOne="unshow"
                  :name="$route.query.name"
                />
              </transition>
              <transition name="el-zoom-in-center">
                <Copyright
                  v-show="show == 3"
                  @unshowOne="unshow"
                  :name="$route.query.name"
                />
              </transition>
              <transition name="el-zoom-in-center">
                <SoftwareCopyright
                  v-show="show == 4"
                  @unshowOne="unshow"
                  :name="$route.query.name"
                />
              </transition>
              <transition name="el-zoom-in-center">
                <DomainNameInfo
                  v-show="show == 5"
                  @unshowOne="unshow"
                  :name="$route.query.name"
                />
              </transition>
              <transition name="el-zoom-in-center">
                <Gxbyauthor
                  v-show="show == 6"
                  @unshowOne="unshow"
                  :name="$route.query.name"
                />
              </transition>
              <!--  -->
            </div>
            <div class="companycertificateinfo" ref="qiye">
              <h3><b></b> 子公司或分支机构</h3>
              <div
                v-if="QccBranches.length != 0 && getcountAllList.length != 0"
              >
                <table v-for="(item, index) in getcountAllList" :key="index">
                  <thead>
                    <tr>
                      <td colspan="5" style="textAlign:left;paddingLeft:20px;">
                        <span
                          class="tdSpan"
                          style="cursor: pointer;"
                          @click="gotoMine(item.name)"
                          >{{ item.name }}</span
                        >
                      </td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td
                        v-for="(val, key, index) in getcountAllList[index].obj
                          .data"
                        :key="index"
                      >
                        {{ key }}{{ `（${val}）` }}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="notZi" v-if="QccBranches.length == 0">
                <img src="@/assets/imgs/wushuju.png" alt />
                暂无信息
              </div>
              <div class="lookgengduo" v-if="QccBranches.length != 0">
                <span @click="lookGenList">{{ lookGen }}</span>
              </div>
            </div>
          </div>
          <div class="main-certificateinfo-right">
            <h1>
              <img src="@/assets/imgs/company/tuijian.png" alt="" /> 推荐证照
            </h1>
            <div
              class="zhengzhaoimg"
              v-for="(item, index) in licenses"
              :key="index"
            >
              <img
                src="@/assets/imgs/zhengshu/1.png"
                alt=""
                v-if="item == '食品经营许可证'"
              />
              <img
                src="@/assets/imgs/zhengshu/2.png"
                alt=""
                v-if="item == '食品流通许可证'"
              />
              <img
                src="@/assets/imgs/zhengshu/3.png"
                alt=""
                v-if="item == '条码证'"
              />
              <img
                src="@/assets/imgs/zhengshu/食品添加.png"
                alt=""
                v-if="item == '食品添加剂生产许可证'"
              />
              <img
                src="@/assets/imgs/zhengshu/QS.png"
                alt=""
                v-if="item == '食品生产许可证(QS)'"
              />
              <img
                src="@/assets/imgs/zhengshu/sc.png"
                alt=""
                v-if="item == '食品生产许可证(SC)'"
              />
              <img
                src="@/assets/imgs/zhengshu/4.png"
                alt=""
                v-if="item == '软件著作权'"
              />
              <img
                src="@/assets/imgs/zhengshu/4.png"
                alt=""
                v-if="item == '作品著作权'"
              />
              <img
                src="@/assets/imgs/zhengshu/6.png"
                alt=""
                v-if="item == '商标注册'"
              />
              <img
                src="@/assets/imgs/zhengshu/5.png"
                alt=""
                v-if="item == '专利'"
              />
              <img
                src="@/assets/imgs/zhengshu/7.png"
                alt=""
                v-if="item == '网络文化经营许可证'"
              />
              <img
                src="@/assets/imgs/zhengshu/10.png"
                alt=""
                v-if="item == '网络游戏出版备案'"
              />
              <img
                src="@/assets/imgs/zhengshu/8.png"
                alt=""
                v-if="item == '网络游戏运营备案'"
              />
              <img
                src="@/assets/imgs/zhengshu/9.png"
                alt=""
                v-if="item == '广播电视节目制作经营许可证'"
              />
              <img
                src="@/assets/imgs/zhengshu/11.png"
                alt=""
                v-if="item == '高新企业认证'"
              />
              <img
                src="@/assets/imgs/zhengshu/12.png"
                alt=""
                v-if="item == '人力资源许可证'"
              />
              <img
                src="@/assets/imgs/zhengshu/13.png"
                alt=""
                v-if="item == '400电话认证'"
              />
              <img
                src="@/assets/imgs/zhengshu/14.png"
                alt=""
                v-if="item == 'ISO质量体系认证'"
              />
              <img
                src="@/assets/imgs/zhengshu/EDI.png"
                alt=""
                v-if="item == 'EDI许可证'"
              />
              <img
                src="@/assets/imgs/zhengshu/ICP.png"
                alt=""
                v-if="item == 'ICP许可证'"
              />
              <img
                src="@/assets/imgs/zhengshu/IDC.png"
                alt=""
                v-if="item == 'IDC许可证'"
              />
              <p>立即办理</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <el-dialog title="企业信息" :visible.sync="outerVisible" width="1200px">
      <EnterpriseInfo
        :enterpriseName="$route.query.name"
        :companyInfo="companyInfo"
        :companynamequery="companynamequery"
      />
    </el-dialog>
  </div>
</template>

<script>
import EnterpriseInfo from "./enterpriseInfo";
//需要翻转的表格
import Trademark from "./trademark";
import PatentCertificate from "./patentCertificate";
import Copyright from "./copyright";
import SoftwareCopyright from "./softwareCopyright";
import DomainNameInfo from "./domainNameInfo";
import Gxbyauthor from "./gxbyAuthor";

//接口
import {
  getCompanyInfoByLikeName,
  // getEntregistryByCompanyName,
  getEntregistryByCompanyName2
} from "@/api/tmTools.js";

import {
  paCountByApplicantName,
  softwareCountByAuthor,
  worksCountByAuthor
} from "@/api/patentQuery.js";

// import { findTrademarkzcr } from "@/api/tmQuery.js";

import { getLicenses } from "@/api/licenseQuery.js";

import {
  ipCountByAuthor,
  licenseCountByAuthor,
  companyportraitCtl,
  companynamequery,
  gxCountByAuthor,
  getQccBranches,
  getcountAll
} from "@/api/enterpriseQuery.js";
//
export default {
  components: {
    EnterpriseInfo,
    Trademark,
    PatentCertificate,
    Copyright,
    SoftwareCopyright,
    DomainNameInfo,
    Gxbyauthor
  },
  data() {
    return {
      lookGen: "查看更多",
      //loading
      loading: false,
      //输入框内容
      state: "",
      stateName: "",
      //浏览量
      browseVolume: 0,
      //dialog弹窗
      outerVisible: false,
      //企业信息
      companyInfo: {
        name: null,
        legalRepresentative: null,
        managementState: null,
        registeredCapital: null,
        creditCode: null,
        registrID: null,
        organizationCode: null,
        companyType: null,
        registerOffice: null,
        businessAddress: null,
        scope: null,
        dateIssue: null,
        businessTerm: null,
        requestId: null
      },
      //企业画像数据
      companynamequery: [],
      show: 0,
      //专利证书数量
      paCount: 0,
      //软件注册权数量
      softwareCount: 0,
      //著作权数量
      worksCount: 0,
      //域名列表数量
      ipCount: 0,
      //专利证书数据
      trademarkList: [],
      //企业高新数量
      gxCount: 0,
      //企业的分支机构
      QccBranches: [],
      //企业分支数量
      getcountAllList: [],
      licenses: [],
      //商标注册证数量
      shangbiaoCount: 0
    };
  },
  mounted() {
    this.$refs.companyinformation.scrollTop = 0;
    //获取企业画像
    companyportraitCtl(this.$route.query.name).then(res => {
      if (res.data.status == 0) {
        companynamequery(res.data.data.rows[0]).then(res => {
          if (res.data.status == 0) {
            this.companynamequery = res.data.data.wordcloud.splice(0, 5);
            console.log(this.companynamequery);
          }
        });
      }
    });
    this.state = this.$route.query.name;
    this.stateName = this.$route.query.name;
    // getEntregistryByCompanyName(this.state).then(res => {
    //   this.companyInfo = res;
    //   console.log(res, "获取企业详情信息");
    //   this.getInfo(res.name);
    // });
    this.loading = true;
    getEntregistryByCompanyName2(this.state).then(res => {
      // if(res)
      this.companyInfo = res.data.data.list[0];
      console.log(res, "获取企业详情信息");
      this.getInfo(this.companyInfo.name);
    });
    let list = JSON.parse(window.localStorage.getItem("list"));
    if (!list) {
      window.localStorage.setItem("list", JSON.stringify([]));
    }
    list = JSON.parse(window.localStorage.getItem("list"));
    let index = list.findIndex(item => {
      return item.value == this.state;
    });
    if (index == -1) {
      this.browseVolume = this.randomBrowseVolume();
      list.push({
        value: this.$route.query.name,
        num: this.browseVolume
      });
      window.localStorage.setItem("list", JSON.stringify(list));
    } else {
      this.browseVolume = list[index].num;
    }
  },
  methods: {
    gotoMine(name) {
      console.log(name, "nananananananananana");
      this.$router.push({
        path: "/companyinformation",
        query: { name: name }
      });
      this.saveLocalStorage();
      window.location.reload();
    },
    countGong(num) {
      this.shangbiaoCount = num;
      this.loading = false;
    },
    randomBrowseVolume() {
      return (Math.random() * 400 + 100).toFixed(0);
    },
    lookGenList() {
      if (this.lookGen == "查看更多") {
        // console.log(this.$refs.qiye);
        this.$refs.qiye.style.maxHeight = "10000000px";
        this.$refs.qiye.style.height = "auto";
        this.lookGen = "收起";
      } else {
        // console.log(this.$refs.qiye);
        this.$refs.qiye.style.maxHeight = "1056px";
        this.lookGen = "查看更多";
      }
    },
    //
    getInfo(name) {
      let p1 = new Promise(resolve => {
        paCountByApplicantName(name).then(res => {
          console.log(res, "获取专利证书数量");
          this.paCount = res.data;
          resolve();
        });
      });
      let p2 = new Promise(resolve => {
        softwareCountByAuthor(name).then(res => {
          console.log(res, "获取软件著作权数量");
          this.softwareCount = res.data;
          resolve();
        });
      });
      let p3 = new Promise(resolve => {
        worksCountByAuthor(name).then(res => {
          console.log(res, "获取著作权数量");
          this.worksCount = res.data;
          resolve();
        });
      });
      // let p4 = new Promise(resolve => {
      //   findTrademarkzcr(name).then(res => {
      //     console.log(res, "获取商标注册证");
      //     resolve();
      //     if (res.status == 0) {
      //       let newArr = res.data.rows;
      //       this.trademarkList = newArr;
      //       this.shangbiaoCount = res.data.count;
      //     }
      //   });
      // });
      //推荐证照
      let p5 = new Promise(resolve => {
        getLicenses(name).then(res => {
          ////
          resolve();
          if (res.status == 0) {
            this.licenses = res.data.expert_recommend;
          }
          console.log(this.licenses, "获取推荐证照");
        });
      });
      //域名信息
      let p6 = new Promise(resolve => {
        ipCountByAuthor(name).then(res => {
          console.log(res, "获取域名信息数量");
          resolve();
          if (res.status == 0) {
            this.ipCount = res.data;
          }
        });
      });
      //
      let p7 = new Promise(resolve => {
        licenseCountByAuthor(name).then(res => {
          console.log(res, "获取企业证照信息数量");
          resolve();
        });
      });
      let p8 = new Promise(resolve => {
        gxCountByAuthor(name).then(res => {
          console.log(res, "获取企业高新信息数量");
          resolve();
          this.gxCount = res.data;
        });
      });
      let p9 = new Promise(resolve => {
        getQccBranches(name).then(res => {
          console.log(res, "获取企业的分支机构（从企查查获取）");
          resolve();
          if (res.status == 0 && res.data != null) {
            this.QccBranches = res.data;
            this.asyncQinqiu(this.QccBranches);
          }
        });
      });
      Promise.all([p1, p2, p3, p5, p6, p7, p8, p9])
        .then(() => {
          // if(this.shangbiaoCount){
          // this.loading = false;
          // }
        })
        .catch(() => {
          this.loading = false;
        });
      ///////////////////

      ///////////////////
    },
    async asyncQinqiu(list) {
      console.log(list.length);
      if (list.length != 0) {
        for (var i = 0; i < list.length - 1; i++) {
          console.log(123123);
          this.getcountAllList.push({
            obj: await this.getCountAllNum(list[i].Name),
            name: list[i].Name
          });
        }
      }
    },
    getCountAllNum(name) {
      return new Promise(resolve => {
        getcountAll(name).then(res => {
          // this.getcountAllList.push(res.data);
          console.log(this.getcountAllList, "asdasdasdasqweqweqeqwe");
          resolve(res);
        });
      });
    },
    //翻转表格
    showTable(index) {
      this.show = null;
      setTimeout(() => {
        this.show = index;
      }, 200);
    },
    unshow() {
      this.showTable(0);
    },
    //打开弹框
    showDialog() {
      this.outerVisible = true;
    },
    //查询公司详情
    search() {
      if (this.state) {
        this.$router.push({
          path: "/companyinformation",
          query: { name: this.state }
        });
        this.saveLocalStorage();
        window.location.reload();
      }
    },
    //将搜索过的内容存入localStorage
    saveLocalStorage() {
      let companyInfo = JSON.parse(window.localStorage.getItem("companyInfo"));
      if (companyInfo) {
        let index = companyInfo.findIndex(item => {
          return item.value == this.state;
        });
        if (index == -1) {
          companyInfo.unshift({ value: this.state });
          window.localStorage.setItem(
            "companyInfo",
            JSON.stringify(companyInfo)
          );
        }
      } else {
        let companyInfo1 = [];
        companyInfo1.unshift({ value: this.state });
        window.localStorage.setItem(
          "companyInfo",
          JSON.stringify(companyInfo1)
        );
      }
    },
    //模糊查询
    querySearchAsync(queryString, cb) {
      if (this.state == "") {
        //如果没有输入值，则从本地获取数据
        let companyInfo = JSON.parse(
          window.localStorage.getItem("companyInfo")
        );
        if (companyInfo) {
          cb(companyInfo);
        } else {
          cb([]);
        }
      } else {
        //请求企业近似商标数据
        getCompanyInfoByLikeName(this.state).then(res => {
          res.data.map(item => {
            item.value = item.domainEntName;
          });
          cb(res.data);
        });
      }
    },
    //点击下拉菜单选中项
    handleSelect(item) {
      console.log(item);
      if (this.state) {
        //存入本地
        this.saveLocalStorage();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.companyinformation {
  width: 100%;
  .companyinformationLoading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .companyinformation-header {
    width: 100%;
    height: 70px;
    background: #000033;
    .companyinformation-header-main {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      img {
        height: 30px;
        margin-right: 20px;
        cursor: pointer;
      }
      .autocomplete {
        width: 630px;
        height: 40px;
        display: flex;
        border-radius: 2px;
        overflow: hidden;
        input {
          border-radius: 0;
        }
        .el-autocomplete {
          background: #fff;
          flex: 1;
          .el-input {
            width: 100%;
            height: 100%;
            .el-input__inner {
              width: 100%;
              height: 100%;
              border-radius: 0;
            }
          }
        }
        .el-button {
          width: 80px;
          height: 40px;
          background: #ffffff;
          border-radius: 0px;
          border: 1px solid #dfe1e5;
          border-left: none;
          font-size: 15px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(20, 120, 240, 1);
          line-height: 22px;
          padding: 0;
        }
      }
    }
  }
}
.companyinformation-container {
  width: 100%;
  background: #f6f6f6;
  .companyinformation-container-main {
    width: 1200px;
    margin: 0 auto;
    padding: 0 0 30px 0;
  }
}
.companyinformation-container-main-top {
  padding: 15px 0;
}
.companyinformation-container-main-info {
  padding: 25px 20px;
  background: #fff;
  margin-bottom: 14px;
  border: 1px solid #eeeeee;
  display: flex;
  position: relative;
  .download {
    position: absolute;
    top: 25px;
    right: 20px;
    width: 90px;
    height: 28px;
    border-radius: 2px;
    border: 1px solid rgba(20, 120, 240, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(20, 120, 240, 1);
    line-height: 17px;
    cursor: pointer;
    img {
      height: 15px;
    }
  }
  .company-img-po {
    width: 38px;
    position: absolute;
    top: -2px;
    left: -34px;
    img {
      width: 100%;
    }
  }
  .companyinfo-left {
    width: 102px;
    margin-right: 35px;
    .companyImg {
      width: 102px;
      height: 102px;
      margin-bottom: 15px;
    }
    .zhexian {
      width: 102px;
      background: #f0f7fc;
      padding: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
      }
      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(108, 109, 109, 1);
        line-height: 17px;
        margin-top: 2px;
      }
    }
  }
  .companyinfo-right {
    flex: 1;
    .companyinfo-right-top {
      width: 100%;
      display: flex;
      margin-bottom: 17px;
      h1 {
        font-size: 22px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(18, 18, 18, 1);
        line-height: 30px;
        margin-right: 20px;
      }
      .companyinfo-right-top-type {
        padding: 5px 0 0;
        max-width: 690px;
        span {
          padding: 2px 10px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(240, 166, 124, 1);
          background: #fdf2ec;
          line-height: 17px;
          margin-right: 10px;
          display: inline-block;
          margin-bottom: 10px;
        }
      }
    }
    .companyinfo-right-info {
      padding: 20px 12px;
      background: #f6faff;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      .companyinfo-right-info-item {
        width: 33.33%;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(7, 7, 7, 1);
        line-height: 20px;
        margin-bottom: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .moreinfo {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(20, 120, 240, 1);
        line-height: 20px;
        cursor: pointer;
      }
    }
  }
}
.companyinformation-container-main-certificateinfo {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .main-certificateinfo-left {
    width: 936px;
    .companycertificateinfo:nth-child(1) {
      thead td:hover {
        background: #499bff;
        color: #fff;
      }
    }
    .companycertificateinfo:nth-child(2) {
      max-height: 1056px;
      overflow: hidden;
    }
    .companycertificateinfo {
      width: 100%;
      padding: 16px 16px 16px;
      background: #fff;
      margin-bottom: 15px;
      border: 1px solid rgba(238, 238, 238, 1);
      position: relative;
      .tdSpan:hover {
        color: #499bff;
      }
      h3 {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
        display: flex;
        align-items: center;
        margin-bottom: 17px;
        b {
          display: inline-block;
          width: 3px;
          height: 14px;
          background: rgba(20, 120, 240, 1);
          margin-right: 5px;
        }
      }
      .notZi {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 35px;
        margin-bottom: 40px;
        flex-direction: column;
        padding: 200px 0 0;
      }
      table {
        width: 100%;
        margin-bottom: 18px;
        thead {
          background: #f0f7fc;
          tr {
            td {
              height: 40px;
              text-align: center;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              line-height: 20px;
              width: 20%;
              border: 1px solid #e4eef6;
            }
          }
        }
        tbody {
          tr {
            td {
              padding: 10px 10px;
              height: 40px;
              text-align: center;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              line-height: 20px;
              width: 20%;
              border: 1px solid #e4eef6;
            }
          }
        }
        .companycertificateinfo-tbody {
          tr {
            td {
              span {
                display: block;
                cursor: pointer;
                margin-bottom: 10px;
              }
              span:hover {
                color: #1478f0;
              }
              .el-button {
                margin: 0 0 10px 0;
                width: 100%;
                padding: 0;
                border: none;
                text-align: left;
                display: block;
                cursor: pointer;
                margin-bottom: 15px;
              }
              .el-button:hover {
                background: #fff;
              }
            }
          }
        }
      }
      .lookgengduo {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 16px;
        position: absolute;
        bottom: -13px;
        left: 0;
        background: #fff;
        span {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(20, 120, 240, 1);
          line-height: 20px;
          cursor: pointer;
        }
      }
    }
  }
  .main-certificateinfo-right {
    width: 250px;
    h1 {
      width: 100%;
      height: 48px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(238, 238, 238, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      // line-height: 25px;
      margin-bottom: 14px;
      img {
        height: 17.8px;
        margin-right: 8px;
      }
    }
    .zhengzhaoimg {
      width: 100%;
      margin-bottom: 14px;
      position: relative;
      img {
        width: 100%;
      }
      p {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40px;
        background: rgba(0, 0, 0, 0.64);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 22px;
        cursor: pointer;
      }
    }
  }
}
.companyinformation {
  .el-dialog {
    box-shadow: 0px 0px 56px -1px rgba(11, 11, 11, 0.46);
    border-radius: 6px;
    .el-dialog__body {
      width: 100%;
      border-top: 1px solid #e6e6e6;
      padding: 30px;
    }
  }
}
</style>
