<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 === 1 ? 'nav-box-active' : ''" @click="changeIndex(1)"><a href="#mao2">合作伙伴</a></div>
      <div :class="activeNum === 2 ? 'nav-box-active' : ''" @click="changeIndex(2)"><a href="#mao3">产业创新联盟</a></div>
    </div>

    <a name="mao1" id="mao1" class="place"></a>
    <div class="banner-box">
      <a-carousel>
        <div class="img-box">
          <img src="~assets/banner/banner04.png" />
        </div>
      </a-carousel>

      <!-- 文字内容 -->
      <div class="banner-con">
        <h1 class="about-title">产业服务平台</h1>
        <div class="about-font">
          面向众创空间入孵企业，组织开展市场开发、品牌建设、产业对接、投融资等产业化服务;聚焦前沿交叉新兴产业领域，优化整合平台资源，组建产业技术创新战略联盟和协同创新联合体，培育发展衍生企业，构建“众创空间—孵化器—加速器—产业园”创业孵化链，促进大中小企业融通发展。
        </div>
      </div>
      <div class="contact">乔晓阳：18635939333</div>
    </div>

    <!-- 产业服务 -->
    <div class="service-box bg-gray text-center">
      <div class="title w-1500">
        <img src="~assets/about/title5.jpg" />
        <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-top: 40px">
          <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" @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)" class="white--text">需求填报</a-button>
            </p>

            <div class="font-16 item-intro mb-2" v-if="item.intro.length > 60">
              {{ item.intro.slice(0, 60) }}
              <a-button @click="showIntro(index)" class="font-16" style="color: #fff!important" type="link">
                more
                <a-icon style="font-size: 12px" type="right" />
              </a-button>
            </div>

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

    <!-- 合作伙伴 -->
    <a name="mao2" id="mao2" 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-1200">
        <div class="partner-flex">
          <div class="partner-item" v-for="(item, index) in lists" :key="index">
            <div class="partner-item-img" v-if="item.logoUrl">
              <img :src="item.logoUrl" />
            </div>
            <div class="partner-item-img" v-else>
              <div class="img-box"></div>
            </div>
            <div class="partner-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 产业创新联盟 -->
    <a name="mao3" id="mao3" class="place"></a>
    <div class="py-12 organize-bor">
      <div class="title w-1500"><img src="~assets/about/title6.png" /></div>
      <div class="w-1500">
        <div class="mt-2 line-height-30 text-indent-2">
          山西绿谷营养与健康研究院由山西绿谷生物科技有限公司联合山西省生物研究院有限公司、交城天娇红农业科技有限公司、
          山西百瑞生科技有限公司、山西传控电子科技有限公司、
          山西农业大学、山西中医药大学、中国辐射防护研究院共同发起，相关高校院所的相关领域平台和研发团队兼职加入。
        </div>
        <div class="contact">乔晓阳：18635939333</div>
      </div>
    </div>

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

    <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: 'Industry',
  data() {
    return {
      time: 10000,
      activeNum: 0, // 当前锚点下标
      listType: [], // 合作伙伴类型
      lists: [], // 合作伙伴列表
      currType: 0, // 当前点击的合作伙伴下标
      serviceList: [], // 服务列表
      showModelIntro: false,
      modelIntro: '',
      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: '请输入正确的手机号' },
      ],
      typeData: {
        type: 0,
        id: '',
      },
    };
  },

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

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

  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: 2,
      },
    };
    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', ['getUserSer', 'getFrontSearchCompany']),

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

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

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

    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(`Serve.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>
.wrap {
  width: 1260px;
  min-height: 1037px;
  margin: 80px auto 28px auto;
  overflow: hidden;
  opacity: 1;
}

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

.w-1500 {
  width: 82%;
  margin: 0 auto;
}


.w-1200{
  width: 70%;
  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;
  }
}

.service-box {
    padding-top: 40px;
    display: flex;
    flex-direction: column;

  .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-top: 20px;
  }
}

.partner-box {
  padding: 40px 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;
    }
  }
}

.contact-box {
  padding: 40px 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: 30%;
    height: 180px;
    margin-right: 5%;
    padding: 0 30px;
    border-radius: 4px;
    background-color: rgba(19,172,196,0.8);
    color: #fff;
}

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

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

.place{
    position: relative;
    top: -100px;
}

.organize-bor {
  .title{
    padding-bottom: 10px;
  }

  .contact{
    font-size: 18px;
    text-align: right;
  }
}
</style>
