<template>
  <div>
    <div class="nav-box d-flex">
      <div :class="activeNum === 0 ? 'nav-box-active' : ''" @click="changeIndex(0)"><a href="#mao1">众创空间</a></div>
      <div :class="activeNum === 2 ? 'nav-box-active' : ''" @click="changeIndex(2)"><a href="#mao3">创业服务</a></div>
      <div :class="activeNum === 3 ? 'nav-box-active' : ''" @click="changeIndex(3)"><a href="#mao4">合作伙伴</a></div>
    </div>

    <a name="mao1" id="mao1" class="place"></a>
    <div class="banner-box">
      <a-carousel :autoplay-speed="time" autoplay>
        <div class="img-box">
          <img src="~assets/banner/banner1.png" />
        </div>
        <div class="img-box">
          <img src="~assets/banner/banner2.png" />
        </div>
        <div class="img-box">
          <img src="~assets/banner/banner3.png" />
        </div>
      </a-carousel>

      <!-- 文字内容 -->
      <div class="banner-con">
        <h1 class="about-title">众创空间介绍</h1>
        <div class="about-font">
          本众创空间分为线下实体众创空间与线上虚拟众创空间，重点面向功能食品、生物医药和大健康产业 领域科技型中小微企业、创客和创新创业团队开展创业孵化，培育高新技术企业，促进科技成果转化和产业集聚发展。
        </div>
        <div class="about-font">
          本众创空间以建设专业化、市场化、网络化、品牌化双创孵化基地为目标，致力打造以公共技术服务平台 为支撑，以创新创业服务为主导，以创新创业大讲堂为带动，以创新创业投融资为拓展，线上线下相结合，实 体虚拟相融合的全要素专业化开放式创新创业孵化平台，着力构建“众创空间-孵化器-加速器-产业园”创新创业 孵化链，构筑创新创业生态系统。
        </div>
        <div class="about-font">
          目前空间已引入科创咨询专业服务机构，并与多家 第三方专业机构 建立战略合作，聘请 创业导师 30余名，服务领域涵盖专业技术、企业管理、科创咨询、财务税务、法务咨询等，可随时为入孵企业提供针 对性、一对一创业辅导服务。
        </div>
      </div>

      <div class="contact">乔晓阳：18635939333</div>
    </div>


    <div class="intro-box bg-gray text-center">
      <div class="intro-con w-1500">
        <div @click="jump('/IncubationPlatform/MakerSpace/EntitySpace')">
          <p class="title">实体空间</p>
          <div class="split"></div>
          <div class="con">
            <p>实体空间由孵化场所、公共实验室、中试基地部分组成。</p>
            <p>
              孵化场所分为运营办公区、公共空间区、独立空间区和开放办公区。公共空间区包括路演厅(项目路演、知识培训、产品展示等多项功能)、会议室、洽谈室、第三空间(创业咖啡)。开放空间区按功能食品、生物医药、数字健康领域进行分区设置。
            </p>
          </div>
        </div>
        <div @click="jump('/IncubationPlatform/MakerSpace/VirtualSpace')">
          <p class="title">虚拟空间</p>
          <div class="split"></div>
          <div class="con">
            <p>
              虚拟众创空间主要面向非入驻实体空间从事功能食品、生物医药和大健康产业相关研发服务和生产的企业。
              虚拟众创空间依托绿谷数字化平台进行建设，入驻企业可享受实体众创空间的各种创新创业服务，参加相关创新创业活动。
            </p>
          </div>
        </div>
      </div>

      <div class="intro-bg">
        <img src="~assets/newPlatform/bg.jpg" />
      </div>
    </div>

    <!-- 创新服务 -->
    <a name="mao3" id="mao3" class="place"></a>
    <div class="service-box bg-gray text-center">
      <div class="title w-1500">
        <img src="~assets/about/title4.png" />
        <span>乔晓阳：18635939333</span>
      </div>
      <div class="service-flow">
        <div class="flow-path" style="padding: 15px 9%">
          <div class="flow-title" style="top: 30%">服务流程</div>
          <div class="flow-content">
            <img src="~assets/image.png" style="width: 100%" />
          </div>
        </div>
      </div>

      <div class="w-1500">
        <div class="inner d-flex flex-wrap" style="margin: 20px auto">
          <div
            :class="(index + 1) % 3 === 0 ? 'margin-0' : ''"
            :key="index"
            class="item-box mb-8 pointer"
            v-for="(item, index) in serviceList"
          >
            <img
              :src="item.picUrl"
              :title="item.intro"
              @click="showModal(item.id)"
              style="height: 220px; width: 100%; border: 1px solid #ccc"
            />

            <p @click="showModal(item.id)" class="font-24 my-4 service-title">
              <span>{{ item.name }}</span>
              <a-button @click="showModal(item.id)">需求填报</a-button>
            </p>

            <div class="font-16 textColor item-intro mb-2" v-if="item.intro.length > 45">
              {{ item.intro.slice(0, 45) }}
              <a-button @click="showIntro(index)" class="font-16 baseColor" style="height: 20px; float: right; padding: 0px" type="link">
                more
                <a-icon style="font-size: 12px" type="right" />
              </a-button>
            </div>

            <div class="font-16 textColor item-intro" v-if="item.intro.length <= 45">
              <p>{{ item.intro }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <a name="mao4" id="mao4" class="place"></a>
    <div class="partner-box text-center">
      <div class="title w-1500">
        <img src="~assets/about/title2.jpg" />

        <div class="partner-type">
          <div
            class="partner-type-item"
            :class="currType === index ? 'active-item' : ''"
            v-for="(item, index) in listType"
            :key="index"
            @click="changeType(index)"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="w-1500">
        <div class="partner-flex">
          <div class="partner-item" v-for="(item, index) in lists" :key="index" :class="!item.logoUrl ? 'partner-txt' : ''">
            <div class="partner-item-img" v-if="item.logoUrl">
              <img :src="item.logoUrl" />
            </div>
            <div class="partner-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-gray" style="height: 100px"></div>

    <a-modal :footer="null" v-model="showModelIntro">
      <p class="mt-3">{{ modelIntro }}</p>
    </a-modal>

    <div class="inner">
      <a-pagination
        :current="current"
        :page-size="pageSize"
        :total="total"
        @change="onShowSizeChange"
        class="pagination"
        show-less-items
        show-quick-jumper
        v-show="total > 8"
      />
    </div>

    <a-modal :confirm-loading="confirmLoading" :visible="visible" @cancel="handleCancel" @ok="handleOk" title="技术需求" width="50%">
      <a-form :form="form">
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="公司名称">
          <a-input placeholder="请输入公司名称..." v-model.trim="platform.companyName" />
        </a-form-item>
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系人" required>
          <a-input placeholder="请输入联系人..." v-model.trim="platform.manName" />
        </a-form-item>
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="联系电话" required>
          <a-input @change="changePhone" placeholder="请输入联系电话.." type="tel" v-decorator="['tel', { rules: phoneRules }]" />
        </a-form-item>
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片验证码" required>
          <div class="d-flex flex-nowrap">
            <a-input placeholder="图片验证码" type="number" v-model="codeNum" />
            <img :src="picCode.imageBase64" @click="changePicCode" class="code_img ml-2" v-if="picCode && picCode.imageBase64" />
            <a-button @click="changePicCode" class="code_img ml-2" size="small" v-else>获取验证码</a-button>
            <!-- <a-input v-decorator="['account', { rules: rules.account }]" /> -->
          </div>
        </a-form-item>
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="短信验证码" required>
          <div class="d-flex flex-nowrap">
            <a-input placeholder="请输入验证码" type="number" v-model="platform.code" />
            <a-button class="code_img ml-2" disabled type="primary" v-if="showInterval">重新发送 {{ interval }}</a-button>
            <a-button :disabled="platform.isTel === false" @click="getCode" class="code_img ml-2" type="primary" v-else
              >获取验证码</a-button
            >
          </div>
        </a-form-item>
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="需求描述">
          <a-textarea placeholder="请输入需求描述..." style="height: 120px" v-model.trim="platform.describe" />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="上传附件"
          v-show="typeData.type === 0"
        >
          <a-upload
            :action="action"
            :before-upload="beforeUpload"
            :default-file-list="fileList"
            @change="fileChange"
            list-type="picture"
            name="files"
          >
            <a-button> <a-icon type="upload" />点击上传附件 </a-button>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import { selService, serviceApply, upload } from 'config/api';

const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 18 },
};
const formTailLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18, offset: 6 },
};

export default {
  name: 'IncubationPlatform',
  data() {
    return {
      time: 10000,
      activeNum: 0,
      listType: [],
      lists: [],
      currType: 0,
      serviceList: [],
      showModelIntro: false,
      modelIntro: '',
      current: 1,
      pageSize: 8,
      total: 0,
      form: this.$form.createForm(this, { name: 'submit' }),
      action: upload,
      fileList: [],
      visible: false,
      formItemLayout,
      formTailLayout,
      confirmLoading: false,
      platform: {
        companyName: '', // 公司名称
        manName: '', // 联系人
        tel: '', // 联系电话
        describe: '', // 项目描述
        code: '', // 验证码
        files: [], // 附件Id
        isTel: false,
      },
      codeRules: [
        { required: true, message: '请输入验证码' },
        { min: 4, max: 4, message: '请输入4位短信验证码' },
      ],
      codeNum: '',
      showInterval: false,
      codeTimer: null,
      interval: 120, // 验证码有效时间倒计时
      phoneRules: [
        { required: true, pattern: new RegExp(/^[1][3,4,5,6,7,8,9][0-9]{9}$/), whitespace: true, message: '请输入正确的手机号' },
      ],
      showList: ['查看全部', '查看全部', '查看全部', '查看全部', '查看全部', '查看全部', '查看全部', '查看全部'],
      typeData: {
        type: 0,
        id: '',
      },
    };
  },

  watch:{
    $route(to){
      if(to.hash){
        this.setJump(to.hash)
      }
    }
  },

  computed: {
    ...mapState('home', ['partners']),
    ...mapState('user', ['picCode']),
  },

  async created() {
    this.getService();
    this.sendPicCode();
    await this.getUserSer();
    if (this.userSer) {
      if (this.userSer.name) {
        this.platform.manName = this.userSer.name;
      }
      if (this.userSer.phone) {
        this.platform.tel = this.userSer.phone;
      }
      if (this.userSer.companyName) {
        this.platform.companyName = this.userSer.companyName;
      }
    }

    this.setPartners([]);
    const params = {
      param: {
        pageNum: 1,
        type: 1,
        typeOfPlatform: 3,
      },
    };
    await this.getFrontSearchCompany(params);

    this.lists = [];
    this.listType = [];
    this.partners.forEach(item => {
      item.backendSearchList.forEach(list => {
        this.lists.push(list);
      })

      // if (item.typeOfTech === 0 && this.listType.indexOf('高校') === -1) {
      //   this.listType.push('高校');
      // }

      // if (item.typeOfTech === 1 && this.listType.indexOf('院所') === -1) {
      //   this.listType.push('院所');
      // }

      // if (item.typeOfTech === 2 && this.listType.indexOf('企业') === -1) {
      //   this.listType.push('企业');
      // }
    });
  },

  mounted() {
    this.$nextTick(() => {
      if(this.$route.hash){
        this.setJump(this.$route.hash)
      }
    })
  },

  methods: {
    // ...mapMutations('home', ['setServiceArr']),
    ...mapMutations('home', ['setPartners']),
    ...mapActions('user', ['sendCode', 'sendPicCode']),
    ...mapActions('home', ['getFrontSearchCompany', 'getUserSer']),

    setJump(hash){
      if(hash === '#mao1'){
        this.$nextTick(() => {
          this.changeIndex(0)
          document.getElementById('mao1').scrollIntoView(true)
        })
      }
      if(hash === '#mao3'){
        this.$nextTick(() => {
          this.changeIndex(2)
          document.getElementById('mao3').scrollIntoView(true)
        })
      }
      if(hash === '#mao4'){
        this.$nextTick(() => {
          this.changeIndex(3)
          document.getElementById('mao4').scrollIntoView(true)
        })
      }
    },

    // 改变单当前页数
    onShowSizeChange(current, size) {
      this.current = current;
    },

    showIntro(index) {
      this.showModelIntro = true;
      this.modelIntro = this.serviceList[index].intro;
    },

    // 获取服务列表
    async getService() {
      try {
        const params = { param: { serviceType: 2 } };
        const res = await selService(params);
        const { code, data, msg } = res.data;
        if (code === 200) {
          this.serviceList = data;
        }
      } catch (error) {
        // console.log(data);
      }
    },

    jump(url) {
      this.$router.push(url);
    },

    // 显示表单输入框
    showModal(id) {
      this.typeData.id = id;
      this.visible = true;
    },

    // 取消显示
    handleCancel(e) {
      this.visible = false;
    },

    // 验证电话
    changePhone(e) {
      this.platform.tel = e.target.value;
      this.platform.isTel = /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.platform.tel);
    },

    // 点击确定
    handleOk() {
      if (!this.platform.manName) {
        this.$message.error('请输入联系人');
      } else if (!this.platform.tel) {
        this.$message.error('请输入联系电话');
      } else if (!this.platform.code) {
        this.$message.error('请输入验证码');
      } else {
        if (this.platform.isTel) {
          for (var i = 0; i < this.fileList.length; i++) {
            this.platform.files = this.platform.files.concat(this.fileList[i].response.data[0].id);
          }
          this.subMitAdd();
          // console.log(this.platform.files);
        } else {
          this.$message.error('请输入正确的联系电话');
        }
      }
    },

    // 加入接口
    async subMitAdd() {
      this.confirmLoading = true;
      try {
        const params = {
          param: {
            code: this.platform.code,
            companyName: this.platform.companyName,
            contactName: this.platform.manName,
            contactPhone: this.platform.tel,
            description: this.platform.describe,
            filesId: this.platform.files,
            serviceId: this.typeData.id,
            type: this.typeData.type,
          },
        };
        const res = await serviceApply(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.$message.success('申请成功');
          this.visible = false;
          this.confirmLoading = false;
          for (let key in this.platform) {
            this.platform[key] = '';
          }
          this.platform.isTel = false;
        } else {
          throw msg;
          this.confirmLoading = false;
        }
      } catch (error) {
        this.$message.error(error);
        this.confirmLoading = false;
      }
    },

    // 获取验证码
    async getCode() {
      // console.log(111);
      try {
        const params = {
          phone: this.platform.tel,
          verificationCodeId: this.picCode.verificationCodeId,
          verificationCodeValue: this.codeNum,
        };
        await this.sendCode(params);
        this.getCodeInterval();
      } catch (error) {
        // throw new Error(`SignIn.vue method getCode: ${error}`);
        // console.log(error);
      }
    },

    // 验证码倒计时
    getCodeInterval() {
      this.showInterval = true;
      this.codeTimer = setInterval(() => {
        if (this.interval === 0) {
          clearInterval(this.codeTimer);
          this.codeTimer = null;
          this.showInterval = false;
          this.interval = 120;
          return;
        }
        this.interval = this.interval - 1;
      }, 1000);
    },

    // 刷新验证码
    changePicCode() {
      this.sendPicCode();
    },

    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isLt5M) {
          this.$message.warning('上传附件大小不能超过5m！');
          return reject(false);
        }
        return resolve(true);
      });
    },

    fileChange(info) {
      this.fileList = info.fileList;
    },

    changeIndex(i) {
      this.activeNum = i;
    },

    changeType(i) {
      this.currType = i;
    },
  },
};
</script>
<style lang="stylus" scoped>
a {
  color: unset;
}

.wrap {
  width: 1260px;
  min-height: 1037px;
  margin: 80px auto 28px auto;
  overflow: hidden;
  opacity: 1;
}

.bg-gray {
  background-color: #F5F5F5;
}

.w-1500 {
  // display: inline-block;
  // width: 1500px;
  width: 82%;
  margin: 0 auto;
}

.item-intro{
  text-align: left;
  // text-indent: 2em;
}

.text-center {
  text-align: center;
}

.nav-box {
  position: fixed;
  top: 70px;
  width: 100%;
  z-index: 99;

  a {
    color: unset;
  }
}

.img-box {
  // height: 380px;
  width: 100%;

  img {
    height: 100%;
    width: 100%;
  }
}

.banner-box {
  position: relative;

  .banner-con {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 1200px;

    .about-title {
      color: white;
      font-size: 80px;
      font-weight: 600;
    }

    .about-font {
      color: white;
      font-size: 20px;
      line-height: 40px;
      text-align: left;
    text-indent: 2em;
    }
  }

  .contact{
    position: absolute;
    bottom: 24px;
    right: 40px;
    font-size: 24px;
    color: #fff;
    font-weight: bold;
  }
}

.intro-box {
  position: relative;
  padding: 95px 0 50px;
  width: 100%;
  height: 700px;

  .intro-bg {
    position: absolute;
    bottom: 50px;
  }

  .intro-con {
    position: relative;
    z-index: 9;
    display: flex;
    justify-content: space-between;

    > div {
      padding: 50px 60px 0;
      width: 45%;
      height: 400px;
      background-color: rgba(19, 172, 196, 0.8);
      text-align: left;
      color: white;
      cursor: pointer;

      .title {
        font-size: 32px;
        line-height: 1;
        margin: 0;
      }

      .split {
        margin: 20px 0;
        display: inline-block;
        width: 74px;
        height: 1px;
        background-color: #fff;
      }

      .con p {
        font-size: 16px;
        line-height: 40px;
        margin: 0;
        letter-spacing: 1px;
      }
    }
  }
}

.service-box {
  padding: 60px 0;

  .title {
    text-align: left;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    font-size: 22px;
    font-weight: bold;
  }

  .service-flow {
    margin: 50px 0;
  }
}

.partner-box {
  padding: 60px 0;

  .title {
    margin-bottom: 30px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .partner-type {
      display: flex;
      align-items: center;
    }

    .partner-type-item {
      margin-left: 40px;
      width: 112px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 16px;
      color: #717879;
      background-color: #EBF8FA;
    }

    .partner-type-item.active-item {
      color: white;
      background-color: #13ACC4;
    }
  }

  .partner-flex {
    text-align: left;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .partner-item {
      height: 163px;
      margin: 20px 0;
      padding: 10px 0;
      margin-right: 40px;
      width: calc(((100% - 200px) / 6));
      text-align: center;
      border: 1px solid #D9D9D9;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      &:nth-child(6n) {
        margin-right: 0;
      }

      .partner-item-img {
        margin-bottom: 15px;
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 80px;
      }

      img {
        max-width: 100%;
        max-height: 100%;
      }

      .partner-name {
        font-size: 16px;
        color: #000;
        margin: 0;
        line-height: 24px;
      }
    }

    .partner-txt{
      height: 163px;
    }
  }
}

.contact-box {
  padding: 60px 0;

  .title {
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.inner {
  width: 100%;
  margin: 10px auto 15px;
}

.content-box {
  padding: 0 !important;
  width: 30%;
  height: auto !important;
  margin: 50px 0;
  cursor: pointer;
  position: relative;

  img {
    width: 100%;
  }
}

.con-title {
  position: absolute;
  bottom: 23px;
  color: #ffffff;
  font-size: 1.6rem;
  text-align: center;
  width: 100%;
  background-image: linear-gradient(rgba(#545454, 0), rgba(0, 0, 0, 0.6));
}

@media only screen and (max-width: 1650px) {
  .con-title {
    font-size: 1.3rem;
  }
}

.con-con {
  background: white;
  box-shadow: 0 0 6px #ccc;
  height: 26%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.item-box {
  position: relative;
  width: 26%;
  margin-right: 11%;
  border-radius: 4px;
}

.service-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.place{
    display: inline-block;
    position: relative;
    top: -100px;
}
</style>
