<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.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>
                      <li>{{}}</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">
          <div class="_left">
            <div class="_title">
              <span>在孵企业</span>
              <span>{{ totalCount4panel1 }}家</span>
            </div>
            <div class="_list">
              <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="searchText"
                style="100%"
              ></el-input>

              <ul>
                <li v-for="item1 in tableData4panel1" :key="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.principal }}
                </li>
                <li class="prefixPoint">
                  联系电话: {{ data4panel1.contactPhone }}
                </li>
                <li class="prefixPoint">
                  企业类型: {{ data4panel1.xxx }}
                </li>
                <li class="prefixPoint">
                  主要负责人创业特征: {{ data4panel1.xxx }}
                </li>
                <li class="prefixPoint">
                  创业导师:: {{ data4panel1.xxx }}
                </li>
                <li class="prefixPoint">
                  孵化状态: {{ data4panel1.incubationStatusName }}
                </li>
                <li class="prefixPoint">
                  企业级别: {{ data4panel1.companyLevelName }}
                </li>
                <li class="prefixPoint">
                  所属技术领域: {{ data4panel1.xxx }}
                </li>
                <li class="prefixPoint">
                  占用孵化场地面积: {{ data4panel1.occupiedArea }}
                </li>
                <li class="prefixPoint">
                  累计获得融资总额: {{ data4panel1.totalFunding }}
                </li>
                <li class="prefixPoint">
                  注册资金: {{ data4panel1.xxx }}
                </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.inventionPatentsNumber }}
                </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.overseasEmployees }}人
                </li>
                <li class="prefixPoint">
                  净利润: {{ data4panel1.netProfit }}万元
                </li>
                <li class="prefixPoint">
                  上缴税费: {{ data4panel1.taxesPaid }}万元
                </li>
                <li class="prefixPoint">
                  研发投入: {{ data4panel1.researchInput }}万元
                </li>
                <li class="prefixPoint">
                  研发投入占比: {{ data4panel1.investmentProportion }}%
                </li>
                <li class="prefixPoint">
                  总收入: {{ data4panel1.grossIncome }}万元
                </li>
              </ul>
            </div>

            <!--  -->
            <div class="_title prefixDiv">
              <div class="_left">企业产品</div>
              <div class="_right" @click="getMore4panel1_3">查看更多>></div>
            </div>
            <div class="_body">
              <dl>
                <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="searchText4panel0"
              style="width: 300px;"
            ></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,

      // panel0 孵化器概况
      data4panel0: {},
      totalCount4panel0: 0, // 总条目数
      currentPage4panel0: 0, // 当前页码
      pageSize4panel0: 10, // 每页显示的条目数量
      dialogVisible4panel0: false,
      searchQuery4panel0: '',
      tableData4panel0: [],

        // panel123 企业信息
        data4panel1: {},
      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.getData4panel1()

  },
  methods: {
    changeNav(index) {
      this.activeIndex = ~~index;
    },
    /**
     * 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.getData4panel4()
    },
    getData4panel1() { // 获取panel2，3，4企业列表
      let companyType = ''
      if(~~this.activeIndex === 0){
        companyType = '1'
      }else if(~~this.activeIndex === 2){
        companyType = '2'
      }else if(~~this.activeIndex === 3){
        companyType = '3'
      }
      overviewApi
        .getData4enterprise({
          page: this.currentPage4panel1 > 0 ? this.currentPage4panel1-1 : this.currentPage4panel1,
          size: this.pageSize4panel1,
          incubatorId: this.incubatorId,
          companyType,
          mentorName: 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
          }
        });
    },
    getData4panel1_1(companyId) { // 获取panel2，3，4企业详情
      overviewApi
        .getData4enterpriseDetail({
          companyId: companyId+''
        })
        .then((res) => {
          this.data4panel1 = res.body || {};
        });
    },
    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,
          }
        })
        .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(fn) { // 获取panel1 产品弹窗列表信息
      overviewApi
        .getDialogData4panel1_3({
          page: this.currentPage4panel1_3 > 0 ? this.currentPage4panel1_3-1 : this.currentPage4panel1_3,
          size: this.pageSize4panel1_3,
          exact:{
            companyId: this.currentSelectedCompanyId,
          }
        })
        .then((res) => {
          this.tableData4panel1_3 = res.body.list || [];
          this.totalCount4panel1_3 = res.body.total
        });
    },
    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 option = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "孵化器总收入",
            type: "pie",
            radius: "50%",
            data: this.data4panel0.revenueChartData || [],
            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 option = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "孵化器使用总面积",
            type: "pie",
            radius: "50%",
            data: this.data4panel0.areaChartData || [],
            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,
          incubatorId: this.incubatorId,
          year: this.searchQuery4panel0
        })
        .then((res) => {
          console.log(res, "getData4panel04tech");
          this.tableData4panel0 = res.body.list || [];
          this.totalCount4panel0 = res.body.total
        });
    },
    getData4panel0(fn) { // 获取panel0页面统计信息
      overviewApi
        .getData4panel0({
          incubatorId: this.incubatorId,
        })
        .then((res) => {
          console.log(res, "getData4panel04tech");
          this.data4panel0 = res.body;
          this.initChart4panel0_1();
        });
    },
    /**
     * 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,
          incubatorId: this.incubatorId,
          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: 60px;
    // 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;
    ._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;
        }
      }
    }
  }
}

.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>
    