<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">查看更多>></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 === 10">
          <div class="_left">
            <div class="_title">
              <span>在孵企业</span>
              <span>280家</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 10" :key="item1">
                  威海众智惠新信息科技有限公司
                </li>
              </ul>
              <el-pagination
                @current-change="handleCurrentChange4panel0"
                :current-page="currentPage4panel0"
                :page-size="pageSize4panel0"
                :total="totalItems4panel0"
                layout="prev, pager, next"
              />
            </div>
          </div>
          <div class="_right">
            <h2>威海众智惠新信息科技有限公司</h2>
            <div class="divider"></div>
            <div class="_title prefixDiv">
              <div class="_left">企业基础信息</div>
              <div class="_right">查看企业简介>></div>
            </div>
            <div class="_body">
              <ul>
                <li v-for="item in 10" class="prefixPoint">
                  入驻时间: 2021-10-10
                </li>
              </ul>
            </div>

            <div class="_title prefixDiv">
              <div class="_left">知识产权</div>
            </div>
            <div class="_body">
              <ul>
                <li v-for="item in 10" class="prefixPoint">
                  入驻时间: 2021-10-10
                </li>
              </ul>
            </div>

            <div class="_title prefixDiv">
              <div class="_left">创业创新企业情况</div>
            </div>
            <div class="_body">
              <ul>
                <li v-for="item in 10" class="prefixPoint">
                  入驻时间: 2021-10-10
                </li>
              </ul>
            </div>

            <div class="_title prefixDiv">
              <div class="_left">今年企业经营信息</div>
              <div class="_right">查看更多>></div>
            </div>
            <div class="_body">
              <ul>
                <li v-for="item in 10" class="prefixPoint">
                  入驻时间: 2021-10-10
                </li>
              </ul>
            </div>

            <!--  -->
            <div class="_title prefixDiv">
              <div class="_left">企业产品</div>
              <div class="_right">查看更多>></div>
            </div>
            <div class="_body">
              <dl>
                <dd v-for="item in 10">
                  <img src="" alt="" />
                  <h3>环境监测设备</h3>
                  <p>
                    内置NB-IoT物联网SIM卡，把数据传
                    输到晶合云平台或客户私有云平台， 实现数据
                  </p>
                </dd>
              </dl>
            </div>
          </div>
        </li>
        <li class="tab_panel_4" v-if="activeIndex === 40">
          <div class="_title">
            <span>创业导师</span>
            <el-input
              placeholder="请输入姓名搜索"
              prefix-icon="el-icon-search"
              v-model="searchText4panel0"
            ></el-input>
          </div>
          <ul>
            <li v-for="item in 10" :key="item">
              <img src="" alt="" />
              <p>姓名：张丽力</p>
              <p>学历：博士</p>
              <p>毕业学校：山东大学</p>
              <p>联系电话：13521457845</p>
              <a>查看简介&gt;</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <el-dialog
      title="新增孵化器信息"
      :visible.sync="dialogVisible4panel0"
      @close="resetForm"
    >
      <el-form
        label-width="170px"
        :inline="true"
        :model="formData4panel0"
        class="demo-form-inline"
      >
        <el-row>
          <el-form-item label="孵化器名称">
            <el-input
              v-model="formData4panel0.incubatorName"
              placeholder=""
              size="middle"
            ></el-input>
          </el-form-item>
          <el-form-item label="运行机构">
            <el-input
              v-model="formData4panel0.operatingAgency"
              placeholder=""
              size="middle"
            ></el-input>
          </el-form-item>
          <el-form-item label="孵化器等级">
            <el-select
              v-model="formData4panel0.incubatorLevel"
              style="width: 200px"
              size="middle"
            >
              <el-option
                :label="item.name"
                :value="item.value"
                v-for="item in companyLevelList"
                :key="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input
              v-model="formData4panel0.contactPerson"
              placeholder=""
              size="middle"
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </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: {},
      searchText4panel0: "",
      currentPage4panel0: 1, // 当前页码
      pageSize4panel0: 10, // 每页显示的条目数量
      totalItems4panel0: 100, // 总条目数
      dialogVisible4panel0: false,
      formData4panel0: {
        address: "",
        contactPerson: "",
      },
    };
  },
  computed: {},
  mounted() {
    this.incubatorId = this.$route.query.id;
    this.getData4panel0();
  },
  methods: {
    changeNav(index) {
      this.activeIndex = ~~index;
    },
    handleCurrentChange4panel0(newPage) {
      // 切换分页
      this.currentPage4panel0 = newPage;
      // 这里可以添加代码来加载新页的数据
      console.log(`当前页: ${newPage}`);
    },
    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);
    },
    getData4panel0(fn) {
      overviewApi
        .getData4panel0({
          incubatorId: this.incubatorId,
        })
        .then((res) => {
          console.log(res, "getData4panel04tech");
          this.data4panel0 = res.body;
          this.initChart4panel0_1();
        });
    },
  },
};
</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: 6px;
        bottom: 60px;
        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;
      }
    }
    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;
  }
  .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;
        }
      }
    }
  }
}
</style>
    