<template>
  <div id="register">
    <el-row>
      <el-col :span="24" class="top">
        <el-tag>{{ schoolName }}</el-tag>
      </el-col>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="18" class="mainLeft">
            <el-col :span="24" class="mainLeftTop">
              <el-steps :active="active" finish-status="success" align-center>
                <el-step title="步骤一：填写基本资料"> </el-step>
                <el-step title="步骤二：填写认证资料"> </el-step>
              </el-steps>
            </el-col>
            <basic v-show="active === 1" @next="next" ref="basic"></basic>
            <business v-show="active === 2" @onSubmit="onSubmit" @back="back"></business>
          </el-col>
          <el-col :span="6" class="mainRight">
            <span style="font-size: 18px;">常见问题</span>
            <div>1.单位注册收不到验证码？</div>
            1.您的手机具有短信拦截软件/功能，请检查拦截库中是否有验证短信； 2.您所在的区域运营商信号不稳定，验证码短信存在滞后现象，请您耐心等候；
            3.您在注册过程中可能会存在浏览器不适配等原因，建议您下载并使用谷歌浏览器进行操作。
            如以上三种情况均无法解决您收不到短信验证码的问题，则您的手机号码被运营商拉黑，需要您换一个手机号进行注册。
            <div>2.证件无法上传，点击按钮没反应怎么办？</div>
            浏览器兼容性问题，请使用Google或360浏览器；
            <div>3.单位注册提示组织机构代码证号不正确？</div>
            请仔细核对您填写的9位组织机构代码证号或18位统一社会信用代码证号。
            <div>4.申请的招聘信息一直未通过怎么办？</div>
            单位资质平台会在1-2个工作日内审核完毕，如果一直未审核，可以搜索相应学校就业信息网，查找学校联系方式，致电就业老师；
            <div>5.单位已提交招聘申请，但是招聘信息有误，是否可以修改？</div>
            已经递交申请，在审核中或已经审核通过，不可以修改； 若需要修改，则要联系学校就业老师，审核不通过招聘请求，单位可以重新提交修改。
            <!-- <div>6.注册账号后为什么要关注公众号“云校招企业服务平台”？</div>
            单位的平台认证通知、入校招聘通知都会通过“云校招企业服务平台”进行消息推送，请不要取关哦； -->
          </el-col>
        </div>
      </el-col>
      <el-col :span="24" class="down">
        <div class="w_1200">
          <span>
            <!-- ©2015-2019 长沙市云研网络科技有限公司 版权所有 湘ICP备15008277号-1 -->
          </span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import basic from '@/views/registerEnt/basic.vue';
import business from '@/views/registerEnt/business.vue';
export default {
  name: 'register',
  props: {},
  components: {
    basic,
    business,
  },
  data: () => ({
    schoolName: '企业入驻注册',
    active: 1,
    form: {},
    sch: {},
    verifyForm: {},
  }),
  async created() {},
  computed: {},
  methods: {
    ...mapActions(['corpReg', 'verifyOperation']),

    async next(data) {
      let { sch, verifyForm, ...info } = data;
      this.$set(this, `sch`, sch);
      this.$set(this, `verifyForm`, verifyForm);
      this.$set(this, `form`, data);
      if (!(await this.checkVerify())) {
        this.$set(this, `active`, 1);
        return;
      }
      if (this.active++ > 2) this.active = 0;
    },
    async checkVerify() {
      let result;
      result = await this.verifyOperation({ type: 'checkVerify', data: { code: this.verifyForm.code, code_id: this.verifyForm.code_id } });
      if (`${result.errcode}` !== '0') {
        this.$message.error('图形验证码错误');
        this.$refs.basic.$refs.verifyPic.toCreated();
        return false;
      }
      result = await this.verifyOperation({ type: 'checkMessage', data: { mobile: this.form.mobile, code: this.verifyForm.mobile_code } });
      if (`${result.errcode}` !== '0') {
        this.$message.error('手机验证码错误');
        return false;
      }
      return true;
    },
    back() {
      this.active = 1;
    },
    async onSubmit(data) {
      let form = JSON.parse(JSON.stringify(this.form));
      form['identity'] = data.identity;
      // 连接后台接口
      let result = await this.corpReg({ data: form, schname: this.sch.name, schid: this.sch.code * 1 });
      this.$message({
        type: `${result.errcode}` === '0' ? 'success' : 'error',
        message: `${result.errcode}` === '0' ? '注册成功' : result.errmsg,
      });
      if (`${result.errcode}` === '0') {
        this.$router.push({ path: '/firm' });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  margin: 0 auto;
  width: 1200px;
}
.top {
  width: 100%;
  height: 74px;
  line-height: 60px;
  padding: 5px;
  background-color: #fff;
  border-top: 4px solid #44b549;
  border-bottom: 1px solid #d9dadc;
}
/deep/.top .el-tag {
  font-size: 21px;
  color: #333;
  background: #fff;
  border: none;
}
.main {
  width: 100%;
  min-height: 500px;
  background: #ccc;
  padding: 20px 0;
}
.mainLeft {
  width: 876px;
  min-height: 500px;
  background: #fff;
  padding: 20px 0;
}
.mainLeftTop {
  padding: 20px 30px;
}

.mainRight {
  float: right;
  min-height: 1000px;
  background: #fff;
  padding: 10px;
  font-size: 14px;
}
.mainRight div {
  border-top: 1px dashed #dddddd;
  margin-top: 10px;
  padding: 10px 0;
  font-weight: bold;
}
.down {
  width: 100%;
  height: 67px;
  text-align: center;
  line-height: 67px;
  background: #fff;
  color: #d5d5d5;
  font-size: 12px;
}
</style>
