<template>
  <div>
    <h-nav />
    <div class="inner my-1">
      <bread-crumb :arr="arr" />
    </div>
    <div class="top-box">
      <banner :show-page="49" />
      <!-- <add-model :value="2" class="add-mol" style="height: 32px" /> -->
      <settled-model :type-num="1" class="add-mol" ref="childModel" style="height: 32px" />
      <a-button
        @click="$router.push('/IncubationPlatform/MakerSpace/InformationFilling')"
        class="set-mol"
        type="primary"
      >统计信息填报</a-button>

      <!-- <div class="top-title">实体众创空间</div>
      <div class="top-content">
        山西绿谷生物科技股份有限公司立足功能食品、生物医药和大健康产业，聚焦“创新”、聚力“孵化”、聚合“产业”，
        致力建设集创新链、孵化链和产业链为一体，产学研协同、多学科交叉、大中小企业融通、
        线上线下相结合的融合发展机制和开放式创新创业平台，培育打造全链条一体化新型社会研发机构和创新创业生态系统，
        构筑专业化、集群化、园区化、产业发展新模式和新业态。公司秉持“创新、开放、协同、融合”发展理
        念，以“赋能健康中国，筑梦绿色未来”为愿景，以“构建创新创业生态，发展特色产业集群，打造全链条一体化开放
        式创新创业高地”为使命，大力推动建设“共融共生，共建 共创”价值共同体。
      </div>-->
    </div>
    <!-- 孵化场所 -->
    <div @click="$router.push('')" class="center-box c-box pointer">
      <div class="center-title">
        <div class="circular"></div>
        <div style="margin-left: 40px">孵化场所</div>
      </div>
      <div class="center-content d-flex flex-nowrap">
        孵化场所分为运营办公区、公共空间区、独立空间区和开放办公区。公共空间区包括路演厅
        （项目路演、知识培训、产品展示等多项功能）、会议室、洽谈室、第三空间（创业咖啡）。
        开放空间区按功能食品、生物医药、数字健康领域进行分区设置。
      </div>
    </div>
    <!-- 公共实验室 -->
    <div @click="$router.push('')" class="center-box pointer">
      <div class="center-title">
        <div class="circular"></div>
        <div style="margin-left: 40px">公共实验室</div>
      </div>
      <div class="center-content d-flex flex-column">
        <span>
          公共实验室位于太原市师范街50号山西省生物研究院有限公司，总面积1320平方米。
          建有“医药生物技术山西省重点实验室”、“山西省发酵工程中试基地”及“山西省乳品
          发酵中试基地”等省级科技创新平台；具有检验检测机构资质认定证书（CMA）；实验室
          拥有20万以上仪器设备26台套，包括AKTA蛋白纯化系统、多功能酶标仪、原子吸收光谱仪、
          液相色谱仪、万级无菌工作间、P2实验室等多种高端、大型实验仪器设备；可提供生物医药、
          食品检测、食用菌、肠道微生物等方面的科学实验、检验检测、小试中试等技术服务与科研成果转化。
        </span>
        <img
          class="center-img"
          src="https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210120/eb472126971a47438a3227df967ed2cb.png"
        />
      </div>
    </div>
    <!-- 中试基地 -->
    <div @click="$router.push('')" class="center-box c-box pointer">
      <div class="center-title">
        <div class="circular"></div>
        <div style="margin-left: 40px">中试基地</div>
      </div>
      <div class="center-content d-flex flex-column">
        <div>发酵工程中试基地位于山西维尔乳制品有限公司，基地具有发酵乳制品等生产加工条件，可提供微生物发酵实验及相关中试。</div>
        <div>超高压食品加工中试基地位于太原市小店区正阳街43号的山西力德福科技有限公司。基地具有非热杀菌保鲜生产线、超高压设备制造生产线及中试车间，可提供超高压加工实验及相关中试和产业化服务。</div>
        <div>
          干果精深加工中试基地位于吕梁的交城天娇红农业科技有限公司
          ，拥有300余万元的先进分析检测仪器设备及免洗干枣生产车间、浓缩枣汁生产车间等生产加工条件，可提供相关中试研究。
        </div>
        <img
          class="center-img"
          src="https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210120/d80b7f22aabc4c7194324b0f93793a41.png"
        />
      </div>
    </div>
    <!-- 加入流程 -->
    <!-- <div class="center-box">
      <div class="center-title">
        <div class="circular"></div>
        <div style="margin-left: 40px">加入流程</div>
      </div>
      <div class="center-content">
        <div class="join-us-box">
          <img class="fill-width" src="~assets/join-us.png" />
          <div class="material-box d-flex flex-row justify-center">
            <a-tooltip placement="top">
              <template slot="title">
                <div>
                  <p>资料：</p>
                  <p>1.入孵申请表</p>
                  <p>2.营业执照复印件（尚未注册的无须提供，未注册提供注册信息登记表）</p>
                  <p>3.法定代表或授权代表身份证复印件</p>
                  <p>4.主导产品或技术简介</p>
                </div>
              </template>
              <div class="material"></div>
            </a-tooltip>
          </div>
        </div>
      </div>
      <add-model :value="2" class="center-btn" style="height: 32px" />
    </div>-->
    <!-- 入驻企业名录 -->
    <div class="center-box" style="margin-bottom: 15px">
      <div class="center-title" style="top: 105px;">
        <div class="circular"></div>
        <div style="margin-left: 40px">入驻企业名录</div>
      </div>
      <div class="center-content">
        <settled-enterprise :lists="lists" @searchEnt="searchEnt" />
        <!-- <div :key="index" class="ent-box" v-for="(item, index) in lists">
          <p class="ent-index">{{ index + 1 }}</p>
          <span class="ent-name" style="margin-left: 50px">{{ item.company }}</span>
          <span class="ent-mainBusiness" style="margin-left: 50px">{{ item.mainBusiness }}</span>
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import HNav from '../../components/HNav.vue';
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
// import AddModel from './../../components/AddModel.vue';
import SettledModel from 'components/Introduce/SettledModel.vue';
import Banner from 'components/Banner/Banner.vue';
import SettledEnterprise from 'components/SettledEnterprise/SettledEnterprise.vue';
import { searchEnt } from 'config/api';

export default {
  name: 'EntitySpace',
  components: { HNav, BreadCrumb, SettledModel, Banner, SettledEnterprise },
  data() {
    return {
      title: '实体众创空间',
      arr: [
        { name: '孵化平台', url: '/IncubationPlatform/MakerSpace' },
        { name: '众创空间', url: '/IncubationPlatform/MakerSpace' },
        { name: '实体众创空间', url: '' },
      ],
      list: [],
      pageSize: 18,
      current: 1,
      lists: [],
    };
  },

  beforeRouteEnter(to, from, next) {
    if (from.path === '/login' || from.path === '/register') {
      return next(vm => {
        vm.$refs.childModel.showModal();
      });
    }
    next();
  },

  created() {
    console.log(this.$router);
    this.searchEnt();
  },

  methods: {
    // 改变单当前页数
    onShowSizeChange(current, size) {
      this.current = current;
    },
    async searchEnt(business) {
      try {
        const params = { param: { placeType: 1, company: business ? business : '' } };
        const res = await searchEnt(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.lists = data;
        } else {
          this.$message.error('查询失败');
        }
      } catch (error) {
        this.$message.error('查询失败');
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
.inner {
  margin: 10px auto 15px;
}

.center-btn {
  position: absolute;
  left: 26.2%;
  bottom: 100px;
}

.pagination {
  float: right;
}

.c-box {
  background: none !important;
}

.big-btn {
  width: 213px;
  height: 166px;
  background: #13ACC4;
  opacity: 1;
}

.big-con {
  width: 96px;
  height: 31px;
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 31px;
  color: #FFFFFF;
  opacity: 1;
}

.margin-0 {
  margin-right: 0 !important;
}

.ent-box {
  width: 100%;
  margin-right: 11%;
  position: relative;
  height: 56px;
  line-height: 56px;
  padding: 0 14px;
  background: #FFFFFF;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  margin-bottom: 20px;
}

.ent-index {
  width: 28px;
  position: absolute;
  top: 14px;
  line-height: 28px;
  text-align: center;
  font-size: 20px;
  font-family: Segoe UI;
  color: #FFFFFF;
  height: 28px;
  border-radius: 50%;
  background: #13ACC4;
  margin-bottom: 0;
}

.ent-name {
  position: absolute;
  left: 0;
  width: 50%;
  height: 24px;
  top: 50%;
  margin-top: -12px;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.65);
  opacity: 1;
  overflow: hidden;
}

.ent-mainBusiness {
  position: absolute;
  left: 60%;
  width: 30%;
  height: 24px;
  top: 50%;
  margin-top: -12px;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.65);
  opacity: 1;
  overflow: hidden;
}

.reg-box {
  position: absolute;
  left: 26.2%;
  bottom: 100px;
  width: 64.8%;
  overflow: hidden;
}

.join-us-box {
  width: 100%;
  position: relative;

  .material-box {
    width: 100%;
    height: 88px;
    position: absolute;
    top: 0px;
    left: 0px;

    .material {
      width: 10%;
      height: 100%;
    }
  }
}

.add-mol {
  position: absolute;
  bottom: 7%;
  left: 25%;
}

.set-mol {
  position: absolute;
  bottom: 7%;
  left: 33%;
}

@media only screen and (max-width: 1500px) {
  .set-mol {
    left: 35%;
  }
}

@media only screen and (max-width: 950px) {
  .set-mol {
    left: 40%;
  }
}

.center-img {
  width: 79%;
}
</style>
