<template>
  <div class="form flex-colunm">
    <el-steps :active="active" finish-status="success" style="width: 4.8rem">
      <el-step title="注册账户"></el-step>
      <el-step title="完善信息"></el-step>
      <el-step title="审核"></el-step>
    </el-steps>
    <!-- 注册 -->
    <div class="register" v-if="active == 0">
      <div class="company">
        <h4>单位信息</h4>
        <el-form ref="form" :model="form" label-width="1.4rem" :rules="rules">
          <el-form-item label="单位名称" prop="companyName" class="item">
            <el-input
              v-model="form.companyName"
              placeholder="请输入单位名称"
              style="width: 2.4rem"
              maxlength="30"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="区域选择" prop="local" class="item">
            <citySelect
              @sendprovinceId="getprovinceId"
              @sendcityId="getcityId"
              @senddistrictId="getdistrictId"
            ></citySelect>
          </el-form-item>
          <el-form-item label="注册角色" prop="type" class="item">
            <el-select v-model="form.type" placeholder="请输入选择">
              <el-option label="采购商" value="1"></el-option>
              <el-option label="供应商" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <h4>管理员信息</h4>
        <el-form
          ref="adminform"
          :model="adminform"
          label-width="1.4rem"
          :rules="rules"
        >
          <el-form-item label="管理员姓名" prop="name" class="item">
            <el-input
              v-model="adminform.name"
              placeholder="请输入"
              style="width: 2.4rem"
              maxlength="30"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证" prop="idNumber" class="item">
            <el-input
              v-model="adminform.idNumber"
              placeholder="请输入"
              style="width: 2.4rem"
              maxlength="18"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" class="item">
            <el-input
              v-model="adminform.password"
              placeholder="8-16位数字字母组合"
              style="width: 2.4rem"
              minlength="8"
              maxlength="16"
              type="password"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
            ></el-input>
            <!-- <div class="password-tips">密码需由8-16位数字字母组合</div> -->
          </el-form-item>
          <el-form-item label="确认密码" prop="isPassword" class="item">
            <el-input
              v-model="adminform.isPassword"
              placeholder="请输入"
              style="width: 2.4rem"
              minlength="8"
              maxlength="16"
              type="password"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email" class="item">
            <el-input
              v-model="adminform.email"
              placeholder="请输入"
              maxlength="20"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phonenumber" class="item">
            <el-input
              v-model="adminform.phonenumber"
              placeholder="请输入"
              maxlength="11"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
          <div class="getcode">
            <el-form-item label="验证码" prop="code" class="item">
              <el-input
                v-model="adminform.code"
                placeholder="请输入验证码"
                style="width: 1.55rem"
                maxlength="4"
                @keyup.native="
                  $event.target.value = $event.target.value.replace(
                    /^\s+|\s+$/gm,
                    ''
                  )
                "
              ></el-input>
            </el-form-item>
            <div class="code" @click="refreshCode">
              <!--   ：fresh：父组件向子组件传送刷新验证码的信号；
                @makedCode：子组件向父组件传送验证码的值-->
              <Identify :fresh="flag" @makedCode="getMakedCode"></Identify>
            </div>
          </div>
          <div class="getphonecode">
            <el-form-item label="短信验证码" prop="phonecode" class="item">
              <el-input
                v-model="adminform.phonecode"
                placeholder="请输入短信验证码"
                style="width: 2.4rem"
                maxlength="4"
                @keyup.native="
                  $event.target.value = $event.target.value.replace(
                    /^\s+|\s+$/gm,
                    ''
                  )
                "
              ></el-input>
            </el-form-item>
            <div v-show="Verification" class="phonecode" @click="getMessagecode">获取短信验证码</div>
            <div v-show="!Verification" class="phonecode"><span>{{timer}}</span>秒后重新获取</div>
          </div>
        </el-form>
      </div>
      <div class="flex">
        <el-checkbox v-model="checked" class="t1"></el-checkbox>
        <div class="reg-text" @click="centerDialogVisible = true">我已接受并同意本网站《注册协议》</div>
            <el-dialog
            title="注册协议"
            :visible.sync="centerDialogVisible"
            width="50%"
            lock-scroll
            center>
            <el-scrollbar style="height:100%">
              <p class=MsoNormal align=center style='text-align:center'>注册协议</p>

                <p class=MsoNormal align=center style='text-align:center'><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>欢迎您加入捷安采&#8226;电子招投标系统<span lang=EN-US>(</span>以下简称<span
                lang=EN-US>“</span>捷安采<span lang=EN-US>”)</span>，我们将竭诚为您服务！在此，您可以浏览各类公开信息，展示优质资源，寻求合作伙伴，还可以享受到捷安采提供的一系列优质服务。在注册之前，请您务必仔细阅读以下条款：<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>第<span lang=EN-US>1</span>章 协议的订立和效力<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>捷安采运营服务的所有权和运作权归北京捷安采供应链管理有限公司所有。注册用户（以下简称“用户”）完成注册程序并勾选“我已接受并同意网站《用户服务条款》”后，即视为与捷安采订立协议并接受所有的服务条款。<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>本协议自用户勾选“我已接受并同意网站《用户服务条款》”后开始生效。如果本协议的某一条款无论因何种原因完全或部分无效或不具有执行力，本协议的其余条款在不影响协议目的的情况下仍应有效并且有约束力。<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>第<span lang=EN-US>2</span>章 协议的修订和续签<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>用户知悉，对捷安采提供的注册协议标准版本及其修订的完全接受是用户同意签订本协议的前提条件。捷安采在必要时会修订本协议的部分条款，条款内容一旦发生变动，将会在用户进入下一步使用前的页面上提示修改内容。如果用户同意改动，则再次激活“同意”按钮。如果用户不接受，则视为自动放弃使用服务的资格。<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>第<span lang=EN-US>3</span>章 使用规则<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>遵守中华人民共和国相关法律法规，包括但不限于《中华人民共和国计算机信息系统安全保护条例》、《计算机软件保护条例》、《最高人民法院关于审理涉及计算机网络著作权纠纷案件适用法律若干问题的解释<span
                lang=EN-US>(</span>法释<span lang=EN-US>[2004]1</span>号<span lang=EN-US>)</span>》、《全国人大常委会关于维护互联网安全的决定》、《互联网电子公告服务管理规定》、《互联网新闻信息服务管理规定》、《互联网著作权行政保护办法》和《信息网络传播权保护条例》、《互联网用户账号名称管理规定》等有关计算机互联网规定和知识产权的法律和法规、实施办法。<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>用户对其上传的内容负全部责任，所有用户不得在捷安采任何页面发布、转载、传送含有下列内容之一的信息，否则捷安采有权自行处理并不通知用户，情节严重的将暂停或取消用户资格，并保留对涉事用户进一步追究法律责任的权利：<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal><span lang=EN-US>1)</span>违反宪法或法律法规规定的；<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal><span lang=EN-US>2)</span>危害国家安全，泄漏国家机密，颠覆国家政权，破坏国家统一的；<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal><span lang=EN-US>3)</span>损害国家荣誉和利益，损害公共利益的；<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal><span lang=EN-US>4)</span>煽动民族仇恨、民族歧视，破坏民族团结的；<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal><span lang=EN-US>5)</span>破坏国家宗教政策，宣扬邪教和封建迷信的；<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal><span lang=EN-US>6)</span>散布谣言，扰乱社会秩序，破坏社会稳定的；<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal><span lang=EN-US>7)</span>散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal><span lang=EN-US>8)</span>侮辱或者诽谤他人，侵害他人合法权益的；<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal><span lang=EN-US>9)</span>煽动非法集会、结社、游行、示威、聚众扰乱社会秩序的；<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal><span lang=EN-US>10)</span>以非法民间组织名义活动的；<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal><span lang=EN-US>11)</span>含有法律、行政法规禁止的其他内容的。<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>用户在账号名称、头像和简介等注册信息中不得出现违法和不良信息。用户应保证在注册、使用捷安采提供的相关服务等过程中提交的“用户资料”的合法性、真实性和准确性，并对此承担全部责任。<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>用户承诺对其发表或者上传于捷安采的所有信息<span lang=EN-US>(</span>即属于《中华人民共和国著作权法》规定的作品，包括但不限于文字、图片、音乐、电影、表演和录音录像制品和电脑程序等<span
                lang=EN-US>)</span>均享有完整的知识产权，或者已经得到相关权利人的合法授权，务必保证信息来源的合法性；如用户违反本条规定造成捷安采被第三人索赔的，用户应全额补偿捷安采一切费用<span
                lang=EN-US>(</span>包括但不限于各种赔偿费、诉讼代理费及为此支出的其它合理费用<span lang=EN-US>)</span>。<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>机构用户注册时须提交规定格式的《管理员授权委托书》，管理员在捷安采的所有活动均视为该用户的活动。<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>第<span lang=EN-US>4</span>章 用户的账号、密码和安全性<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>用户成功注册后将生成一个捷安采“统一账号”，用户应妥善保管该账号及其对应的密码。如因用户未保管好自己的账号和密码，而对用户自身、捷安采或第三方造成的损害，将由该用户负全部责任。同时，用户应对其账号下全部信息和所有活动负全部责任。用户若发现任何非法使用用户账号的情况，或其他安全漏洞，应立即告知捷安采。<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>第<span lang=EN-US>5</span>章 用户隐私制度<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>尊重用户个人隐私是捷安采的基本原则。捷安采除依法行使信息公开、信息交互等权利外，不会通过其他途径公开、编辑或透露用户的注册信息。除非根据中华人民共和国国家安全机构、公安部门的要求或根据相应的法律程序或维护社会公共利益的要求。<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>第<span lang=EN-US>6</span>章 免责声明<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>捷安采会尽量完善和提升平台服务，但不保证服务一定满足用户的要求，不保证服务不会中断，不保证服务的及时性、安全性、真实性，服务不会发生出错等。对于用户因使用捷安采服务而造成直接或间接损失（包括但不限于因使用服务而造成的用户利润、商业信誉、资料损失或其他有形或无形损失），捷安采不承担赔偿责任。<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>用户理解其可通过捷安采服务同互联网上其他网络用户建立各种形式的联系，若其他网络用户通过此等联系侵犯用户的合法权利，则应由责任人依法承担所有责任，捷安采对此不承担责任。<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>为了更好地提升服务，捷安采需要进行服务器配置、系统维护升级，如进行前述配置或维护，捷安采会提前<span
                lang=EN-US>24</span>小时以上通过网络公告等方式通知用户。在此期间发生的服务暂停现象，或者由于网络通路的偶然阻塞造成服务应用故障，应属正常情况，不可视为捷安采违约。<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>第<span lang=EN-US>7</span>章 结束服务<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>用户或捷安采可随时根据实际情况结束服务。捷安采不需对任何个人或第三方负责而随时结束服务。用户若反对任何服务条款或不同意后来修订的条款，或不满意捷安采的服务，用户可行使以下权利：<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal><span lang=EN-US>1)</span>不再使用捷安采服务。<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal><span lang=EN-US>2)</span>结束用户使用捷安采服务的资格。<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal><span lang=EN-US>3)</span>通告捷安采结束对该用户的服务。<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>结束用户服务后，用户使用捷安采服务的权利立即中止，捷安采不再对用户承担任何义务。<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>第<span lang=EN-US>8</span>章 违约赔偿<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>如果因捷安采违反有关法律、法规或本协议项下的相关条款而给用户造成损失，捷安采同意承担由此造成的损害赔偿责任。用户同意保障和维护捷安采及其他用户的共同利益，如因用户违反有关法律、法规或本协议项下的任何条款而给捷安采网站或任何其他第三人造成损失，用户同意承担由此造成的损害赔偿责任。<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>第<span lang=EN-US>9</span>章 法律适用与争议解决<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>本协议的订立、执行和解释及争议的解决均应适用中国法律。如双方就本协议内容或其执行发生任何争议，首先应进行友好协商。协商不成时，任何一方均可向捷安采所在地人民法院提起诉讼。<span
                lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>第<span lang=EN-US>10</span>章 协议的解释权<span lang=EN-US><o:p></o:p></span></p>

                <p class=MsoNormal><span lang=EN-US><o:p>&nbsp;</o:p></span></p>

                <p class=MsoNormal>本协议的解释权归本捷安采所有。如果其中有任何条款与国家现行的有关法律相抵触，则以国家法律的明文规定为准。</p>
            </el-scrollbar>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>    
      </div>
      
    </div>
    <!-- 完善 -->
    <div class="perfect content" v-if="active == 1">
      <div class="flex-between perfect-head">
        <div class="t2 flex">
          <div>单位名称：</div>
          <div>{{cpName}}</div>
        </div>
        <div class="t2 flex">
          <div>注册角色：</div>
          <div>{{regName}}</div>
        </div>
        <div class="t2 flex">
          <div>行政区域：</div>
          <div>{{area}}</div>
        </div>
      </div>
      <el-form
        ref="perfectForm"
        :model="perfectForm"
        label-width="1.8rem"
        :rules="rules"
      >
        <div class="flex-between">
          <el-form-item label="法人姓名" prop="legalPersonName" class="item">
            <el-input
              v-model="perfectForm.legalPersonName"
              placeholder="请输入"
              style="width: 2.4rem"
              maxlength="30"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="法人电话" prop="legalPersonPhone" class="item">
            <el-input
              v-model="perfectForm.legalPersonPhone"
              placeholder="请输入"
              style="width: 2.4rem"
              maxlength="11"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码" prop="socialCode" class="item">
            <el-input
              v-model="perfectForm.socialCode"
              placeholder="请输入"
              style="width: 2.4rem"
              maxlength="18"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex-between">
          <el-form-item label="单位性质" prop="companyNature" class="item">
            <el-select v-model="perfectForm.companyNature" placeholder="请选择">
              <el-option
                v-for="item in companyNatures"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位所在地" prop="location" class="item">
            <el-input
              v-model="perfectForm.location"
              placeholder="请输入"
              style="width: 2.4rem"
              maxlength="30"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="行业类型" prop="industryType" class="item">
            <el-select v-model="perfectForm.industryType" placeholder="请选择">
              <el-option
                v-for="item in belongTypes"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="flex-between">
          <el-form-item label="开户银行名称" prop="bankName" class="item">
            <el-input
              v-model="perfectForm.bankName"
              placeholder="请输入"
              style="width: 2.4rem"
              maxlength="30"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="结算账号" prop="bankAccount" class="item">
            <el-input
              v-model="perfectForm.bankAccount"
              placeholder="请输入"
              style="width: 2.4rem"
              minlength="12"
              maxlength="30"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="结算账号名" prop="bankAccountName" class="item">
            <el-input
              v-model="perfectForm.bankAccountName"
              placeholder="请输入"
              style="width: 2.4rem"
              minlength="2"
              maxlength="30"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex-between" style="width: 60%">
          <el-form-item
            label="注册资本(万元)"
            prop="registeredCapital"
            class="item"
          >
            <el-input
              v-model="perfectForm.registeredCapital"
              placeholder="请输入"
              style="width: 2.4rem"
              maxlength="10"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
              onkeyup="value=value.replace(/[^\d]/g,'')"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系地址" prop="contactAddress" class="item">
            <el-input
              v-model="perfectForm.contactAddress"
              placeholder="请输入"
              style="width: 2.4rem"
              minlength="4"
              maxlength="30"
              @keyup.native="
                $event.target.value = $event.target.value.replace(
                  /^\s+|\s+$/gm,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item label="经营范围" prop="businessScope" class="item">
          <el-input
            type="textarea"
            :rows="2"
            v-model="perfectForm.businessScope"
            placeholder="请输入"
            style="width: 2.4rem"
            maxlength="300"
          ></el-input>
        </el-form-item>
        <el-form-item label="法人身份证正反面" prop="identity" class="item">
          <imgUpload
            :limit="1"
            :max="10"
            @input="getJustimg"
            tip=""
          ></imgUpload>
          <imgUpload
            :limit="1"
            :max="10"
            @input="getBackimg"
            tip=""
          ></imgUpload>
        </el-form-item>
        <el-form-item label="三证合一扫描件" prop="cardimg" class="item">
          <imgUpload
            :limit="3"
            :max="10"
            @input="getCardimg"
            tip="只可上传三张图片，大小不能超过10MB，此项为必填项"
          ></imgUpload>
        </el-form-item>
        <el-form-item prop="file" class="item" margin-left="-1.8rem">
          <div class="else">
            <div>
              其他资料
              <span class="red"
                >用于上传其他证明性材料如法人变更证明，报名资料请勿在此上传，单个附件建议不超过2M。</span
              >
            </div>
          </div>
          <Upload
            :limit="5"
            :max="10"
            @input="getfile"
            tip="最多上传五份文件,每份不超过10M"
          ></Upload>
        </el-form-item>
      </el-form>
    </div>
    <!-- 审核结果 -->
    <div class="result flex-center" v-if="active == 2">
      <div v-show="result == 0">
        <h4>您的注册申请已提交，请耐心等待平台管理员审核</h4>
        <h5>
          温馨提示 <br />
          1.审核后，您注册填写的手机号讲收到短信提醒 <br />
          2.您可以登录系统查看审核进度 <br />
          3.若超过一天未审核，请致电400-400-400咨询 <br />
        </h5>
      </div>
      <div v-show="result == 1">
        <h4>您已通过平台审核！</h4>
      </div>
      <div v-show="result == 2">
        <h4 style="color: red">对不起，您没有通过审核！</h4>
        <h5 style="color: #000000">拒绝原因：身份证信息作假</h5>
      </div>
    </div>
    <div class="flex btn">
        <el-button type="primary" style="height:30px" class="t2 t10" v-if="active==1" @click="prev">上一步</el-button>
        <button
        @click="next"
        class="t2 nextButton"
        v-if="active == 0 || active == 1">
        下一步
        </button>
    </div>
    <button @click="back" class="t2 nextButton" v-if="active == 2">
      回到首页
    </button>
  </div>
</template>

<script>
import {
  industryList,
  getVerify,
  sendSms,
  verifyPhone,
  companyNatureList,
  checkAccount,
} from "~/api/common/list";
import { register } from "~/api/bid/login";
import Upload from "~/components/Upload/Upload";
import imgUpload from "~/components/Upload/imgUpload";
import Identify from "~/components/identify";
import citySelect from "~/components/citySelect";
/* import {validateRealName} from '../../utils/validate.js' */
export default {
  components: {
    Identify,
    citySelect,
    Upload,
    imgUpload,
  },
  mounted() {
    console.log(this.flag);
    this.flag = !this.flag;
    this.getIndustryList();
    this.getCompanyNatureList();
    // this.getCordimg();
  },
  data() {
    // 测试省份
    let islocal = (rule, value, callback) => {
      console.log("1");
      if (!this.form.provinceId) {
        callback(new Error("请选择省份"));
      } else if (!this.form.cityId) {
        callback(new Error("请选择市"));
      } else if (!this.form.districtId) {
        callback(new Error("请选择区"));
      } else {
        callback();
      }
    };
    // 测试正反图片是否上传
    let checkidentity = (rule, value, callback) => {
      if (this.justimg.length === 0) {
        callback(new Error("请上传正面照片"));
      } else if (this.backimg.length === 0) {
        callback(new Error("请上传反面照片"));
      } else {
        callback();
      }
    };
    // 测试三证合一是否上传
    let checkcardimg = (rule, value, callback) => {
      if (this.cardimg.length === 0) {
        callback(new Error("请上传三证合一"));
      } else {
        callback();
      }
    };
    // 修改密码验证二次是否输入相同
    let validate = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.adminform.isPassword !== "") {
          this.$refs.adminform.validateField("isPassword");
        }
        callback();
      }
    };
    let validate2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.adminform.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    let checkPhone = async (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
          const { code } = await checkAccount(value);
          if (code === 200) {
            callback();
          } else {
            return callback(new Error("手机号重复"));
          }
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };

    //验证码验证
    // let checkCode = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error('验证码不能为空'));
    //   } else {
    //     let code = this.code;
    //     if (value.toLowerCase() == code.toLowerCase()) {
    //       callback();
    //     } else {
    //       return callback(new Error('请输入正确的验证码'));
    //     }
    //   }
    // };
    //名字校验
    let validateRealName = (rule, value, callback) => {
      const realnameReg = /^[\u4e00-\u9fa5]{1,30}$/;
      /* setTimeout(() => { */
        if (!realnameReg.test(value)) {
          var reg = new RegExp("[^\u4e00-\u9fa5]{1,30}");
          let a = value.replace(reg, "");
          this.perfectForm.legalPersonName = a;
          this.form.companyName = a;
          this.perfectForm.location = a;
          this.adminform.name = a;
          this.perfectForm.bankAccountName = a;
          this.perfectForm.bankName = a;
          this.perfectForm.contactAddress = a;

          return callback(new Error("您的输入有误,请重新输入!"));
        } else {
          callback();
        }
  /*     }, 1000); */
    };
    //电话号校验
    let validateRealPhone = (rule, value, callback) => {
      const realnameReg = /^[1][3,4,5,7,8][0-9]{9}$/;
      /* setTimeout(() => { */
        if (!realnameReg.test(value)) {
          var reg = new RegExp(
            "^[023456789A-z。？！，、 ； ： “ ” ‘ ’ （ ） 《 》 〈 〉 【 】 『 』 「 」 ﹃ ﹄ 〔 〕 … — ～ ﹏ ￥.]"
          );
          let a = value.replace(reg, "");
          console.log(a + "--------------");
          this.adminform.phonenumber = a

          return callback(new Error("您的输入有误,请重新输入!"));
        } else {
          callback();
        }
      /* }, 1000); */
    };
    //身份证号校验
    let validateRealId = (rule, value, callback) => {
      const realnameReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
      /* setTimeout(() => { */
        if (!realnameReg.test(value)) {
          var reg = new RegExp(
            "^[A-z。？！，、 ； ： “ ” ‘ ’ （ ） 《 》 〈 〉 【 】 『 』 「 」 ﹃ ﹄ 〔 〕 … — ～ ﹏ ￥.]"
          );
          console.log(value+'+++++++++++++++')
          let a = value.replace(reg, "");
          console.log(a + "--------------");
          this.adminform.idNumber = a;
          return callback(new Error("您的输入有误,请重新输入!"));
        } else {
          callback();
        }
 /*      }, 1000); */
    };
    //统一社会代码
    let validateRealSHid = (rule, value, callback) => {
      const realnameReg = /^[A-Z0-9]+$/;
      /* setTimeout(() => { */
        if (!realnameReg.test(value)) {
          var reg = new RegExp(
            "^[a-z。？！，、 ； ： “ ” ‘ ’ （ ） 《 》 〈 〉 【 】 『 』 「 」 ﹃ ﹄ 〔 〕 … — ～ ﹏ ￥.]/g"
          );
          
          let a = value.replace(reg, "");
          console.log(a + "--------------");
          this.perfectForm.socialCode = a;
          return callback(new Error("您的输入有误,请重新输入!"));
        } else {
          callback();
        }
 /*      }, 1000); */
    };

    let validateRealLast = (rule, value, callback) => {
      const realnameReg = /^([1-9]{1})(\d{14}|\d{18})$/;
     /*  setTimeout(() => { */
        if (!realnameReg.test(value)) {
          var reg = new RegExp(
            "^[a-z。？！，、 ； ： “ ” ‘ ’ （ ） 《 》 〈 〉 【 】 『 』 「 」 ﹃ ﹄ 〔 〕 … — ～ ﹏ ￥.]"
          );
          let a = value.replace(reg, "");
          this.perfectForm.bankAccount = a;
          return callback(new Error("您的输入有误,请重新输入!"));
        } else {
          callback();
        }
   /*    }, 1000); */
    };
    let validateRealPrice = (rule, value, callback) => {
      const realnameReg = /\s+/;
      /* setInterval(() => { */
        if (!realnameReg.test(value)) {
          var reg = new RegExp(
            "^[A-z。？！，、 ； ： “ ” ‘ ’ （ ） 《 》 〈 〉 【 】 『 』 「 」 ﹃ ﹄ 〔 〕 … — ～ ﹏ ￥.]"
          );
          let a = value.replace(reg, "");
          this.perfectForm.registeredCapital = a;
          /* return callback(new Error("您的输入有误,请重新输入!")); */
        } else {
          callback();
        }
 /*      }, 1000); */
    };
    /* this.flag = false
      clearInterval(timer);
      this.flag = true; */

    return {
      cpName:"",
      regName:'',
      area:'',
      Verification:true,
      timer:60,
      centerDialogVisible: false,
      flag: true,
      companyNatures: [],
      files: [],
      justimg: [],
      backimg: [],
      cardimg: [],
      belongTypes: [],
      result: "0",
      fileList: [],
      flag: true, //该值变化，就会触发刷新
      code: "", //刷新后的验证码
      active: 0,
      checked: true,
      adminform: {
        name: "",
        idNumber: "",
        password: "",
        isPassword: "",
        email: "",
        phonenumber: "",
        code: "",
        phonecode: "",
      },
      form: {
        companyName: "",
        local: "",
        provinceId: "",
        cityId: "",
        districtId: "",
        type: "",
      },
      perfectForm: {
        legalPersonPhone: "",
        legalPersonName: "",
        location: "",
        bankAccount: "",
        bankAccountName: "",
        contactAddress: "",
        socialCode: "",
        companyNature: "",
        industryType: "",
        bankName: "",
        registeredCapital: "",
        businessScope: "",
      },
      rules: {
        companyName: [
          {
            required: true,
            message: "请输入单位名称",
            trigger: "blur",
          },
          {
            validator: validateRealName,
          },
        ],
        local: [
          {
            required: true,
            validator: islocal,
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择角色",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入管理者姓名",
            trigger: "blur",
          },
          {
            validator: validateRealName,
          },
        ],
        idNumber: [
          {
            required: true,
            message: "请输入身份证",
            trigger: "blur",
          },
          {
            validator: validateRealId,
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
            message: "密码需由8-16位数字字母组合",
          },
        ],
        isPassword: [
          {
            required: true,
            message: "请再次输入密码",
            trigger: "blur",
          },
          {
            validator: validate2,
            trigger: "blur",
          },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
            message: "密码需由8-16位数字字母组合",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入电子邮箱",
            trigger: "blur",
          },
          {
            pattern: /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,
            message: "请输入正确的邮箱地址",
          },
        ],
        phonenumber: [
          {
            required: true,
            validator: checkPhone,
            trigger: "blur",
          },
          {
            validator: validateRealPhone,
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
        phonecode: [
          {
            required: true,
            message: "请输入短信验证码",
            trigger: "blur",
          },
        ],
        legalPersonPhone: [
          {
            required: true,
            message: "请输入法人电话",
            trigger: "blur",
          },
          {
            validator: validateRealPhone,
          },
        ],

        legalPersonName: [
          {
            required: true,
            message: "请输入法人姓名",
            trigger: "blur",
          },
          {
            validator: validateRealName,
          },
        ],
        location: [
          {
            required: true,
            message: "请输入单位所在地",
            trigger: "blur",
          },
          {
            validator: validateRealName,
          },
        ],
        bankAccount: [
          {
            required: true,
            message: "请输入结算账号",
            trigger: "blur",
          },
          {
            validator: validateRealLast,
          },
        ],
        bankAccountName: [
          {
            required: true,
            message: "请输入结算账号名",
            trigger: "blur",
          },
          {
            validator: validateRealName,
          },
        ],
        contactAddress: [
          {
            required: true,
            message: "请输入联系地址",
            trigger: "blur",
          },
          {
            validator: validateRealName,
          },
        ],

        socialCode: [
          {
            required: true,
            message: "请输入社会信用码",
            trigger: "blur",
          },
          {
            validator: validateRealSHid,
          }
        ],
        companyNature: [
          {
            required: true,
            message: "请输入行业类型",
            trigger: "blur",
          },
        ],
        industryType: [
          {
            required: true,
            message: "请选择行业类型",
            trigger: "blur",
          },
        ],
        bankName: [
          {
            required: true,
            message: "开户银行名称",
            trigger: "blur",
          },
          {
            validator: validateRealName,
          },
        ],
        registeredCapital: [
          {
            required: true,
            message: "请输入注册资本",
            trigger: "blur",
          },
          {
            validator: validateRealPrice,
          },
        ],
        businessScope: [
          {
            required: true,
            message: "请输入经营范围",
            trigger: "blur",
          },
          {
            pattern: /[\u4e00-\u9fa5]|[\（\）\《\》\——\；\，\。\“\”\<\>\！]/,
            message: "请输入正确的经营范围",
          },
        ],
        identity: [
          {
            required: true,
            validator: checkidentity,
            trigger: "blur",
          },
        ],
        cardimg: [
          {
            required: true,
            validator: checkcardimg,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    prev(){
      this.active ==0
    },
    back() {
      this.$router.push("/");
    },
    // 获取单位性质
    async getCompanyNatureList() {
      const res = await companyNatureList();
      this.companyNatures = res;
    },
    //获取所属行业
    async getIndustryList() {
      const res = await industryList();
      this.belongTypes = res;
    },
    //  获取验证码图片
    // async getCordimg() {
    //   const res = await getVerify()
    //   console.log(res);
    // },

    getJustimg(val) {
      console.log(val);
      this.justimg = val;
    },
    getBackimg(val) {
      console.log(val);
      this.backimg = val;
    },
    getCardimg(val) {
      console.log(val);
      this.cardimg = val;
    },
    getfile(val) {
      console.log(val);
      this.files = val;
    },
    // 获取市ID
    getprovinceId(val) {
      this.form.provinceId = val;
      this.form.cityId = "";
      this.form.districtId = "";
    },
    // 获取省ID
    getcityId(val) {
      this.form.cityId = val;
      this.form.districtId = "";
    },
    // 获取城ID
    getdistrictId(val) {
      this.form.districtId = val;
    },
    async next() {
      let active = this.active;
      // 注册阶段
      if (active == 0) {
        const valid = await this.$refs["form"].validate();
        const valid1 = await this.$refs["adminform"].validate();
        if (valid && valid1) {
          let checked = this.checked;
          if (!checked) {
            this.$message.error("请勾选协议");
          }else{
              let message = {};
              message.phone = this.adminform.phonenumber;
              message.verify = this.adminform.phonecode;
              const { msg, code,data } = await verifyPhone(message);
              if (code === 200) {
                this.active++;
                this.perfectForm.legalPersonPhone = this.adminform.phonenumber
                this.cpName = this.form.companyName
                this.regname = this.form.type
                this.area = this.form.provinceId + this.form.cityId + this.form.districtId
              } else {
                this.$message.error(msg);
              }
          }
        }
        // 完善阶段
      } else if (active == 1) {
        const valid = await this.$refs["perfectForm"].validate();
        if (valid) {
          let justimg = this.justimg;
          let backimg = this.backimg;
          let cardimg = this.cardimg;
          let files = this.files;
          justimg.forEach(function (item, index) {
            item.type = 1;
          });
          backimg.forEach(function (item, index) {
            item.type = 2;
          });
          cardimg.forEach(function (item, index) {
            item.type = 3;
          });
          files.forEach(function (item, index) {
            item.type = 4;
          });
          let file = justimg.concat(backimg).concat(cardimg).concat(files);
          let form = this.form;
          let adminform = this.adminform;
          let perfectForm = this.perfectForm;
          Object.assign(perfectForm, form);
          perfectForm.sysUserPO = adminform;
          perfectForm.fileList = file;
          const { data, code, msg } = await register(perfectForm);
          if (code === 200) {
            this.$message.success(msg);
            this.active++;
          }else{
            this.$message.error(error)
          }
        }
      }
    },
    refreshCode() {
      this.flag = !this.flag;
      console.log("刷新");
    },
    getMakedCode(code) {
      this.code = code;
    },
    async getMessagecode() {
      if (!this.adminform.phonenumber) {
        this.$message.error("请输入手机号");
        return;
      }
      if (!this.adminform.code) {
        this.$message.error("请填写验证码");
        return;
      }
      if (this.code.toLowerCase() !== this.adminform.code.toLowerCase()) {
        this.$message.error("请输入正确的验证码");
        return;
      }else{
        let message = {};
        message.phone = this.adminform.phonenumber;
        message.type = 1;
        const { msg, code } = await sendSms(message);
        if (code === 200) {
          this.$message.success("发送成功");
          this.refreshCode();
          this.Verification = false;      //点击button改变v-show的状态
            let auth_timer = setInterval(()=>{  //定时器设置每秒递减
              this.timer--;        //递减时间
              if(this.timer<=0){  
                this.Verification = true;    //60s时间结束还原v-show状态并清除定时器
                clearInterval(auth_timer)
              }
            },1000)
        }else{
          this.$message.error(msg)
        }
      }
    },
  },
};
</script>

<style scoped>

.el-scrollbar__wrap {
  overflow-x:hidden;
}
.reg-text{
  cursor: pointer;
}
.upload > div {
  color: rgba(102, 102, 102, 1);
  font-weight: 400;
}

.label-form {
  font-size: 0.16rem;
  margin-top: 0.3rem;
  margin-bottom: 0.1rem;
  font-weight: 400;
}

.company h4 {
  font-size: 0.22rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  margin-top: 0.62rem;
  margin-bottom: 0.5rem;
}

.el-input {
  width: 2.4rem;
  height: 0.4rem;
}

.nextButton {
  width: 3rem;
  height: 0.48rem;
  background: rgba(4, 134, 254, 1);
  border-radius: 0.04rem;
  line-height: 0.46rem;
  margin-top: 0.45rem;
  margin-bottom: 0.8rem;
  color: #fff;
  cursor: pointer;
}

.item .el-form-item__label {
  font-size: 0.16rem;
  font-weight: bold;
}

.password-tips {
  margin-bottom: 0;
  color: rgba(144, 147, 153, 1);
  font-weight: 400;
  font-size: 0.12rem;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
  background: rgba(247, 247, 247, 1);
}

.avatar {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}

.getcode,
.getphonecode {
  position: relative;
}

.getcode > .code {
  /*margin: 400px auto;*/
  width: 0.68rem;
  height: 0.32rem;
  /*border: 1px solid red;*/
  position: absolute;
  top: 0;
  left: 3.3rem;
}

.getphonecode > .phonecode {
  font-size: 0.14rem;
  font-weight: 400;
  color: rgba(51, 136, 255, 1);
  position: absolute;
  top: 0.13rem;
  left: 4rem;
  cursor: pointer;
}

.else .red {
  color: #ff6161;
  font-size: 0.14rem;
}

.perfect-head {
  width: 9rem;
  margin-top: 0.66rem;
  margin-bottom: 0.37rem;
}

.perfect-head > div > text {
  font-weight: bold;
}

.result {
  width: 100%;
  height: 3rem;
}

.result h4 {
  font-size: 0.3rem;
  font-weight: 600;
  color: rgba(75, 193, 103, 1);
  margin-top: 1rem;
  margin-bottom: 0.2rem;
}

.result h5 {
  font-size: 0.18rem;
  font-weight: 400;
  color: rgba(128, 128, 128, 1);
  line-height: 0.3rem;
  text-align: center;
}
.t1{
  margin-left:100px;
}
.btn{
  position: relative;
}
.t10{
  position: absolute;
  bottom:70px;
  left:-120px;
  cursor: pointer;
  height:50px
  }
</style>