<template>
    <div class="app-container">
      <div class="header">
        <ul>
          <li @click="changeNav(0)" :class="{ active: activeIndex === 0 }">
            <div class="title">孵化器概况</div>
          </li>
          <li @click="changeNav(1)" :class="{ active: activeIndex === 1 }">
            <div class="title">在孵企业</div>
          </li>
          <li @click="changeNav(2)" :class="{ active: activeIndex === 2 }">
            <div class="title">毕业企业</div>
          </li>
          <li @click="changeNav(3)" :class="{ active: activeIndex === 3 }">
            <div class="title">中介机构</div>
          </li>
          <li @click="changeNav(4)" :class="{ active: activeIndex === 4 }">
            <div class="title">创业导师</div>
          </li>
        </ul>
      </div>
  
      <div class="bodyer">
        <ul class="panelsWrapper">
          <li class="overview tab_panel_0" v-if="activeIndex === 0">
            <h2>{{ data4panel0.incubatorName }}</h2>
            <div class="contentWrapper">
              <div class="left">
                <div class="item">
                  <div class="_title prefixDiv">
                    <span class="_left">总收入</span>
                    <span class="_right" @click="getMore4panel0">查看更多>></span>
                  </div>
                  <div class="body">
                    <div class="_left">
                      <ul>
                        <li>年度：{{ data4panel0.year }}年</li>
                        <li>孵化器总收入：{{ data4panel0.totalRevenue }}万元</li>
                        <li>
                          综合服务收入：{{ data4panel0.serviceRevenue }}万元
                        </li>
                        <li>物业费收入：{{ data4panel0.propertyRevenue }}万元</li>
                        <li>房租费收入：{{ data4panel0.rentRevenue }}万元</li>
                        <li>投资收入：{{ data4panel0.investmentRevenue }}万元</li>
                        <li>政策性收入：{{ data4panel0.policyRevenue }}万元</li>
                        <li>其他：{{ data4panel0.otherRevenue }}万元</li>
                      </ul>
                    </div>
                    <div class="_right">
                      <div
                        ref="pieChart4panel0_1"
                        style="width: 300px; height: 300px"
                        class="charts pie"
                      ></div>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="_title prefixDiv">
                    <span class="_left">使用面积</span>
                  </div>
                  <div class="body">
                    <div class="_left">
                      <ul>
                        <li>孵化器使用总面积：{{ data4panel0.totalArea }}㎡</li>
                        <li>
                          用于企业孵化的面积：{{ data4panel0.incubationArea }}㎡
                        </li>
                        <li>剩余孵化面积：{{ data4panel0.remainingArea }}㎡</li>
                      </ul>
                    </div>
                    <div class="_right">
                      <div
                        ref="pieChart4panel0_2"
                        style="width: 300px; height: 300px"
                        class="charts pie"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="right">
                <div class="item">
                  <div class="_title prefixDiv">
                    <span class="_left">简介</span>
                  </div>
                  <div class="body">
                    <div class="_top">
                      <ul>
                        <li>运营机构：{{ data4panel0.operatingAgency }}</li>
                        <li>联 系人：{{ data4panel0.contactPerson }}</li>
                        <li>联系电话：{{ data4panel0.contactPhone }}</li>
                      </ul>
                    </div>
                    <div class="_bottom">
                      <img
                        :src="`${baseAPI}file/${data4panel0.incubatorImage}`"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="tab_panel_1" v-if="activeIndex === 1||activeIndex === 2||activeIndex === 3">
            <div class="_left">
              <div class="_title">
                <span>{{ navCompanyTypeName }}</span>
                <span>{{ totalCount4panel1 }}家</span>
              </div>
              <div class="_list">
                <el-input
                  placeholder="请输入内容"
                  prefix-icon="el-icon-search"
                  v-model="searchQuery4panel1"
                  @blur="getData4panel1" 
                ></el-input>
  
                <ul>
                  <!-- tableData4panel1 -->
                  <li v-for="item1 in tableData4panel1" :key="item1.companyId" :class="{active: currentSelectedCompanyId===item1.companyId}" @click="changeCompany(item1.companyId)">
                    {{ item1.companyName }}
                  </li>
                </ul>
                <el-pagination
                  @current-change="handleCurrentChange4panel1"
                  @size-change="handleSizeChange4panel1"
                  :current-page="currentPage4panel1"
                  :page-size="pageSize4panel1"
                  :total="totalCount4panel1"
                  :page-sizes="[10, 20, 30, 40]"
                  layout="prev, pager, next, sizes"
                />
              </div>
            </div>
            <div class="_right">
              <h2>{{data4panel1.companyName}}</h2>
              <div class="divider"></div>
              <div class="_title prefixDiv">
                <div class="_left">企业基础信息</div>
                <div class="_right" @click="getMore4panel1">查看企业简介>></div>
              </div>
              <div class="_body">
                <ul>
                  <li class="prefixPoint">
                    入驻时间: {{ data4panel1.entryDate || '-' }}
                  </li>
                  <li class="prefixPoint">
                    法人: {{ data4panel1.legalPerson || '-' }}
                  </li>
                 <li class="prefixPoint">
                  联系人: {{ data4panel1.principal || '-' }}
                  </li>
                  <li class="prefixPoint">
                    联系电话: {{ data4panel1.contactPhone || '-' }}
                  </li>
                  <li class="prefixPoint">
                    企业类型: {{ data4panel1.companyTypeName  || '-'}}
                  </li>
                  <li class="prefixPoint">
                    主要负责人创业特征: {{ data4panel1.founderCharacteristicsName  || '-'}}
                  </li>
                  <li class="prefixPoint">
                    全职导师: {{ data4panel1.mentorName  || '-'}}
                  </li>
                  <li class="prefixPoint">
                    兼职导师: {{ data4panel1.parMentorName  || '-'}}
                  </li>
                  <li class="prefixPoint">
                    孵化状态: {{ data4panel1.incubationStatusName  || '-'}}
                  </li>
                  <li class="prefixPoint">
                    企业级别: {{ data4panel1.companyLevelName || '-' }}
                  </li>
                  <li class="prefixPoint">
                    所属技术领域: {{ data4panel1.technicalFieldName || '-' }}
                  </li>
                  <li class="prefixPoint">
                    是否体外孵化: {{ data4panel1.outsideIncubation? '是': '否' }}
                  </li>
                  <li class="prefixPoint">
                    占用孵化场地面积: {{ data4panel1.occupiedArea || '-' }}
                  </li>
                  <li class="prefixPoint">
                    累计获得融资总额: {{ data4panel1.totalFunding || '-' }}
                  </li>
                  <li class="prefixPoint">
                    注册资金: {{ data4panel1.registeredCapital || '-' }}
                  </li>
                  <li class="prefixPoint">
                    注册时间: {{ data4panel1.registerDate  || '-'}}
                  </li>
                  <li class="prefixPoint">
                    投资方名称: {{ data4panel1.investorsName  || '-'}}
                  </li>
                  <li class="prefixPoint">
                    投资地区: {{ data4panel1.investmentArea  || '-'}}
                  </li>
                  <li class="prefixPoint">
                    位置: {{ data4panel1.address  || '-'}}
                  </li>
                </ul>
              </div>
  
              <div class="_title prefixDiv">
                <div class="_left">知识产权</div>
              </div>
              <div class="_body">
                <ul>
                  <li class="prefixPoint">
                    发明专利数: {{ data4panel1.inventionPatentsNumber || '-'}}
                  </li>
                  <li class="prefixPoint">
                    实用新型数: {{ data4panel1.utilityModelsNumber || '-' }}
                  </li>
                  <li class="prefixPoint">
                    软件著作权数: {{ data4panel1.softwareCopyrightNumber || '-' }}
                  </li>
                  <li class="prefixPoint">
                    发明申请数: {{ data4panel1.inventionApplicationsNumber || '-' }}
                  </li>
                </ul>
              </div>
  
              <div class="_title prefixDiv">
                <div class="_left">创业创新企业情况</div>
              </div>
              <div class="_body">
                <ul>
                  <li v-for="(item, index) in data4panel1.entrepreneurshipInnovationEnterprises" class="prefixPoint" :key="index">
                    {{ item.name }}: {{ item.value }}
                  </li>
                </ul>
              </div>
  
              <div class="_title prefixDiv">
                <div class="_left">企业经营信息</div>
                <div class="_right" @click="getMore4panel1_2">查看更多>></div>
              </div>
              <div class="_body">
                <ul>
                  <li class="prefixPoint">
                    从业人员: {{ data4panel1.totalEmployees || '-' }}人
                  </li>
                  <li class="prefixPoint">
                    博士人数: {{ data4panel1.phdEmployees || '-' }}人
                  </li>
                  <li class="prefixPoint">
                    硕士人数: {{ data4panel1.masterEmployees || '-' }}人
                  </li>
                  <li class="prefixPoint">
                    本科人数: {{ data4panel1.undergraduateEmployees  || '-'}}人
                  </li>
                  <li class="prefixPoint">
                    留学人数: {{ data4panel1.overseasEmployees  || '-'}}人
                  </li>
                  <li class="prefixPoint">
                    净利润: {{ data4panel1.netProfit  || '-'}}万元
                  </li>
                  <li class="prefixPoint">
                    上缴税费: {{ data4panel1.taxesPaid || '-' }}万元
                  </li>
                  <li class="prefixPoint">
                    总收入: {{ data4panel1.grossIncome  || '-'}}万元
                  </li>
                  <li class="prefixPoint">
                    研发投入: {{ data4panel1.researchInput  || '-'}}万元
                  </li>
                  <li class="prefixPoint">
                    研发投入占比: {{ data4panel1.investmentProportion || '-' }}%
                  </li>
                </ul>
              </div>
  
              <!--  -->
              <div class="_title prefixDiv">
                <div class="_left">企业产品</div>
                <div class="_right" @click="getMore4panel1_3">查看更多>></div>
              </div>
              <div class="_body" style="padding-bottom:20px;">
                <div v-if="!data4panel1.companyProductList.length" style="display:flex;justify-content:center;align-items:center; font-size:14px;color:#686868;">暂无数据</div>
                <dl v-else>
                  <dd v-for="(item,index) in data4panel1.companyProductList" :key="index">
                    <img
                      :src="`${baseAPI}file/${item.image}`"
                      alt=""
                    />
                    <h3>{{ item.productName }}</h3>
                    <p v-html="item.description">
                      <!-- 内置NB-IoT物联网SIM卡，把数据传
                      输到晶合云平台或客户私有云平台， 实现数据 -->
                    </p>
                  </dd>
                </dl>
              </div>
            </div>
          </li>
          <li class="tab_panel_4" v-if="activeIndex === 4">
            <div class="_title">
              <span>创业导师</span>
              <el-input
                placeholder="请输入姓名搜索"
                prefix-icon="el-icon-search"
                v-model="searchQuery4panel4"
                style="width: 300px; margin-right: 10px;"
                @blur="filterData4panel4"
              ></el-input>
            </div>
            <ul>
              <li v-for="item in tableData4panel4" :key="item.id">
                <img
                    :src="`${baseAPI}file/${item.photo}`"
                    alt=""
                  />
                <p>姓名：{{ item.mentorName }}</p>
                <p>学历：{{ item.education }}</p>
                <p>毕业学校：{{ item.graduationSchool }}</p>
                <p>联系电话：{{ item.contactPhone }}</p>
                <a @click="getMore4panel4(item)">查看简介&gt;</a>
              </li>
            </ul>
            <el-pagination
              style="text-align: center; margin-top: 20px;"
              @current-change="handleCurrentChange4panel4"
              @size-change="handleSizeChange4panel4"
              :current-page="currentPage4panel4"
              :page-size="pageSize4panel4"
              :total="totalCount4panel4"
              :page-sizes="[10, 20, 30, 40]"
              layout="prev, pager, next, sizes"
            ></el-pagination>
          </li>
        </ul>
      </div>
  
      
      <el-dialog
        title="孵化器年度收入信息"
        :visible.sync="dialogVisible4panel0"
        width="1100px"
      >
          <el-input
        placeholder="请输入年度搜索"
        prefix-icon="el-icon-search"
        v-model="searchQuery4panel0"
        style="width: 300px;margin-bottom: 10px;"
        @blur="filterData4panel0"
      ></el-input>
        <el-table :data="tableData4panel0" style="width: 100%">
          <el-table-column
            prop="year"
            label="年度"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="totalRevenue"
            label="孵化器总收入（万元）"
          ></el-table-column>
          <el-table-column
            prop="serviceRevenue"
            label="综合服务收入（万元）"
          ></el-table-column>
          <el-table-column
            prop="rentRevenue"
            label="房租收入（万元）"
          ></el-table-column>
          <el-table-column
            prop="propertyRevenue"
            label="物业收入（万元）"
          ></el-table-column>
          <el-table-column
            prop="investmentRevenue"
            label="投资收入（万元）"
          ></el-table-column>
          <el-table-column
            prop="policyRevenue"
            label="政策性收入（万元）"
          ></el-table-column>
          <el-table-column
            prop="otherRevenue"
            label="其他收入（万元）"
          ></el-table-column>
        </el-table>
        
        <el-pagination
          @current-change="handleCurrentChange4panel0"
          @size-change="handleSizeChange4panel0"
          :current-page="currentPage4panel0"
          :page-size="pageSize4panel0"
          :total="totalCount4panel0"
          :page-sizes="[10, 20, 30, 40]"
          layout="prev, pager, next, sizes"
        ></el-pagination>
        
      </el-dialog>
  
      <el-dialog
        title="企业经营信息"
        :visible.sync="dialogVisible4panel1_2"
        width="1100px"
      >
          <el-input
        placeholder="请输入年度搜索"
        prefix-icon="el-icon-search"
        v-model="searchQuery4panel1_2"
        style="width: 300px;margin-bottom: 10px;"
        @blur="filterData4panel1_2"
      ></el-input>
        <el-table :data="tableData4panel1_2" style="width: 100%">
          <el-table-column
            prop="year"
            label="年度"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="totalEmployees"
            label="从业人数"
          ></el-table-column>
          <el-table-column
            prop="phdEmployees"
            label="博士从业人数"
          ></el-table-column>
          <el-table-column
            prop="overseasEmployees"
            label="留学人数"
          ></el-table-column>
          <el-table-column
            prop="netProfit"
            label="净利润(万元)"
          ></el-table-column>
          <el-table-column
            prop="taxesPaid"
            label="上缴税费(万元)"
          ></el-table-column>
          <el-table-column
            prop="researchInput"
            label="研发投入(万元)"
          ></el-table-column>
          <el-table-column
            prop="investmentProportion"
            label="研发投入占比"
          ></el-table-column>
          <el-table-column
            prop="grossIncome"
            label="总收入(万元)"
          ></el-table-column>
          
        </el-table>
        
        <el-pagination
          @current-change="handleCurrentChange4panel1_2"
          @size-change="handleSizeChange4panel1_2"
          :current-page="currentPage4panel1_2"
          :page-size="pageSize4panel1_2"
          :total="totalCount4panel1_2"
          :page-sizes="[10, 20, 30, 40]"
          layout="prev, pager, next, sizes"
        ></el-pagination>
        
      </el-dialog>
      <el-dialog
        title="企业产品信息"
        :visible.sync="dialogVisible4panel1_3"
        width="1100px"
      >
          <el-input
        placeholder="请输入产品名称"
        prefix-icon="el-icon-search"
        v-model="searchQuery4panel1_3"
        style="width: 300px;margin-bottom: 10px;"
        @blur="filterData4panel1_3"
      ></el-input>
        <el-table :data="tableData4panel1_3" style="width: 100%">
          <el-table-column
            prop="productName"
            label="产品名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="totalEmployees"
            label="图片"
            width="120"
            align="center"
          >
          <template slot-scope="scope">
            <img :src="`${baseAPI}file/${scope.row.image}`" alt="Image" style="width: 80px; height: auto;" />
          </template>
        </el-table-column>
          <el-table-column
            prop="description"
            label="简介"
            align="center"
          >
        </el-table-column>
        </el-table>
        
        <el-pagination
          @current-change="handleCurrentChange4panel1_3"
          @size-change="handleSizeChange4panel1_3"
          :current-page="currentPage4panel1_3"
          :page-size="pageSize4panel1_3"
          :total="totalCount4panel1_3"
          :page-sizes="[10, 20, 30, 40]"
          layout="prev, pager, next, sizes"
        ></el-pagination>
        
      </el-dialog>
      <!-- penel -->
      <el-dialog
      title="简介信息"
        :visible.sync="dialogVisible4panel4"
      >
        <div v-html="introduction4panel4"></div>
      </el-dialog>
      <el-dialog
      title="企业简介"
        :visible.sync="dialogVisible4panel1"
      >
        <div v-html="data4panel1.introduction"></div>
  
      </el-dialog>
    </div>
  </template>
      
      <script>
  var baseAPI =
    process.env.NODE_ENV === "development"
      ? process.env.VUE_APP_LOCAL_API + "/"
      : (VUE_APP_API.ServiceURL || process.env.VUE_APP_LOCAL_API) + "/";
  import overviewApi from "@/api/system/overview.js";
  import * as echarts from "echarts";
  
  export default {
    name: "Overview",
    components: {},
    data() {
      return {
        // 公共用
        baseAPI: baseAPI,
        incubatorId: "",
  
        // 顶部切换菜单
        activeIndex: 0,
        navCompanyTypeName: '',
  
        // panel0 孵化器概况
        data4panel0: {},
        totalCount4panel0: 0, // 总条目数
        currentPage4panel0: 0, // 当前页码
        pageSize4panel0: 10, // 每页显示的条目数量
        dialogVisible4panel0: false,
        searchQuery4panel0: '',
        tableData4panel0: [],
  
          // panel123 企业信息
          data4panel1: {
            companyProductList: []
          },
        totalCount4panel1: 0, // 总条目数
        currentPage4panel1: 0, // 当前页码
        pageSize4panel1: 10, // 每页显示的条目数量
        searchQuery4panel1: '',
        tableData4panel1: [],
  
       // panel_1 企业简介 弹窗
        dialogVisible4panel1: false,
        introduction4panel1: '',
  
       // panel_1 年度收入信息 弹窗
        currentPage4panel1_2: 0, // 当前页码
        pageSize4panel1_2: 10, // 每页显示的条目数量
        dialogVisible4panel1_2: false,
        searchQuery4panel1_2: '',
        tableData4panel1_2: [],
        totalCount4panel1_2: 0, // 总条目数
  
      // panel_1 产品信息 弹窗
        currentSelectedCompanyId: '',
        currentPage4panel1_3: 0, // 当前页码
        pageSize4panel1_3: 10, // 每页显示的条目数量
        dialogVisible4panel1_3: false,
        searchQuery4panel1_3: '',
        tableData4panel1_3: [],
        totalCount4panel1_3: 0,
  
        // panel4 创业导师
        totalCount4panel4: 0, // 总条目数
        currentPage4panel4: 0, // 当前页码
        pageSize4panel4: 10, // 每页显示的条目数量
        dialogVisible4panel4: false,
        searchQuery4panel4: '',
        tableData4panel4: [],
        introduction4panel4: '',
  
      };
    },
    computed: {},
    mounted() {
      this.incubatorId = this.$route.query.id || '';
      // this.getData4panel0();
      // this.getData4panel4();
      this.getData4panel0()
  
    },
    methods: {
      changeNav(index) {
        
        this.activeIndex = ~~index;
        if(index === 1){
          this.navCompanyTypeName = '在孵企业'
        }else if(index === 2){
          this.navCompanyTypeName = '毕业企业'
        }else if(index === 3){
          this.navCompanyTypeName = '中介机构'
        }




        if(~~this.activeIndex === 1 || ~~this.activeIndex === 2 || ~~this.activeIndex === 3){
          this.searchQuery4panel1 = '' // 清空公司搜索框
          // 重置分页条件查询信息
          this.totalCount4panel1 = 0 // 总条目数
          this.currentPage4panel1 = 0 // 当前页码
          this.pageSize4panel1 = 10 // 每页显示的条目数量

          this.getData4panel1()
        }else if(~~this.activeIndex === 0){
          this.totalCount4panel0 = 0 // 总条目数
          this.currentPage4panel0 = 0 // 当前页码
          this.pageSize4panel0 = 10 // 每页显示的条目数量
          this.getData4panel0()
        }else if(~~this.activeIndex === 4){
           // 重置分页条件查询信息
           this.totalCount4panel4 = 0 // 总条目数
          this.currentPage4panel4 = 0 // 当前页码
          this.pageSize4panel4 = 10 // 每页显示的条目数量
          this.getData4panel4()
        }
        
      },
      /**
       * getData4enterprise
       * panel 1,2,3 企业信息
       */
       
       filterData4panel1() {
        this.currentPage4panel1 = 1; // 重置当前分页
        this.getData4panel1();
      },
      getMore4panel1(item){
       this.dialogVisible4panel1 = true
       this.introduction4panel1 = item.introduction
      },
  
      handleCurrentChange4panel1(newPage) {
        // 切换分页
        this.currentPage4panel1 = newPage;
        this.getData4panel1()
        
      },
      handleSizeChange4panel1(newSize){
        this.pageSize4panel1 = newSize;
        this.getData4panel1()
      },
      getData4panel1() { // 获取panel2，3，4企业列表
        let companyType = ''
        if(~~this.activeIndex === 1){
          companyType = '1'
        }else if(~~this.activeIndex === 2){
          companyType = '2'
        }else if(~~this.activeIndex === 3){
          companyType = '3'
        }
        overviewApi
          .getData4enterprise({
            // 之所以减一操作时因为后台page从0开始，而组件分页时1开始。
            page: this.currentPage4panel1 > 0 ? this.currentPage4panel1-1 : this.currentPage4panel1,
            size: this.pageSize4panel1,
              incubatorId: this.incubatorId,
            companyType,
            vague: {"companyName": this.searchQuery4panel1}
          })
          .then((res) => {
            this.tableData4panel1 = res.body.records || [];
            this.totalCount4panel1 = res.body.total
            if(this.tableData4panel1.length){
              this.getData4panel1_1(this.tableData4panel1[0].companyId)
              this.currentSelectedCompanyId = this.tableData4panel1[0].companyId
            }else{ // 公司列表为空的时候, 数据为空.
              this.getData4panel1_1('')
              this.currentSelectedCompanyId = ''
            }
          });
      },
      getData4panel1_1(companyId) { // 获取panel2，3，4企业详情
        overviewApi
          .getData4enterpriseDetail({
            companyId: companyId+''
          })
          .then((res) => {
            this.data4panel1 = res.body || { companyProductList: [] };
          });
      },
      changeCompany(companyId){
        this.currentSelectedCompanyId = companyId
        this.getData4panel1_1(companyId)
      },
  
      getMore4panel1(){// 获取企业简介
        this.dialogVisible4panel1 = true
      },
      filterData4panel1_2() {
        this.currentPage4panel1_2 = 1; // 重置当前分页
        this.getDialogData4panel1_2();
      },
      getMore4panel1_2(){ // 获取更多年度收入信息
        this.dialogVisible4panel1_2 = true
        this.getDialogData4panel1_2()
      },
      getDialogData4panel1_2(fn) { // 获取panel1 经营信息 弹窗列表信息
        overviewApi
          .getDialogData4panel1_2({
            page: this.currentPage4panel1_2 > 0 ? this.currentPage4panel1_2-1 : this.currentPage4panel1_2,
            size: this.pageSize4panel1_2,
            exact:{
              companyId: this.currentSelectedCompanyId,
            },
            vague:{
              year: this.searchQuery4panel1_2
            }
          })
          .then((res) => {
            this.tableData4panel1_2 = res.body.list || [];
          });
      },
      handleCurrentChange4panel1_2(newPage) {
        // 切换分页
        this.currentPage4panel1_2 = newPage;
        // 这里可以添加代码来加载新页的数据
        console.log(`当前页: ${newPage}`);
        this.getDialogData4panel1_2()
        
      },
      handleSizeChange4panel1_2(newSize){
        this.pageSize4panel1_2 = newSize;
        this.getDialogData4panel1_2()
      },
      getMore4panel1_3(){ // 获取更多产品信息
        this.dialogVisible4panel1_3 = true
        this.getDialogData4panel1_3()
      },
      getDialogData4panel1_3() { // 获取panel1 产品弹窗列表信息
        overviewApi
          .getDialogData4panel1_3({
            page: this.currentPage4panel1_3 > 0 ? this.currentPage4panel1_3-1 : this.currentPage4panel1_3,
            size: this.pageSize4panel1_3,
            exact:{
              companyId: this.currentSelectedCompanyId,
            },
            vague: {"productName": this.searchQuery4panel1_3}
          })
          .then((res) => {
            this.tableData4panel1_3 = res.body.list || [];
            this.totalCount4panel1_3 = res.body.total
          });
      },
      filterData4panel1_3() {
        this.currentPage4panel1_3 = 1; // 重置当前分页
        this.getDialogData4panel1_3();
      },
      handleCurrentChange4panel1_3(newPage) {
        // 切换分页
        this.currentPage4panel1_3 = newPage;
        // 这里可以添加代码来加载新页的数据
        console.log(`当前页: ${newPage}`);
        this.getDialogData4panel1_3()
        
      },
      handleSizeChange4panel1_3(newSize){
        this.pageSize4panel1_3 = newSize;
        this.getDialogData4panel1_3()
      },
   
      /**
       * panel0
       */
      filterData4panel0() {
        this.currentPage4panel0 = 1; // 重置当前分页
        this.getDialogData4panel0();
      },
      getMore4panel0(){
        this.dialogVisible4panel0 = true
        this.getDialogData4panel0()
      },
  
      handleCurrentChange4panel0(newPage) {
        // 切换分页
        this.currentPage4panel0 = newPage;
        // 这里可以添加代码来加载新页的数据
        console.log(`当前页: ${newPage}`);
        this.getDialogData4panel0()
        
      },
      handleSizeChange4panel0(newSize){
        this.pageSize4panel0 = newSize;
        this.getDialogData4panel0()
      },
      initChart4panel0_1() {
        const chartDom = this.$refs.pieChart4panel0_1;
        const myChart = echarts.init(chartDom);
        const colorArr = ['#5c7bd9', '#3ba172', '#73c0de', '#ee6666', '#f7c557', '#91cc75', '#5470c6', '#3e75e5']
        const chartsData = this.data4panel0.revenueChartData.map((item,index)=>{
          item.itemStyle= {color: colorArr[index]}
          return item
        })
        const option = {
          tooltip: {
            trigger: "item",
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: "30%",
              // radius: ['40%', '60%'], // 设置内外半径，使饼图小一些
              data: chartsData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
  
        myChart.setOption(option);
      },
      initChart4panel0_2() {
        const chartDom = this.$refs.pieChart4panel0_2;
        const myChart = echarts.init(chartDom);
        
        const colorArr = ['#9fe080','#5470c6', '#f9c758']
      
        const chartsData =  this.data4panel0.areaChartData.map((item, index)=>{
          item.itemStyle= {color: colorArr[index]}
          return item
        })
        const option = {
          tooltip: {
            trigger: "item",
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: "30%",
              data: chartsData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
  
        myChart.setOption(option);
      },
      getDialogData4panel0(fn) { // 获取panel0弹窗列表信息
        overviewApi
          .getDialogData4panel0({
            page: this.currentPage4panel0 > 0 ? this.currentPage4panel0-1 : this.currentPage4panel0,
            size: this.pageSize4panel0,
            exact:{
              incubatorId: this.incubatorId,
            },
            vague:{
              year: this.searchQuery4panel0
            }
           
          })
          .then((res) => {
            console.log(res, "getData4panel04tech");
            this.tableData4panel0 = res.body.list || [];
            this.totalCount4panel0 = res.body.total
          });
      },
      getData4panel0(fn) { // 获取panel0页面统计信息
        overviewApi
          .getData4panel0({
            exact:{
              incubatorId: this.incubatorId,
            }
          })
          .then((res) => {
            console.log(res, "getData4panel04tech");
            this.data4panel0 = res.body;
            this.initChart4panel0_1();
            this.initChart4panel0_2()
          });
      },
      /**
       * panel4
       * @param {*} fn 
       */
       filterData4panel4() {
        this.currentPage4panel4 = 1; // 重置当前分页
        this.getData4panel4();
      },
      getMore4panel4(item){
       this.dialogVisible4panel4 = true
       this.introduction4panel4 = item.introduction
      },
  
      handleCurrentChange4panel4(newPage) {
        // 切换分页
        this.currentPage4panel4 = newPage;
        this.getData4panel4()
        
      },
      handleSizeChange4panel4(newSize){
        this.pageSize4panel4 = newSize;
        this.getData4panel4()
      },
      getData4panel4(fn) { // 获取panel4导师信息
        overviewApi
          .getData4panel4({
            page: this.currentPage4panel4 > 0 ? this.currentPage4panel4-1 : this.currentPage4panel4,
            size: this.pageSize4panel4,
            exact:{
              incubatorId: this.incubatorId,
            },
            vague: {"mentorName":this.searchQuery4panel4}
          })
          .then((res) => {
            this.tableData4panel4 = res.body.list || [];
            this.totalCount4panel4 = res.body.total
          });
      },
   
    },
  };
  </script>
  <style rel="stylesheet/scss" lang="scss" scoped>
  .app-container {
    padding: 20px;
    background-color: #fff;
    font-family: Microsoft YaHei;
  }
  
  .page-footer {
    display: none !important;
  }
  
  .header {
    // 菜单标题头
    background: #f5f7fa;
    ul {
      display: flex;
      justify-content: start;
      border: 1px solid #d8dce5;
      background-color: #fff;
      li {
        width: 238px;
        height: 48px;
        display: flex;
        align-items: center;
        list-style: none;
        justify-content: center;
        cursor: pointer;
  
        &:active,
        &.active {
          background: #1890ff;
          .title {
            color: #ffffff;
          }
        }
        .title {
          font-size: 16px;
          color: #303133;
          font-weight: bold;
        }
      }
    }
  }
  
  .bodyer {
    // panels最外层容器
    background-color: #fff;
  }
  
  .panelsWrapper {
    //  panels父容器
    background: #f5f6fb;
    display: flex;
    flex-wrap: wrap;
  
    & > li {
      width: 100%;
      height: 442px;
      background: #ffffff;
      position: relative;
    }
  }
  
  /**公共类 */
  .divider {
    width: 100%;
    height: 1px;
    border: 1px dashed #dddee1;
  }
  .prefixDiv {
    position: relative;
    &:before {
      width: 4px;
      height: 16px;
      background: #1890ff;
      position: absolute;
      top: 50%; /* 垂直居中 */
      transform: translateY(-50%); /* 精确居中 */
      left: 16px;
      content: "";
    }
  }
  .prefixPoint {
    position: relative;
    &:before {
      content: "";
      width: 6px;
      height: 6px;
      background: #1890ff;
      border-radius: 50%;
      position: absolute;
      left: 5px;
      top: 50%; /* 垂直居中 */
      transform: translateY(-50%); /* 精确居中 */
    }
  }
  /** 第五个面板 */
  .tab_panel_4 {
    ._title {
      font-size: 16px;
      color: #1890ff;
      width: 100%;
      height: 50px;
      background: #e4f2ff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      padding-left: 26px;
      &:before {
        width: 4px;
        height: 16px;
        background: #1890ff;
        position: absolute;
        //   top: 19px;
        top: 50%; /* 垂直居中 */
        transform: translateY(-50%); /* 精确居中 */
        left: 16px;
        content: "";
      }
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      margin-left: 68px;
      // margin-top: 20px;
      & > li {
        position: relative;
        width: 260px;
        height: 334px;
        background: #fff;
        border: 1px solid #dddee1;
        text-align: center;
        padding: 10px;
        margin-left: 10px;
        margin-right: 40px;
        margin-top: 20px;
        img {
          width: 200px;
          height: 200px;
          margin: 0 auto;
        }
        a {
          position: absolute;
          right: 11px;
          bottom: 96px;
          font-size: 15px;
          color: #1890ff;
        }
        p {
          font-size: 15px;
          color: #606266;
          padding-left: 18px;
          text-align: left;
          position: relative;
          padding-top: 3px;
          padding-bottom: 3px;
          &:before {
            content: "";
            width: 6px;
            height: 6px;
            background: #1890ff;
            border-radius: 50%;
            position: absolute;
            left: 5px;
            top: 50%; /* 垂直居中 */
            transform: translateY(-50%); /* 精确居中 */
          }
        }
      }
    }
  }
  .tab_panel_1 {
    display: flex;
    padding: 10px;
    & > ._left {
      flex: 1;
      margin-right: 20px;
      height: 798px !important;
      border: 1px solid #dddee1;
      padding: 20px;
      ul{
        height: 640px;
       overflow-y: auto;
      }
      ._title {
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
        margin-bottom: 20px;
        span {
          &:first-child {
            font-size: 19px;
            color: #303133;
          }
          &:last-child {
            font-size: 19px;
            color: #42b983;
          }
        }
      }
      li {
        font-size: 15px;
        color: #666666;
        width: 100%;
        height: 38px;
        line-height: 38px;
        text-align: left;
        padding-left: 10px;
        cursor: pointer;
        &.active,
        &:hover {
          background: #1890ff;
          color: #fff;
        }
      }
    }
    & > ._right {
      flex: 4;
      h2 {
        font-weight: 400;
        font-size: 27px;
        color: #42b983;
        text-align: center;
        margin-top: 20px;
        margin-block: 20px;
      }
  
      ._title {
        width: 100%;
        height: 36px;
        background: #e4f2ff;
        font-size: 16px;
        color: #1890ff;
        margin-top: 10px;
        margin-bottom: 6px;
  
        ._left {
          float: left;
          margin-left: 30px;
          margin-top: 6px;
        }
        ._right {
          float: right;
          margin-right: 30px;
          margin-top: 6px;
          cursor: pointer;
        }
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        padding-left: 20px;
        li {
          width: 290px;
          font-size: 15px;
          color: #606266;
          padding: 10px;
          padding-left: 20px;
        }
      }
      dl {
        display: flex;
        flex-wrap: wrap;
        padding-left: 20px;
        dd {
          width: 250px;
          height: 274px;
          font-size: 15px;
          color: #606266;
          /* padding: 10px; */
  
          margin-left: 20px;
          margin-right: 20px;
          border: 1px solid #dddee1;
          margin-top: 10px;
          img {
            width: 250px;
            height: 150px;
          }
          h3 {
            font-size: 15px;
            color: #606266;
            padding-left: 15px;
          }
          p {
            font-size: 13px;
            color: #969aa3;
            padding-left: 15px;
            // line-height: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 4;
            line-height: 1.6;
          }
        }
      }
    }
  }
  
  .tab_panel_0 {
    h2 {
      font-weight: 400;
      font-size: 27px;
      color: #42b983;
      text-align: center;
      padding-top: 16px;
      padding-bottom: 16px;
    }
    ._title {
      color: #1890ff;
      height: 48px;
      background: #e4f2ff;
      font-weight: 400;
      font-size: 16px;
      line-height: 48px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      padding-left: 26px;
      padding-right: 20px;
      &>._right{
            cursor: pointer;
          }
    }
    .contentWrapper {
      border-top: 1px dashed #dddee1;
      display: flex;
      padding: 16px;
      & > div {
        flex: 1;
      }
      .left {
        border-right: 1px dashed #dddee1;
        padding-left: 20px;
        padding-right: 20px;
        .body {
          display: flex;
          ._left,
          ._right {
            flex: 1;
          }
         
        }
        li {
          font-size: 15px;
          color: #606266;
          line-height: 26px;
          padding: 4px 42px;
        }
      }
      .right {
        padding-left: 20px;
        padding-right: 20px;
        .body {
          display: flex;
          flex-direction: column;
        }
  
        ._top {
          li {
            font-size: 15px;
            color: #606266;
            line-height: 26px;
            padding: 4px 42px;
          }
        }
        ._bottom {
          padding-left: 40px;
          img {
            width: 418px;
            height: 272px;
          }
        }
      }
    }
  }
  
  ::v-deep .el-dialog__body .el-table th.el-table__cell{
    background-color: #f9ffec;
  }
  </style>
  